jn_sis_zhfx/src/views/stateMonitor/DetailMatrix/index.vue

<template>
  <div
    :class="$store.state.themeName === 'dark' ? 'dark-matrix' : 'light-matrix'"
  >
    <!-- 头部按钮选项 -->
    <HeaderNav @typeFlag="typeFlag" :isAll="true" />
    <div class="matrix-body">
      <!-- 接入台数  欠发情况 -->
      <div class="body-title">
        <div class="base-inf">
          <div class="title-name">
            <div class="imgs" v-if="tabIndex === 0">
              <img src="@assets/imgs/downF.png" />
              <img src="@assets/imgs/all.png" class="all_img" />
            </div>
            <div class="imgs" v-if="tabIndex === -1">
              <img src="@assets/imgs/downF.png" />
              <img src="@assets/imgs/windup.png" class="qty_img" />
            </div>
            <div class="imgs" v-if="tabIndex === -2">
              <img src="@assets/imgs/downg.png" />
              <img src="@assets/imgs/ptyup.png" class="qty_img" />
            </div>
            <div class="base-num" @click="handleClick('all')">
              <div class="base-name">接入台数</div>
              <div class="nums">{{ sourceMap.jrts || 0 }}</div>
            </div>
          </div>
          <div class="matrix-status">
            <div
              class="title-status"
              :class="item.color"
              v-for="(item, index) in titleList"
              :key="index"
            >
              <div class="status-first" @click="handleClick(item.value1)">
                <div class="matrix-status-left">{{ item.name }}</div>
                <div class="matrix-status-right">
                  {{ sourceMap[item.code] }}
                </div>
              </div>
              <div class="status-end" @click="handleClick(item.value2)">
                <div class="matrix-status-left">
                  <i
                    class="svg-icon svg-icon-sm"
                    :class="
                      $store.state.themeName === 'dark'
                        ? 'svg-icon-' + item.color
                        : 'white'
                    "
                  >
                    <SvgIcon :svgid="item.icon1"></SvgIcon>
                  </i>
                  {{ item.text1 }}
                </div>
                <div class="matrix-status-right">
                  {{ sourceMap[item.code1] }}
                </div>
              </div>
              <div class="status-end" @click="handleClick(item.value3)">
                <div class="matrix-status-left">
                  <i
                    class="svg-icon svg-icon-sm"
                    :class="
                      $store.state.themeName === 'dark'
                        ? 'svg-icon-' + item.color
                        : 'white'
                    "
                  >
                    <SvgIcon :svgid="item.icon2"></SvgIcon>
                  </i>
                  {{ item.text2 }}
                </div>
                <div class="matrix-status-right">
                  {{ sourceMap[item.code2] }}
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="unpaid">
          <div class="unpaid-item">
            <img src="@assets/imgs/unpaid.png" class="unpaid-img" alt="" />
            <div class="unpaid-name">欠发情况</div>
          </div>
          <div
            class="unpaid-item1"
            v-for="(item, index) in unpaidList"
            :key="index"
            :class="item.color"
          >
            <div class="percent">{{ item.num3 }}</div>
            <div class="nums">
              {{
                sourceMap[item.key]
                  ? (sourceMap[item.key] / 10000).toFixed(2)
                  : 0
              }}
            </div>
          </div>
        </div>
      </div>
      <!-- 风电场/光电站列表 -->
      <el-scrollbar
        height="calc(100% - 72px)"
        v-loading="loading"
        element-loading-background="rgba(4, 12, 11, 0.8)"
        element-loading-text="加载中..."
      >
        <div class="matrix-box">
          <!-- 单个风场/电站 -->
          <div
            class="matrixs"
            v-for="(value, index) in showMatrixList"
            :key="index"
            :class="{ active_vie: value.wtlist.length == 0 }"
          >
            <!-- wp -->
            <div class="matrix-title">
              <!--svg + wpname @click="handleToggle(index)"-->
              <div class="matrix-svg">
                <i
                  v-if="value.czlx == -1"
                  class="svg-icon svg-icon-sm svg-icon-green"
                >
                  <SvgIcon svgid="svg-wind-site"></SvgIcon>
                </i>
                <i v-else class="svg-icon svg-icon-sm svg-icon-orange">
                  <SvgIcon svgid="svg-photovoltaic"></SvgIcon>
                </i>
                <span
                  class="station-name"
                  :style="value.czlx == -1 ? '' : 'color:#ff8100'"
                  >{{ value.wpname }}</span
                >
              </div>
              <!-- 右侧统计项 -->
              <div class="indicator">
                <div
                  class="sub-title-item"
                  :class="indexs >= 8 && !item.flag ? 'active' : 'active1'"
                  v-for="(item, indexs) in subTitleDatas"
                  :key="indexs"
                  @click="handleIndicatorClick(value.czlx, value.wpid)"
                >
                  <span>{{
                    item.type === value.czlx ? item.text1 : item.text
                  }}</span>
                  <span class="sub-value" :style="{ color: item.color }">
                    {{
                      indexs >= 8
                        ? value[item.key]
                          ? item.ratio
                            ? (value[item.key] / item.ratio).toFixed(2)
                            : value[item.key].toFixed(2)
                          : "0.00"
                        : value[item.key]
                    }}
                  </span>
                </div>
              </div>
            </div>
            <!-- wt v-show="value['switch' + index]"-->
            <div class="matrix-list">
              <div
                class="matrix-card"
                style="cursor: pointer"
                :class="
                  val.status !== '' && colorList[Number(val.status)]
                    ? colorList[Number(val.status)]
                    : 'gray'
                "
                v-for="(val, indexe) in value.wtlist"
                :key="indexe"
              >
                <div class="info">
                  <!-- wtname + 状态 -->
                  <div
                    class="card-left"
                    @click="handleLeftClick(val, value.czlx, value.wpid)"
                  >
                    <div class="card-name">{{ val.wtname }}</div>
                    <i
                      class="svg-icon svg-icon-sm"
                      :class="
                        val.status === 4 || val.status === 5
                          ? 'svg-icon-white'
                          : `svg-icon-${colorList[Number(val.status)]}`
                      "
                    >
                      <SvgIcon :svgid="mapping[val.status]"></SvgIcon
                    ></i>
                  </div>
                  <div class="dashed" />
                  <!-- 数据项 -->
                  <div
                    class="card-right"
                    @click="handleRightClick(value.czlx, val.wtid)"
                  >
                    <div class="right-item">
                      <i
                        class="svg-icon svg-icon-sm"
                        :class="
                          val.status === 4 || val.status === 5
                            ? 'svg-icon-white'
                            : `svg-icon-${colorList[Number(val.status)]}`
                        "
                      >
                        <SvgIcon svgid="svg-P"></SvgIcon
                      ></i>
                      <div class="right-value">
                        {{
                          val.power
                            ? val && Number(val.power)?.toFixed(2)
                            : "0.00"
                        }}
                      </div>
                    </div>
                    <div class="right-item">
                      <i
                        class="svg-icon svg-icon-sm"
                        :class="
                          val.status === 4 || val.status === 5
                            ? 'svg-icon-white'
                            : `svg-icon-${colorList[Number(val.status)]}`
                        "
                      >
                        <SvgIcon
                          :svgid="value.czlx == '-1' ? 'svg-W' : 'svg-A'"
                        ></SvgIcon
                      ></i>
                      <div class="right-value">
                        {{
                          value.czlx == "-1"
                            ? val.speed
                              ? Number(val.speed)?.toFixed(2)
                              : "0.00"
                            : val.current
                            ? Number(val.current)?.toFixed(2)
                            : "0.00"
                        }}
                      </div>
                    </div>
                    <div class="right-item">
                      <i
                        class="svg-icon svg-icon-sm"
                        :class="
                          val.status === 4 || val.status === 5
                            ? 'svg-icon-white'
                            : `svg-icon-${colorList[Number(val.status)]}`
                        "
                      >
                        <SvgIcon
                          :svgid="value.czlx == '-1' ? 'svg-R' : 'svg-V'"
                        ></SvgIcon
                      ></i>
                      <div class="right-value">
                        {{
                          value.czlx == "-1"
                            ? val.transfer
                              ? Number(val.transfer)?.toFixed(2)
                              : "0.00"
                            : val.voltage
                            ? Number(val.voltage)?.toFixed(2)
                            : "0.00"
                        }}
                      </div>
                    </div>
                  </div>
                </div>
                <div class="matrix-progress">
                  <div
                    class="progress-block"
                    :style="{ width: (val.rate > 100 ? 100 : val.rate) + '%' }"
                    :class="
                      findUpColor(unpaidList, parseInt(Number(val.ssqfzt)) + 1)
                    "
                  ></div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </el-scrollbar>
      <qushi-dialog ref="child" :chartName="chartName"></qushi-dialog>
      <el-dialog
        class="dialogs"
        width="90%"
        top="40px"
        v-model="displayMatrix"
        :show-close="true"
        destroy-on-close
      >
        <template #title>
          <div class="dialog-title">
            <img class="dialog-title-img" src="@assets/imgs/dialog-title.png" />
            <div class="title">设备详情</div>
          </div>
        </template>
        <div class="dialog-body" style="height: 77vh">
          <img class="dialog-img" src="@assets/imgs/dialog.png" />
          <windDetail
            v-show="wtType == -1"
            :wind="wind"
            :flag="flag"
            showHeight="77vh"
          ></windDetail>
          <lightDetail
            v-show="wtType == -2"
            :wind="wind"
            :flag="flag"
            showHeight="77vh"
          ></lightDetail>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import qushiDialog from "@/components/qushi/qushiDialog.vue";
import windDetail from "@/components/windDetail/index";
import lightDetail from "@/components/lightDetial/index.vue";
import SvgIcon from "@com/coms/icon/svg-icon.vue";
import { deepClone, findUpColor } from "@/utills/func.js";
import HeaderNav from "@/components/headerNavSta/index.vue";
import api from "@api/cockpit/matrix/index.js";
export default {
  // 名称
  name: "DetailMatrix", //明细矩阵
  // 使用组件
  components: {
    SvgIcon,
    HeaderNav,
    qushiDialog,
    windDetail,
    lightDetail,
  },

  // 数据
  data() {
    return {
      loading: false,
      timmer: null, // 定时器开关
      sourceMap: {}, // 接口数据
      showMatrixList: [], //展示数据
      fillFjzt: "all", // 风机/电站状态
      mapping: {
        0: "svg-standby",
        1: "svg-manual",
        2: "svg-normal-power",
        3: "svg-drop-output",
        4: "svg-gz-downtime",
        5: "svg-field-involved",
        6: "svg-jx-downtime",
        7: "svg-field-involved",
        8: "svg-limit-power",
        9: "svg-downtime",
        10: "svg-intranet-involvement",
        11: "svg-environment",
        12: "svg-offline",
        13: "svg-unknown",
      },
      status: "all",
      titleArr: [],
      //   左侧标签
      titleList: [
        {
          color: "blue",
          name: "待机",
          text1: "待机",
          text2: "手动停机",
          value1: "dj",
          value2: "0",
          value3: "1",
          code: "djts",
          code1: "dfts",
          code2: "sdtj",
          icon1: "svg-standby",
          icon2: "svg-manual",
        },
        {
          color: "green",
          name: "并网",
          text1: "正常运行",
          text2: "降出力运行",
          value1: "yx",
          value2: "2",
          value3: "3",
          code: "bwts",
          code1: "zcyx",
          code2: "jclyx",
          icon1: "svg-normal-power",
          icon2: "svg-drop-output",
        },
        {
          color: "red",
          name: "故障",
          text1: "故障停机",
          text2: "故障受累",
          value1: "gz",
          value2: "4",
          value3: "5",
          code: "gzts",
          code1: "gztj",
          code2: "gzsl",
          icon1: "svg-gz-downtime",
          icon2: "svg-field-involved",
        },
        {
          color: "orange",
          name: "检修",
          text1: "检修停机",
          text2: "检修受累",
          value1: "jx",
          value2: "6",
          value3: "7",
          code: "jxts",
          code1: "jxtj",
          code2: "jxsl",
          icon1: "svg-jx-downtime",
          icon2: "svg-field-involved",
        },
        {
          color: "pink",
          name: "限电",
          text1: "限电降出力",
          text2: "限电停机",
          value1: "xd",
          value2: "8",
          value3: "9",
          code: "xdts",
          code1: "xdjcl",
          code2: "xdtj",
          icon1: "svg-limit-power",
          icon2: "svg-downtime",
        },
        {
          color: "write",
          name: "受累",
          text1: "电网受累",
          text2: "环境受累",
          value1: "sl",
          value2: "10",
          value3: "11",
          code: "slts",
          code1: "dwsl",
          code2: "hjsl",
          icon1: "svg-intranet-involvement",
          icon2: "svg-environment",
        },
        {
          color: "gray",
          name: "离线",
          text1: "离线",
          text2: "未知",
          value1: "lx",
          value2: "12",
          value3: "13",
          code: "lx",
          code1: "lxz",
          code2: "wz",
          icon1: "svg-offline",
          icon2: "svg-unknown",
        },
      ],
      //   右侧欠发标签
      unpaidList: [
        {
          id: 1,
          test: "欠发电量",
          num1: 0,
          key: "qf0",
          num3: "0%~5%",
          color: "upGreen",
        },
        {
          id: 2,
          test: "欠发电量",
          num1: 0,
          key: "qf1",
          num3: "5%~10%",
          color: "upSkyBlue",
        },
        {
          id: 3,
          test: "欠发电量",
          num1: 0,
          key: "qf2",
          num3: "10%~20%",
          color: "upBlue",
        },
        {
          id: 4,
          test: "欠发电量",
          num1: 0,
          key: "qf3",
          num3: "20%~40%",
          color: "upPurple",
        },
        {
          id: 5,
          test: "欠发电量",
          num1: 0,
          key: "qf4",
          num3: ">40%",
          color: "upPink",
        },
      ],
      colorList: [
        "blue",
        "blue",
        "green",
        "green",
        "red",
        "red",
        "orange",
        "orange",
        "pink",
        "pink",
        "write",
        "write",
        "gray",
        "gray",
      ],
      subTitleDatas: [
        {
          text: "接入台数",
          color: "#FFFFFF",
          key: "jrts",
        },
        {
          text: "待机台数",
          color: "#1c99ff",
          key: "djts",
        },
        {
          text: "并网台数",
          color: "#05BB4C",
          key: "bwts",
        },
        {
          text: "故障台数",
          color: "#BA3237",
          key: "gzts",
        },
        {
          text: "检修台数",
          color: "#E17D24",
          key: "jxts",
        },
        {
          text: "限电台数",
          color: "#C530C8",
          key: "xdts",
        },
        {
          text: "受累台数",
          color: "#FFFFFF",
          key: "slts",
        },
        {
          text: "离线台数",
          color: "#606769",
          key: "lxts",
        },
        {
          text: "风速",
          color: "#9CA5A8",
          key: "spped",
          text1: "光照强度",
          type: "-2",
        },
        {
          text: "预测功率",
          color: "#9CA5A8",
          key: "ycgl",
        },
        {
          text: "保证功率",
          color: "#9CA5A8",
          key: "bzgl",
          ratio: 1000,
        },
        // {
        //   text: "理论功率",
        //   color: "#9CA5A8",
        //   key: "llgl",
        //   ratio: 1000,
        // },
        {
          text: "实际功率",
          color: "#9CA5A8",
          key: "sjgl",
          ratio: 1000,
        },
        // {
        //   text: "AGC指令",
        //   color: "#9CA5A8",
        //   key: "agc",
        //   flag: true,
        // },
        // {
        //   text: "出线功率",
        //   color: "#9CA5A8",
        //   key: "cxgl",
        //   ratio: 1000,
        //   flag: true,
        // },
      ],
      activeTab: "fc", //全部 风电 光伏
      enterpriseIndex: "all", //公司
      tabIndex: -1, //全部 0  风电 -1  光伏-2
      //   wt指标
      ssPv: [
        {
          statiomName: "功率",
          stse: "",
          sts: "AI114",
        },
        {
          statiomName: "风速",
          stse: "",
          sts: "AI066",
        },
        {
          statiomName: "发电机转速",
          stse: "",
          sts: "AI060",
        },
      ],
      //   wp指标
      stse: [
        {
          statiomName: "风速",
          stse: "",
          sts: "SSPJFS",
        },
        {
          statiomName: "预测功率",
          stse: "",
          sts: "FCFGDQDT0001",
        },
        {
          statiomName: "保证功率",
          stse: "",
          sts: "SSZBZGL",
        },
        // {
        //   statiomName: "理论功率",
        //   stse: "",
        //   sts: "SSZNHGLZS",
        // },
        {
          statiomName: "实际功率",
          stse: "",
          sts: "SSZGL",
        },
      ],
      // 弹窗标题
      chartName: "对比曲线",
      displayMatrix: false,
      wind: {},
      wtType: -1,
      flag: false,
    };
  },

  // 函数
  methods: {
    deepClone,
    findUpColor,
    // 头部tab选择
    typeFlag(activeTab, enterpriseIndex) {
      this.activeTab = activeTab;
      this.tabIndex = activeTab == "all" ? 0 : activeTab == "fc" ? -1 : -2;
      this.enterpriseIndex = enterpriseIndex;
    },
    // 请求服务
    requestData() {
      api
        .matrixDetailPush({
          company:
            this.enterpriseIndex == "all"
              ? "0"
              : this.enterpriseIndex.toString(),
          type: this.tabIndex.toString(),
        })
        .then((res) => {
          if (Object.values(res.data.data).length) {
            let sourceMap = res.data.data;
            // sourceMap.powerVos.forEach((item, index) => {
            //   item["switch" + index] = true;
            // });
            this.sourceMap = sourceMap;
            if (this.fillFjzt) {
              this.handleClick(this.fillFjzt);
            }
          } else {
            this.sourceMap = {};
            this.showMatrixList = [];
          }
        });
    },
    // 点击切换状态
    handleClick(val) {
      this.fillFjzt = val;
      this.handleClickWind();
    },
    // 点击开关闭场站设备
    handleToggle(index) {
      //   this.showMatrixList[index]["switch" + index] =
      //     !this.showMatrixList[index]["switch" + index];
    },
    // 状态切换改变数据
    handleClickWind() {
      this.loading = false;
      this.showMatrixList = JSON.parse(JSON.stringify(this.sourceMap.powerVos));
      let matrixList = this.sourceMap.powerVos;
      if (this.fillFjzt !== "all") {
        this.showMatrixList.forEach((item) => {
          item.wtlist = [];
        });
        switch (this.fillFjzt) {
          case "dj":
            matrixList.forEach((val, index) => {
              val.wtlist.forEach((item) => {
                if (item.status === 0 || item.status === 1) {
                  this.showMatrixList[index].wtlist.push(item);
                }
              });
            });
            break;
          case "0":
            matrixList.forEach((val, index) => {
              val.wtlist.forEach((item) => {
                if (item.status === 0) {
                  this.showMatrixList[index].wtlist.push(item);
                }
              });
            });
            break;
          case "1":
            matrixList.forEach((val, index) => {
              val.wtlist.forEach((item) => {
                if (item.status === 1) {
                  this.showMatrixList[index].wtlist.push(item);
                }
              });
            });
            break;

          case "yx":
            matrixList.forEach((val, index) => {
              val.wtlist.forEach((item) => {
                if (item.status === 2 || item.status === 3) {
                  this.showMatrixList[index].wtlist.push(item);
                }
              });
            });
            break;
          case "2":
            matrixList.forEach((val, index) => {
              val.wtlist.forEach((item) => {
                if (item.status === 2) {
                  this.showMatrixList[index].wtlist.push(item);
                }
              });
            });
            break;
          case "3":
            matrixList.forEach((val, index) => {
              val.wtlist.forEach((item) => {
                if (item.status === 3) {
                  this.showMatrixList[index].wtlist.push(item);
                }
              });
            });
            break;

          case "gz":
            matrixList.forEach((val, index) => {
              val.wtlist.forEach((item) => {
                if (item.status === 4 || item.status === 5) {
                  this.showMatrixList[index].wtlist.push(item);
                }
              });
            });
            break;
          case "4":
            matrixList.forEach((val, index) => {
              val.wtlist.forEach((item) => {
                if (item.status === 4) {
                  this.showMatrixList[index].wtlist.push(item);
                }
              });
            });
            break;
          case "5":
            matrixList.forEach((val, index) => {
              val.wtlist.forEach((item) => {
                if (item.status === 5) {
                  this.showMatrixList[index].wtlist.push(item);
                }
              });
            });
            break;

          case "jx":
            matrixList.forEach((val, index) => {
              val.wtlist.forEach((item) => {
                if (item.status === 6 || item.status === 7) {
                  this.showMatrixList[index].wtlist.push(item);
                }
              });
            });
            break;
          case "6":
            matrixList.forEach((val, index) => {
              val.wtlist.forEach((item) => {
                if (item.status === 6) {
                  this.showMatrixList[index].wtlist.push(item);
                }
              });
            });
            break;
          case "7":
            matrixList.forEach((val, index) => {
              val.wtlist.forEach((item) => {
                if (item.status === 7) {
                  this.showMatrixList[index].wtlist.push(item);
                }
              });
            });
            break;

          case "xd":
            matrixList.forEach((val, index) => {
              val.wtlist.forEach((item) => {
                if (item.status === 8 || item.status === 9) {
                  this.showMatrixList[index].wtlist.push(item);
                }
              });
            });
            break;
          case "8":
            matrixList.forEach((val, index) => {
              val.wtlist.forEach((item) => {
                if (item.status === 8) {
                  this.showMatrixList[index].wtlist.push(item);
                }
              });
            });
            break;
          case "9":
            matrixList.forEach((val, index) => {
              val.wtlist.forEach((item) => {
                if (item.status === 9) {
                  this.showMatrixList[index].wtlist.push(item);
                }
              });
            });
            break;

          case "sl":
            matrixList.forEach((val, index) => {
              val.wtlist.forEach((item) => {
                if (item.status === 10 || item.status === 11) {
                  this.showMatrixList[index].wtlist.push(item);
                }
              });
            });
            break;
          case "10":
            matrixList.forEach((val, index) => {
              val.wtlist.forEach((item) => {
                if (item.status === 10) {
                  this.showMatrixList[index].wtlist.push(item);
                }
              });
            });
            break;
          case "11":
            matrixList.forEach((val, index) => {
              val.wtlist.forEach((item) => {
                if (item.status === 11) {
                  this.showMatrixList[index].wtlist.push(item);
                }
              });
            });
            break;

          case "lx":
            matrixList.forEach((val, index) => {
              val.wtlist.forEach((item) => {
                if (item.status === 12 || item.status === 13) {
                  this.showMatrixList[index].wtlist.push(item);
                }
              });
            });
            break;
          case "12":
            matrixList.forEach((val, index) => {
              val.wtlist.forEach((item) => {
                if (item.status === 12) {
                  this.showMatrixList[index].wtlist.push(item);
                }
              });
            });
            break;
          case "13":
            matrixList.forEach((val, index) => {
              val.wtlist.forEach((item) => {
                if (item.status === 13) {
                  this.showMatrixList[index].wtlist.push(item);
                }
              });
            });
            break;
          //   case "all":
          //     this.showMatrixList = this.sourceMap.powerVos;
          //     break;
        }
      } else {
        this.showMatrixList = this.sourceMap.powerVos;
      }
    },
    // 点击左侧数据弹出曲线
    handleLeftClick(wt, type, wpid) {
      this.displayMatrix = true;
      this.wtType = type;
      this.$nextTick(() => {
        this.wind = { ...wt, wtType: type, wpid };
        this.flag = true;
      });
      //   this.$refs.windDetail.start(wt);
    },
    // 点击右侧数据弹出曲线
    handleRightClick(type, wtid) {
      let y = this.deepClone(this.ssPv);
      if (type == "-2") {
        y[1].statiomName = "电流";
        y[1].sts = "AI075";
        y[2].statiomName = "电压";
        y[2].sts = "AIG055";
      }
      this.$refs.child.openCurvDatas(y, 2, wtid);
    },
    // 点击统计项弹出曲线
    handleIndicatorClick(czlx, wpid) {
      let y = this.deepClone(this.stse);
      if (czlx == "-2") {
        y[0].statiomName = "光照强度";
        y[0].sts = "SSPJGZD";
      }
      this.$refs.child.openCurvDatas(y, 1, wpid);
    },
  },

  created() {
    let that = this;
    that.$nextTick(() => {
      this.loading = true;
      that.requestData();
      that.timmer = setInterval(() => {
        that.requestData();
      }, 5000);
    });
  },
  mounted() {},
  unmounted() {
    clearInterval(this.timmer);
    this.timmer = null;
  },
};
</script>

<style lang="less" scoped>
@panelHeight: 60px;
@titleHeight: 26px;

.light-matrix {
  // width: calc(100% - 1.111vh);
  height: calc(100vh - 7.222vh);
  display: flex;
  flex-direction: column;

  .panel {
    width: 100%;
    height: 80px;
    border: 1px solid @darkgray;
    position: relative;
    padding: 10px 20px;
    background-color: fade(@darkgray, 20%);

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

    .page-header {
      display: flex;

      .header-info {
        display: flex;
        flex: 1 0 auto;
      }
    }

    .panel-item-gf {
      flex: 0 0 auto;
      margin-right: 16px;
      display: flex;
      height: @panelHeight;

      .panel-item-gf-left {
        width: @panelHeight;
        height: @panelHeight;
        display: flex;
        align-items: center;
        justify-content: center;
        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);
        }
      }

      .panel-item-gf-right {
        color: @write;
        text-align: right;
        margin-left: 24px;

        .panel-item-gf-up {
          color: @gray;
          height: @panelHeight / 2;
          line-height: @panelHeight / 2;
          font-size: 14px;
        }

        .panel-item-gf-down {
          height: @panelHeight / 2;
          line-height: @panelHeight / 2;
          font-weight: 600;
          font-size: 16px;
        }
      }
    }

    .panel-item {
      width: 100%;
      height: @panelHeight;
      font-size: 12px;
      margin-left: 8px;

      .panel-item-left {
        display: flex;

        .panel-item-li {
          height: @panelHeight / 2;
          line-height: @panelHeight / 2;
          flex: 1 0 auto;
          padding: 0 1.111vh;
          align-items: center;
          font-size: 14px;

          .svg-icon {
            margin-left: auto;
          }

          &.value {
            text-align: right;
            flex: 0;
            font-size: 16px;
            color: #fff;
          }
        }
      }

      .panel-item-right {
        display: flex;
        flex-grow: 1;
        height: @panelHeight;

        .panel-item-ri {
          height: @panelHeight / 2;
          line-height: @panelHeight / 2;
          padding: 0 8px;
          flex: 1;

          &:first-child {
            border-right: 1px solid;
          }

          & > span {
            &:first-child {
              float: left;
              display: flex;
              align-items: center;

              i {
                margin-right: 4px;
              }
            }

            &:last-child {
              float: right;
              color: @write;
            }
          }
        }
      }

      &.green {
        background-color: #24a13a;
        color: #ffffff !important;

        .panel-item-left {
          background-color: fade(@green, 15%);
          border-bottom: 1px solid #ffffff;
        }

        .panel-item-right {
          .panel-item-ri {
            &:first-child {
              border-color: #ffffff;
            }
          }
        }
      }

      &.blue {
        background-color: #00a5db;
        color: #ffffff !important;

        .panel-item-left {
          background-color: fade(@darkBlue, 15%);
          border-bottom: 1px solid #ffffff;
        }

        .panel-item-right {
          .panel-item-ri {
            &:first-child {
              border-color: #ffffff;
            }
          }
        }
      }

      &.pink {
        background-color: #b10e7e;
        color: #ffffff !important;

        .panel-item-left {
          background-color: fade(@pink, 15%);
          border-bottom: 1px solid #ffffff;
        }

        .panel-item-right {
          .panel-item-ri {
            &:first-child {
              border-color: #ffffff;
            }
          }
        }
      }

      &.red {
        background-color: #ba3237;
        color: #ffffff !important;

        .panel-item-left {
          background-color: fade(@red, 15%);
          border-bottom: 1px solid #ffffff;
        }

        .panel-item-right {
          .panel-item-ri {
            &:first-child {
              border-color: #ffffff;
            }
          }
        }
      }

      &.orange {
        background-color: #ff7800;
        color: #ffffff !important;

        .panel-item-left {
          border-bottom: 1px solid #ffffff;
        }

        .panel-item-right {
          .panel-item-ri {
            &:first-child {
              border-color: #ffffff;
            }
          }
        }
      }

      &.gray {
        background-color: #929ca3;
        color: #ffffff !important;

        .panel-item-left {
          border-bottom: 1px solid #ffffff;
        }

        .panel-item-right {
          .panel-item-ri {
            &:first-child {
              border-color: #ffffff;
            }
          }
        }
      }

      &.write {
        background-color: #1e1e1e;
        color: @write;

        .panel-item-left {
          cursor: pointer;
          background-color: fade(@write, 15%);
        }

        .panel-item-right {
          cursor: pointer;

          .panel-item-ri {
            &:first-child {
              border-color: @write;
            }
          }
        }
      }
    }
  }

  .curStyle {
    cursor: pointer;
  }
  .matrix-body {
    display: flex;
    flex-direction: column;
    height: 100%;
    margin-left: 20px;
    margin-top: 10px;
    padding-right: 20px;

    .body-title {
      display: flex;
      flex-direction: row;
      align-items: center;
      width: 100%;
      height: 78px;
      border-radius: 10px;
      //   background-color: rgba(0, 0, 0, 0.45);
      background: #fff;

      .base-inf {
        display: flex;
        flex-direction: row;
        align-items: center;
        width: 60%;
        height: 100%;

        .title-name {
          display: flex;
          flex-direction: row;
          align-items: center;
          width: 16%;
          height: 100%;

          .imgs {
            display: flex;
            flex-direction: row;
            align-items: center;
            height: 100%;
            margin-left: 11px;
          }

          .base-num {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            cursor: pointer;

            .nums {
              font-size: 18px;
              font-family: Arial;
              font-weight: 700;
              color: #000;
            }

            .base-name {
              font-size: 14px;
              font-family: Microsoft YaHei;
              font-weight: 700;
              color: #606769;
              margin-bottom: 10px;
            }
          }

          .all_img {
            width: 20px;
            position: relative;
            left: -34px;
            top: 1px;
            margin-right: 10px;
            animation: move 1s infinite linear;
          }

          .qty_img {
            position: relative;
            left: -39px;
            top: 1px;
            animation: move 1s infinite linear;
          }

          @keyframes move {
            0% {
              top: 0px;
            }

            20% {
              top: -1px;
            }

            40% {
              top: -2px;
            }

            80% {
              top: -1px;
            }

            100% {
              top: 0px;
            }
          }
        }

        .matrix-status {
          width: 84%;
          display: flex;
          flex-direction: row;
          align-items: center;
          height: 80%;
          .title-status {
            display: flex;
            flex-direction: column;
            width: 15%;
            height: 100%;
            padding-right: 5px;
            cursor: pointer;

            .status-first {
              width: 100%;
              height: 34%;
              display: flex;
              flex-direction: row;
              align-items: center;
              justify-content: space-between;

              .matrix-status-left {
                margin-left: 6px;
                font-size: 14px;
                font-family: Microsoft YaHei;
                font-weight: bold;
                color: #fff;
              }

              .matrix-status-right {
                margin-right: 6px;
                font-size: 16px;
                font-family: Arial;
                font-weight: bold;
                color: #fff;
              }
            }

            .status-end {
              width: 100%;
              height: 33%;
              display: flex;
              flex-direction: row;
              align-items: center;
              justify-content: space-between;

              .matrix-status-left {
                margin-left: 6px;
                font-size: 12px;
                font-family: Microsoft YaHei;
                font-weight: 400;
                color: #fff;
              }

              .matrix-status-right {
                margin-right: 6px;
                font-size: 14px;
                font-family: Arial;
                font-weight: 400;
                color: #fff;
              }
            }

            .matrix-status-right {
              margin-right: 6px;
            }
            &.green {
              .status-first {
                background-color: rgba(5, 187, 76, 1);
              }

              .status-end {
                background-color: rgba(5, 187, 76, 0.8);
              }
            }

            &.blue {
              .status-first {
                background-color: rgba(0, 70, 199, 1);
              }

              .status-end {
                background-color: rgba(0, 70, 199, 0.8);
              }
            }

            &.pink {
              .status-first {
                background-color: rgba(197, 48, 200, 1);
              }

              .status-end {
                background-color: rgba(197, 48, 200, 0.8);
              }
            }

            &.red {
              .status-first {
                background-color: rgba(186, 50, 55, 1);
              }

              .status-end {
                background-color: rgba(186, 50, 55, 0.8);
              }
            }

            &.orange {
              .status-first {
                background-color: rgba(225, 125, 36, 1);
              }

              .status-end {
                background-color: rgba(225, 125, 36, 0.8);
              }
            }

            &.gray {
              .status-first {
                background-color: rgba(96, 103, 105, 1);
              }

              .status-end {
                background-color: rgba(96, 103, 105, 0.8);
              }
            }

            &.write {
              .status-first {
                background-color: fade(#0d1e1c, 100%);
              }

              .status-end {
                background-color: fade(#0d1e1c, 80%);
              }
            }
          }
        }
      }

      .unpaid {
        display: flex;
        flex-direction: row;
        align-items: center;
        width: 40%;
        height: 100%;

        .unpaid-item {
          width: 20%;
          height: 80%;
          margin-right: 5px;
          padding: 0 10px;

          .unpaid-img {
            width: 115px;
            height: 39px;
          }

          .unpaid-value {
            width: 90%;
            display: flex;
            flex-direction: row-reverse;
            font-size: 18px;
            font-family: Arial;
            font-weight: 700;
            color: #ff9f1f;
            margin-top: -20px;
          }

          .unpaid-name {
            width: 90%;
            display: flex;
            flex-direction: row-reverse;
            font-size: 14px;
            font-family: Microsoft YaHei;
            font-weight: 700;
            color: #606769;
          }
        }

        .unpaid-item1 {
          width: 20%;
          height: 80%;
          margin-right: 5px;

          .percent {
            width: 100%;
            height: 34%;
            display: flex;
            align-items: center;
            justify-content: center;
            // border-top: 1px solid #0a214c;
            // border-left: 1px solid #0a214c;
            // border-right: 1px solid #0a214c;
            background-color: rgba(0, 70, 199, 0.8);
            font-size: 14px;
            font-family: Arial;
            font-weight: 400;
            color: #ffffff;
          }

          .nums {
            width: 100%;
            height: 33%;
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: center;
            // border-left: 1px solid #0a214c;
            // border-right: 1px solid #0a214c;
            // border-bottom: 1px solid #0a214c;
            background-color: rgba(0, 70, 199, 0.6);
            font-size: 16px;
            font-family: Arial;
            font-weight: 400;
            color: #ffffff;
            padding: 0 8px;
          }

          .progress-item {
            width: 20%;
            height: 3px;
            background-color: #05bb4c;
            margin-right: 2px;
          }
        }
      }
    }
    .matrix-box {
      background: #fff;
    }
    .matrixs {
      width: 100%;
      margin-top: 7px;

      .matrix-title {
        display: flex;
        flex-direction: row;
        align-items: center;
        width: 100%;
        height: 32px;
        background-color: #001844;
        font-size: 12px;
        font-family: SourceHanSansCN;
        font-weight: 400;
        color: #05bb4c;
        padding: 0 21px;

        &.active {
          color: #fc8004;
        }

        .station-name {
          margin-left: 5px;
          margin-right: 18px;
        }

        .indicator {
          display: flex;
          flex-direction: row;
          align-items: center;
          width: 93%;
          height: 100%;
          white-space: nowrap;
        }

        .sub-title-item {
          display: flex;
          flex-direction: row;
          align-items: center;
          white-space: nowrap;
          // justify-content: space-between;
          width: 7%;
          height: 100%;
          margin-right: 20px;
          font-size: 12px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          color: #b3b3b3;

          &.active {
            cursor: pointer;
          }

          &.active1 {
            width: 5%;
          }

          .sub-value {
            font-size: 14px;
            font-family: Arial;
            font-weight: 400;
            margin-left: 5px;
          }
        }
      }

      .matrix-list {
        display: grid;
        justify-content: space-between;
        grid-template-columns: repeat(auto-fill, 114px);
        width: 100%;
        margin-top: 5px;

        .matrix-card {
          display: flex;
          flex-direction: column;
          width: 114px;
          height: 59px;
          margin-right: 2px;
          margin-bottom: 2px;
          background-color: rgba(0, 0, 0, 0.5);

          .info {
            display: flex;
            flex-direction: row;
            align-items: center;
            width: 100%;
            height: 50px;

            .card-left {
              width: 45px;
              height: 100%;
              display: flex;
              flex-direction: column;
              align-items: center;

              .card-name {
                font-size: 13px;
                font-family: Arial;
                font-weight: 400;
                margin-top: 5px;
                margin-bottom: 5px;
              }
            }

            .card-right {
              display: flex;
              flex-direction: column;
              padding: 0px 4px;
              position: relative;

              .right-item {
                display: flex;
                flex-direction: row;
                align-items: center;
                height: 15px;

                .right-value {
                  font-size: 12px;
                  font-family: Arial;
                  font-weight: 400;
                  margin-left: 3px;
                }
              }

              .card-hover {
                position: absolute;
                // width: 100px;
                // height: 50px;
                background-color: rgba(0, 0, 0, 1);
                left: -30px;
                top: -50px;
                display: none;
              }
            }

            .card-right:hover {
              .card-hover {
                display: block;
              }
            }
          }

          .matrix-progress {
            display: flex;
            flex-direction: row;
            align-items: center;
            width: 100%;
            padding: 0 4px;
            height: 8px;

            .progress-block {
              //   width: 19px;
              height: 3px;
              background-color: #05bb4c;
              //   margin-right: 2px;
            }
          }

          &.green {
            border: 1px solid #05bb4c;
            color: #05bb4c;

            .info {
              border-bottom: 1px solid #05bb4c;
              background-color: rgba(5, 187, 76, 0.15);

              .dashed {
                width: 1px;
                height: 100%;
                background-image: linear-gradient(
                  #05bb4c 0%,
                  #05bb4c 40%,
                  transparent 50%
                );
                background-size: 1px 9px;
              }
            }
          }

          &.blue {
            border: 1px solid #074ead;
            color: #1c99ff;

            .info {
              border-bottom: 1px solid #074ead;
              background-color: rgba(0, 70, 199, 0.25);

              .dashed {
                width: 1px;
                height: 100%;
                background-image: linear-gradient(
                  #074ead 0%,
                  #074ead 40%,
                  transparent 50%
                );
                background-size: 1px 9px;
              }
            }
          }

          &.pink {
            border: 1px solid #c530c8;
            color: #c530c8;

            .info {
              border-bottom: 1px solid #c530c8;
              background-color: rgba(197, 48, 200, 0.15);

              .dashed {
                width: 1px;
                height: 100%;
                background-image: linear-gradient(
                  #c530c8 0%,
                  #c530c8 40%,
                  transparent 50%
                );
                background-size: 1px 9px;
              }
            }
          }

          &.red {
            border: 1px solid #ba3237;
            color: #ffffff;

            .info {
              border-bottom: 1px solid #ba3237;
              background-color: rgba(186, 50, 55, 1);

              .dashed {
                width: 1px;
                height: 100%;
                background-image: linear-gradient(
                  #e17d24 0%,
                  #e17d24 40%,
                  transparent 50%
                );
                background-size: 1px 9px;
              }
            }
          }

          &.orange {
            border: 1px solid #e17d24;
            color: #e17d24;

            .info {
              border-bottom: 1px solid #e17d24;
              background-color: rgba(225, 125, 36, 0.15);

              .dashed {
                width: 1px;
                height: 100%;
                background-image: linear-gradient(
                  #e17d24 0%,
                  #e17d24 40%,
                  transparent 50%
                );
                background-size: 1px 9px;
              }
            }
          }

          &.write {
            border: 1px solid #51555a;
            color: #ffffff;

            .info {
              border-bottom: 1px solid #51555a;
              background-color: rgba(81, 85, 90, 1);

              .dashed {
                width: 1px;
                height: 100%;
                background-image: linear-gradient(
                  #262626 0%,
                  #262626 40%,
                  transparent 50%
                );
                background-size: 1px 9px;
              }
            }
          }

          &.gray {
            border: 1px solid #606769;
            color: #a7a7a7;

            .info {
              border-bottom: 1px solid #606769;
              background-color: rgba(96, 103, 105, 0.2);

              .dashed {
                width: 1px;
                height: 100%;
                background-image: linear-gradient(
                  #262626 0%,
                  #262626 40%,
                  transparent 50%
                );
                background-size: 1px 9px;
              }
            }
          }
        }
      }
    }

    .active_vie {
      width: 100%;
      margin-top: 0;
      margin-bottom: 5px;

      .matrix-list {
        display: grid;
        justify-content: space-between;
        grid-template-columns: repeat(auto-fill, 114px);
        width: 100%;
        margin-top: 0;
      }
    }
  }
}

// --------------------------------------------------------------------------------------------
.dark-matrix {
  // width: calc(100% - 1.111vh);
  height: calc(100vh - 7.222vh);
  display: flex;
  flex-direction: column;

  .matrix-body {
    display: flex;
    flex-direction: column;
    height: 100%;
    margin-left: 20px;
    margin-top: 10px;
    padding-right: 20px;

    .body-title {
      display: flex;
      flex-direction: row;
      align-items: center;
      width: 100%;
      height: 78px;
      background-color: rgba(0, 0, 0, 0.45);
      border-radius: 10px;
      .base-inf {
        display: flex;
        flex-direction: row;
        align-items: center;
        width: 60%;
        height: 100%;

        .title-name {
          display: flex;
          flex-direction: row;
          align-items: center;
          width: 18%;
          height: 100%;

          .imgs {
            display: flex;
            flex-direction: row;
            align-items: center;
            height: 100%;
            margin-left: 11px;
          }

          .base-num {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            cursor: pointer;

            .nums {
              font-size: 18px;
              font-family: Arial;
              font-weight: 400;
              color: #ffffff;
            }

            .base-name {
              font-size: 14px;
              font-family: Microsoft YaHei;
              font-weight: 400;
              color: #b3b3b3;
              margin-bottom: 10px;
            }
          }

          .all_img {
            width: 20px;
            position: relative;
            left: -34px;
            top: 1px;
            margin-right: 10px;
            animation: move 1s infinite linear;
          }

          .qty_img {
            position: relative;
            left: -39px;
            top: 1px;
            animation: move 1s infinite linear;
          }

          @keyframes move {
            0% {
              top: 0px;
            }

            20% {
              top: -1px;
            }

            40% {
              top: -2px;
            }

            80% {
              top: -1px;
            }

            100% {
              top: 0px;
            }
          }
        }

        .matrix-status {
          width: 84%;
          display: flex;
          flex-direction: row;
          align-items: center;
          height: 80%;
        }

        .title-status {
          display: flex;
          flex-direction: column;
          width: 15%;
          height: 100%;
          padding-right: 5px;
          cursor: pointer;
          .status-first {
            width: 100%;
            height: 34%;
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: space-between;
            background-color: rgba(5, 187, 76, 0.28);
            border-top: 1px solid #0b3d26;
            border-left: 1px solid #0b3d26;
            border-right: 1px solid #0b3d26;

            .matrix-status-left {
              margin-left: 6px;
              font-size: 14px;
              font-family: Microsoft YaHei;
              font-weight: 400;
              color: #05bb4c;
            }

            .matrix-status-right {
              margin-right: 6px;
              font-size: 16px;
              font-family: Arial;
              font-weight: 400;
              color: #05bb4c;
            }
          }

          .status-end {
            width: 100%;
            height: 33%;
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: space-between;
            background-color: rgba(5, 187, 76, 0.16);
            border-left: 1px solid #0b3d26;
            border-right: 1px solid #0b3d26;
            border-bottom: 1px solid #0b3d26;

            .matrix-status-left {
              margin-left: 6px;
              font-size: 12px;
              font-family: Microsoft YaHei;
              font-weight: 400;
              color: #05bb4c;
            }

            .matrix-status-right {
              margin-right: 6px;
              font-size: 14px;
              font-family: Arial;
              font-weight: 400;
              color: #05bb4c;
            }
          }

          .matrix-status-right {
            margin-right: 6px;
          }
          &.green {
            .status-first {
              width: 100%;
              height: 34%;
              display: flex;
              flex-direction: row;
              align-items: center;
              justify-content: space-between;
              background-color: rgba(5, 187, 76, 0.28);
              border-top: 1px solid #0b3d26;
              border-left: 1px solid #0b3d26;
              border-right: 1px solid #0b3d26;

              .matrix-status-left {
                margin-left: 6px;
                font-size: 14px;
                font-family: Microsoft YaHei;
                font-weight: 400;
                color: #05bb4c;
              }

              .matrix-status-right {
                margin-right: 6px;
                font-size: 16px;
                font-family: Arial;
                font-weight: 400;
                color: #05bb4c;
              }
            }

            .status-end {
              width: 100%;
              height: 33%;
              display: flex;
              flex-direction: row;
              align-items: center;
              justify-content: space-between;
              background-color: rgba(5, 187, 76, 0.16);
              border-left: 1px solid #0b3d26;
              border-right: 1px solid #0b3d26;
              border-bottom: 1px solid #0b3d26;

              .matrix-status-left {
                margin-left: 6px;
                font-size: 12px;
                font-family: Microsoft YaHei;
                font-weight: 400;
                color: #05bb4c;
              }

              .matrix-status-right {
                margin-right: 6px;
                font-size: 14px;
                font-family: Arial;
                font-weight: 400;
                color: #05bb4c;
              }
            }

            .matrix-status-right {
              margin-right: 6px;
            }
          }

          &.blue {
            .status-first {
              width: 100%;
              height: 34%;
              display: flex;
              flex-direction: row;
              align-items: center;
              justify-content: space-between;
              background-color: rgba(0, 70, 199, 0.48);
              border-top: 1px solid #1e2341;
              border-left: 1px solid #1e2341;
              border-right: 1px solid #1e2341;

              .matrix-status-left {
                margin-left: 6px;
                font-size: 14px;
                font-family: Microsoft YaHei;
                font-weight: 400;
                color: #1c99ff;
              }

              .matrix-status-right {
                margin-right: 6px;
                font-size: 16px;
                font-family: Arial;
                font-weight: 400;
                color: #1c99ff;
              }
            }

            .status-end {
              width: 100%;
              height: 33%;
              display: flex;
              flex-direction: row;
              align-items: center;
              justify-content: space-between;
              background-color: rgba(0, 70, 199, 0.16);
              border-left: 1px solid #1e2341;
              border-right: 1px solid #1e2341;
              border-bottom: 1px solid #1e2341;

              .matrix-status-left {
                margin-left: 6px;
                font-size: 12px;
                font-family: Microsoft YaHei;
                font-weight: 400;
                color: #1c99ff;
              }

              .matrix-status-right {
                margin-right: 6px;
                font-size: 14px;
                font-family: Arial;
                font-weight: 400;
                color: #1c99ff;
              }
            }

            .matrix-status-right {
              margin-right: 6px;
            }
          }

          &.pink {
            .status-first {
              width: 100%;
              height: 34%;
              display: flex;
              flex-direction: row;
              align-items: center;
              justify-content: space-between;
              background-color: rgba(197, 48, 200, 0.28);
              border-top: 1px solid #3e1a48;
              border-left: 1px solid #3e1a48;
              border-right: 1px solid #3e1a48;

              .matrix-status-left {
                margin-left: 6px;
                font-size: 14px;
                font-family: Microsoft YaHei;
                font-weight: 400;
                color: #c530c8;
              }

              .matrix-status-right {
                margin-right: 6px;
                font-size: 16px;
                font-family: Arial;
                font-weight: 400;
                color: #c530c8;
              }
            }

            .status-end {
              width: 100%;
              height: 33%;
              display: flex;
              flex-direction: row;
              align-items: center;
              justify-content: space-between;
              background-color: rgba(197, 48, 200, 0.16);
              border-left: 1px solid #3e1a48;
              border-right: 1px solid #3e1a48;
              border-bottom: 1px solid #3e1a48;

              .matrix-status-left {
                margin-left: 6px;
                font-size: 12px;
                font-family: Microsoft YaHei;
                font-weight: 400;
                color: #c530c8;
              }

              .matrix-status-right {
                margin-right: 6px;
                font-size: 14px;
                font-family: Arial;
                font-weight: 400;
                color: #c530c8;
              }
            }

            .matrix-status-right {
              margin-right: 6px;
            }
          }

          &.red {
            .status-first {
              width: 100%;
              height: 34%;
              display: flex;
              flex-direction: row;
              align-items: center;
              justify-content: space-between;
              background-color: rgba(186, 50, 55, 0.28);
              border-top: 1px solid #3c1c1f;
              border-left: 1px solid #3c1c1f;
              border-right: 1px solid #3c1c1f;

              .matrix-status-left {
                margin-left: 6px;
                font-size: 14px;
                font-family: Microsoft YaHei;
                font-weight: 400;
                color: #ba3237;
              }

              .matrix-status-right {
                margin-right: 6px;
                font-size: 16px;
                font-family: Arial;
                font-weight: 400;
                color: #ba3237;
              }
            }

            .status-end {
              width: 100%;
              height: 33%;
              display: flex;
              flex-direction: row;
              align-items: center;
              justify-content: space-between;
              background-color: rgba(186, 50, 55, 0.16);
              border-left: 1px solid #3c1c1f;
              border-right: 1px solid #3c1c1f;
              border-bottom: 1px solid #3c1c1f;

              .matrix-status-left {
                margin-left: 6px;
                font-size: 12px;
                font-family: Microsoft YaHei;
                font-weight: 400;
                color: #ba3237;
              }

              .matrix-status-right {
                margin-right: 6px;
                font-size: 14px;
                font-family: Arial;
                font-weight: 400;
                color: #ba3237;
              }
            }

            .matrix-status-right {
              margin-right: 6px;
            }
          }

          &.orange {
            .status-first {
              width: 100%;
              height: 34%;
              display: flex;
              flex-direction: row;
              align-items: center;
              justify-content: space-between;
              background-color: rgba(225, 125, 36, 0.28);
              border-top: 1px solid #46301a;
              border-left: 1px solid #46301a;
              border-right: 1px solid #46301a;

              .matrix-status-left {
                margin-left: 6px;
                font-size: 14px;
                font-family: Microsoft YaHei;
                font-weight: 400;
                color: #e17d24;
              }

              .matrix-status-right {
                margin-right: 6px;
                font-size: 16px;
                font-family: Arial;
                font-weight: 400;
                color: #e17d24;
              }
            }

            .status-end {
              width: 100%;
              height: 33%;
              display: flex;
              flex-direction: row;
              align-items: center;
              justify-content: space-between;
              background-color: rgba(225, 125, 36, 0.16);
              border-left: 1px solid #46301a;
              border-right: 1px solid #46301a;
              border-bottom: 1px solid #46301a;

              .matrix-status-left {
                margin-left: 6px;
                font-size: 12px;
                font-family: Microsoft YaHei;
                font-weight: 400;
                color: #e17d24;
              }

              .matrix-status-right {
                margin-right: 6px;
                font-size: 14px;
                font-family: Arial;
                font-weight: 400;
                color: #e17d24;
              }
            }

            .matrix-status-right {
              margin-right: 6px;
            }
          }

          &.gray {
            .status-first {
              width: 100%;
              height: 34%;
              display: flex;
              flex-direction: row;
              align-items: center;
              justify-content: space-between;
              background-color: rgba(96, 103, 105, 0.28);
              border-top: 1px solid #262b32;
              border-left: 1px solid #262b32;
              border-right: 1px solid #262b32;

              .matrix-status-left {
                margin-left: 6px;
                font-size: 14px;
                font-family: Microsoft YaHei;
                font-weight: 400;
                color: #606769;
              }

              .matrix-status-right {
                margin-right: 6px;
                font-size: 16px;
                font-family: Arial;
                font-weight: 400;
                color: #606769;
              }
            }

            .status-end {
              width: 100%;
              height: 33%;
              display: flex;
              flex-direction: row;
              align-items: center;
              justify-content: space-between;
              background-color: rgba(96, 103, 105, 0.16);
              border-left: 1px solid #262b32;
              border-right: 1px solid #262b32;
              border-bottom: 1px solid #262b32;

              .matrix-status-left {
                margin-left: 6px;
                font-size: 12px;
                font-family: Microsoft YaHei;
                font-weight: 400;
                color: #606769;
              }

              .matrix-status-right {
                margin-right: 6px;
                font-size: 14px;
                font-family: Arial;
                font-weight: 400;
                color: #606769;
              }
            }

            .matrix-status-right {
              margin-right: 6px;
            }
          }

          &.write {
            .status-first {
              width: 100%;
              height: 34%;
              display: flex;
              flex-direction: row;
              align-items: center;
              justify-content: space-between;
              background-color: rgba(255, 255, 255, 0.28);
              border-top: 1px solid #3f4349;
              border-left: 1px solid #3f4349;
              border-right: 1px solid #3f4349;

              .matrix-status-left {
                margin-left: 6px;
                font-size: 14px;
                font-family: Microsoft YaHei;
                font-weight: 400;
                color: #ffffff;
              }

              .matrix-status-right {
                margin-right: 6px;
                font-size: 16px;
                font-family: Arial;
                font-weight: 400;
                color: #ffffff;
              }
            }

            .status-end {
              width: 100%;
              height: 33%;
              display: flex;
              flex-direction: row;
              align-items: center;
              justify-content: space-between;
              background-color: rgba(255, 255, 255, 0.16);
              border-left: 1px solid #3f4349;
              border-right: 1px solid #3f4349;
              border-bottom: 1px solid #3f4349;

              .matrix-status-left {
                margin-left: 6px;
                font-size: 12px;
                font-family: Microsoft YaHei;
                font-weight: 400;
                color: #ffffff;
              }

              .matrix-status-right {
                margin-right: 6px;
                font-size: 14px;
                font-family: Arial;
                font-weight: 400;
                color: #ffffff;
              }
            }

            .matrix-status-right {
              margin-right: 6px;
            }
          }
        }
      }

      .unpaid {
        display: flex;
        flex-direction: row;
        align-items: center;
        width: 40%;
        height: 100%;

        .unpaid-item {
          width: 20%;
          height: 80%;
          margin-right: 5px;
          padding: 0 10px;

          .unpaid-img {
            width: 115px;
            height: 39px;
          }

          .unpaid-value {
            width: 90%;
            display: flex;
            flex-direction: row-reverse;
            font-size: 18px;
            font-family: Arial;
            font-weight: 400;
            color: #ff9f1f;
            margin-top: -20px;
          }

          .unpaid-name {
            width: 90%;
            font-size: 14px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: #b3b3b3;
            transform: translate(50%, -100%);
          }
        }

        .unpaid-item1 {
          width: 20%;
          height: 80%;
          margin-right: 5px;
          &.upGreen {
            .percent {
              background-color: rgba(87, 207, 58, 0.8);
              border-top: 1px solid rgba(87, 207, 58, 0.35);
              border-left: 1px solid rgba(87, 207, 58, 0.35);
              border-right: 1px solid rgba(87, 207, 58, 0.35);
            }
            .nums {
              background-color: rgba(87, 207, 58, 0.35);
              border-left: 1px solid rgba(87, 207, 58, 0.35);
              border-right: 1px solid rgba(87, 207, 58, 0.35);
              border-bottom: 1px solid rgba(87, 207, 58, 0.35);
            }
          }
          &.upSkyBlue {
            .percent {
              background-color: rgba(14, 199, 220, 0.8);
              border-top: 1px solid rgba(14, 199, 220, 0.35);
              border-left: 1px solid rgba(14, 199, 220, 0.35);
              border-right: 1px solid rgba(14, 199, 220, 0.35);
            }
            .nums {
              background-color: rgba(14, 199, 220, 0.35);
              border-left: 1px solid rgba(14, 199, 220, 0.35);
              border-right: 1px solid rgba(14, 199, 220, 0.35);
              border-bottom: 1px solid rgba(14, 199, 220, 0.35);
            }
          }
          &.upBlue {
            .percent {
              background-color: rgba(25, 116, 255, 0.8);
              border-top: 1px solid rgba(25, 116, 255, 0.35);
              border-left: 1px solid rgba(25, 116, 255, 0.35);
              border-right: 1px solid rgba(25, 116, 255, 0.35);
            }
            .nums {
              background-color: rgba(25, 116, 255, 0.35);
              border-left: 1px solid rgba(25, 116, 255, 0.35);
              border-right: 1px solid rgba(25, 116, 255, 0.35);
              border-bottom: 1px solid rgba(25, 116, 255, 0.35);
            }
          }
          &.upPurple {
            .percent {
              background-color: rgba(205, 76, 221, 0.8);
              border-top: 1px solid rgba(205, 76, 221, 0.35);
              border-left: 1px solid rgba(205, 76, 221, 0.35);
              border-right: 1px solid rgba(205, 76, 221, 0.35);
            }
            .nums {
              background-color: rgba(205, 76, 221, 0.35);
              border-left: 1px solid rgba(205, 76, 221, 0.35);
              border-right: 1px solid rgba(205, 76, 221, 0.35);
              border-bottom: 1px solid rgba(205, 76, 221, 0.35);
            }
          }
          &.upPink {
            .percent {
              background-color: rgba(255, 60, 128, 0.8);
              border-top: 1px solid rgba(255, 60, 128, 0.35);
              border-left: 1px solid rgba(255, 60, 128, 0.35);
              border-right: 1px solid rgba(255, 60, 128, 0.35);
            }
            .nums {
              background-color: rgba(255, 60, 128, 0.35);
              border-left: 1px solid rgba(255, 60, 128, 0.35);
              border-right: 1px solid rgba(255, 60, 128, 0.35);
              border-bottom: 1px solid rgba(255, 60, 128, 0.35);
            }
          }
          .percent {
            width: 100%;
            height: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 14px;
            font-family: Arial;
            font-weight: 400;
            color: #ffffff;
          }

          .nums {
            width: 100%;
            height: 50%;
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: center;
            font-size: 16px;
            font-family: Arial;
            font-weight: 400;
            color: #ffffff;
            padding: 0 8px;
          }
        }
      }
    }

    .matrix-box {
      background-color: rgba(0, 0, 0, 0.45);
    }
    .matrixs {
      width: 100%;
      margin-top: 7px;

      .matrix-title {
        display: flex;
        flex-direction: row;
        align-items: center;
        width: 100%;
        height: 32px;
        background-color: rgba(96, 103, 105, 0.4);
        font-size: 12px;
        font-family: SourceHanSansCN;
        font-weight: 400;
        color: #05bb4c;
        padding: 0 12px;
        .matrix-svg {
          flex: 0 0 auto;
          margin-right: 10px;
          display: flex;
          align-items: center;
        }
        &.active {
          color: #fc8004;
        }

        .station-name {
          margin-left: 5px;
          margin-right: 18px;
        }

        .indicator {
          display: flex;
          flex-direction: row;
          align-items: center;
          width: 93%;
          height: 100%;
          white-space: nowrap;
        }

        .sub-title-item {
          display: flex;
          flex-direction: row;
          align-items: center;
          //   width: 7%;
          width: 8%;
          height: 100%;
          margin-right: 20px;
          font-size: 12px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          color: #b3b3b3;

          &.active {
            cursor: pointer;
          }

          &.active1 {
            // width: 5%;
            width: 6%;
          }

          .sub-value {
            font-size: 14px;
            font-family: Arial;
            font-weight: 400;
            margin-left: 5px;
          }
        }
      }

      .matrix-list {
        display: grid;
        justify-content: space-between;
        grid-template-columns: repeat(auto-fill, 114px);
        width: 100%;
        margin-top: 5px;

        .matrix-card {
          display: flex;
          flex-direction: column;
          width: 114px;
          height: 59px;
          margin-right: 2px;
          margin-bottom: 2px;
          background-color: rgba(0, 0, 0, 0.5);

          .info {
            display: flex;
            flex-direction: row;
            align-items: center;
            width: 100%;
            height: 50px;

            .card-left {
              width: 45px;
              height: 100%;
              display: flex;
              flex-direction: column;
              align-items: center;

              .card-name {
                font-size: 13px;
                font-family: Arial;
                font-weight: 400;
                margin-top: 5px;
                margin-bottom: 5px;
              }
            }

            .card-right {
              display: flex;
              flex-direction: column;
              padding: 0px 4px;
              position: relative;

              .right-item {
                display: flex;
                flex-direction: row;
                align-items: center;
                height: 15px;

                .right-value {
                  font-size: 12px;
                  font-family: Arial;
                  font-weight: 400;
                  margin-left: 3px;
                }
              }

              .card-hover {
                position: absolute;
                // width: 100px;
                // height: 50px;
                background-color: rgba(0, 0, 0, 1);
                left: -30px;
                top: -50px;
                display: none;
              }
            }

            .card-right:hover {
              .card-hover {
                display: block;
              }
            }
          }

          .matrix-progress {
            display: flex;
            flex-direction: row;
            align-items: center;
            width: 100%;
            padding: 0 4px;
            height: 8px;

            .progress-block {
              //   width: 19px;
              height: 3px;
              background-color: #05bb4c;
              //   margin-right: 2px;
              &.upGreen {
                background-color: rgba(87, 207, 58, 1);
              }
              &.upSkyBlue {
                background-color: rgba(14, 199, 220, 1);
              }
              &.upBlue {
                background-color: rgba(25, 116, 255, 1);
              }
              &.upPurple {
                background-color: rgba(205, 76, 221, 1);
              }
              &.upPink {
                background-color: rgba(255, 60, 128, 1);
              }
            }
          }

          &.green {
            border: 1px solid #05bb4c;
            color: #05bb4c;

            .info {
              border-bottom: 1px solid #05bb4c;
              background-color: rgba(5, 187, 76, 0.15);

              .dashed {
                width: 1px;
                height: 100%;
                background-image: linear-gradient(
                  #05bb4c 0%,
                  #05bb4c 40%,
                  transparent 50%
                );
                background-size: 1px 9px;
              }
            }
          }

          &.blue {
            border: 1px solid #074ead;
            color: #1c99ff;

            .info {
              border-bottom: 1px solid #074ead;
              background-color: rgba(0, 70, 199, 0.25);

              .dashed {
                width: 1px;
                height: 100%;
                background-image: linear-gradient(
                  #074ead 0%,
                  #074ead 40%,
                  transparent 50%
                );
                background-size: 1px 9px;
              }
            }
          }

          &.pink {
            border: 1px solid #c530c8;
            color: #c530c8;

            .info {
              border-bottom: 1px solid #c530c8;
              background-color: rgba(197, 48, 200, 0.15);

              .dashed {
                width: 1px;
                height: 100%;
                background-image: linear-gradient(
                  #c530c8 0%,
                  #c530c8 40%,
                  transparent 50%
                );
                background-size: 1px 9px;
              }
            }
          }

          &.red {
            border: 1px solid #ba3237;
            color: #ffffff;

            .info {
              border-bottom: 1px solid #ba3237;
              background-color: rgba(186, 50, 55, 1);

              .dashed {
                width: 1px;
                height: 100%;
                background-image: linear-gradient(
                  #e17d24 0%,
                  #e17d24 40%,
                  transparent 50%
                );
                background-size: 1px 9px;
              }
            }
          }

          &.orange {
            border: 1px solid #e17d24;
            color: #e17d24;

            .info {
              border-bottom: 1px solid #e17d24;
              background-color: rgba(225, 125, 36, 0.15);

              .dashed {
                width: 1px;
                height: 100%;
                background-image: linear-gradient(
                  #e17d24 0%,
                  #e17d24 40%,
                  transparent 50%
                );
                background-size: 1px 9px;
              }
            }
          }

          &.write {
            border: 1px solid #51555a;
            color: #ffffff;

            .info {
              border-bottom: 1px solid #51555a;
              background-color: rgba(81, 85, 90, 1);

              .dashed {
                width: 1px;
                height: 100%;
                background-image: linear-gradient(
                  #262626 0%,
                  #262626 40%,
                  transparent 50%
                );
                background-size: 1px 9px;
              }
            }
          }

          &.gray {
            border: 1px solid #606769;
            color: #a7a7a7;

            .info {
              border-bottom: 1px solid #606769;
              background-color: rgba(96, 103, 105, 0.2);

              .dashed {
                width: 1px;
                height: 100%;
                background-image: linear-gradient(
                  #262626 0%,
                  #262626 40%,
                  transparent 50%
                );
                background-size: 1px 9px;
              }
            }
          }
        }
      }
    }

    .active_vie {
      width: 100%;
      margin-top: 0;
      margin-bottom: 5px;
      .matrix-list {
        display: grid;
        justify-content: space-between;
        grid-template-columns: repeat(auto-fill, 114px);
        width: 100%;
        margin-top: 0;
      }
    }
  }
}
.clearfix::after {
  content: "";
  clear: both;
  height: 0;
  line-height: 0;
  visibility: hidden;
  display: block;
}

.clearfix {
  zoom: 1;
}
</style>