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

<template>
  <headerNav @typeFlag="typeFlag" :isAll="true" />
  <div
    :class="$store.state.themeName === 'dark' ? 'dark-matrix' : 'light-matrix'"
  >
    <el-header>
      <el-row>
        <el-col :span="12" v-if="activeTab == 'fc'">
          <div class="fd-header1">
            <el-col class="fd-img">
              <div class="imgs">
                <img src="@assets/imgs/downF.png" />
                <img
                  width="30"
                  height="26"
                  src="@assets/imgs/windup.png"
                  class="qty_imgs"
                />
              </div>
              <div class="titles" @click="changeShow('all')">
                <div>接入风机</div>
                <p style="text-align: center; cursor: pointer">
                  {{ sourceMap.jrts || "0" }}
                </p>
              </div>
            </el-col>
            <el-col @click="changeShow(0)" style="cursor: pointer">
              <div class="active-b" :class="{ active_bor: fillFjzt == 0 }">
                <p class="left_p"></p>
                <p class="right_p"></p>
                <div class="yuan">
                  <p><span class="circle"></span></p>
                  <p>待机</p>
                </div>
                <div>
                  {{ sourceMap.djts || "0" }}
                </div>
              </div>
            </el-col>
            <el-col @click="changeShow(1)" style="cursor: pointer">
              <div class="active-b" :class="{ active_bor: fillFjzt == 1 }">
                <p class="left_p"></p>
                <p class="right_p"></p>
                <div class="yuan">
                  <p><span class="circle"></span></p>
                  <p>并网</p>
                </div>
                <div>
                  {{ sourceMap.bwts || "0" }}
                </div>
              </div>
            </el-col>
            <el-col @click="changeShow(2)" style="cursor: pointer">
              <div class="active-b" :class="{ active_bor: fillFjzt == 2 }">
                <p class="left_p"></p>
                <p class="right_p"></p>
                <div class="yuan">
                  <p><span class="circle"></span></p>
                  <p>故障</p>
                </div>
                <div>
                  {{ sourceMap.gzts || "0" }}
                </div>
              </div>
            </el-col>
            <el-col @click="changeShow(3)" style="cursor: pointer">
              <div class="active-b" :class="{ active_bor: fillFjzt == 3 }">
                <p class="left_p"></p>
                <p class="right_p"></p>
                <div class="yuan">
                  <p><span class="circle"></span></p>
                  <p>检修</p>
                </div>
                <div>
                  {{ sourceMap.jxts || "0" }}
                </div>
              </div>
            </el-col>
            <el-col @click="changeShow(4)" style="cursor: pointer">
              <div class="active-b" :class="{ active_bor: fillFjzt == 4 }">
                <p class="left_p"></p>
                <p class="right_p"></p>
                <div class="yuan">
                  <p><span class="circle"></span></p>
                  <p>限电</p>
                </div>
                <div>
                  {{ sourceMap.xdts || "0" }}
                </div>
              </div>
            </el-col>
            <el-col @click="changeShow(5)" style="cursor: pointer">
              <div class="active-b" :class="{ active_bor: fillFjzt == 5 }">
                <p class="left_p"></p>
                <p class="right_p"></p>
                <div class="yuan">
                  <p><span class="circle"></span></p>
                  <p>受累</p>
                </div>
                <div>
                  {{ sourceMap.slts || "0" }}
                </div>
              </div>
            </el-col>
            <el-col @click="changeShow(6)" style="cursor: pointer">
              <div class="active-b" :class="{ active_bor: fillFjzt == 6 }">
                <p class="left_p"></p>
                <p class="right_p"></p>
                <div class="yuan">
                  <p><span class="circle"></span></p>
                  <p>离线</p>
                </div>
                <div>
                  {{ sourceMap.lxts || "0" }}
                </div>
              </div>
            </el-col>
          </div>
        </el-col>
        <el-col :span="12" v-if="activeTab == 'gf'">
          <div class="fd-header2">
            <el-col class="gf-img">
              <div class="imgs">
                <img src="@assets/imgs/downg.png" />
                <img src="@assets/imgs/ptyup.png" class="qty_img" />
              </div>
              <div class="titles">
                <div>接入光伏</div>
                <p
                  style="text-align: center; cursor: pointer"
                  @click="changeShow('all')"
                >
                  {{ sourceMap.gfjrts || "0" }}
                </p>
              </div>
            </el-col>
            <el-col @click="changeShow(0)" style="cursor: pointer">
              <div class="active-b" :class="{ active_bor: fillFjzt == 0 }">
                <p class="left_p"></p>
                <p class="right_p"></p>
                <div class="yuan">
                  <p><span class="circle"></span></p>
                  <p>待机</p>
                </div>

                <div>
                  {{ sourceMap.gfdjts || "0" }}
                </div>
              </div>
            </el-col>
            <el-col @click="changeShow(1)" style="cursor: pointer">
              <div class="active-b" :class="{ active_bor: fillFjzt == 1 }">
                <p class="left_p"></p>
                <p class="right_p"></p>
                <div class="yuan">
                  <p><span class="circle"></span></p>
                  <p>并网</p>
                </div>
                <div>
                  {{ sourceMap.gfbwts || "0" }}
                </div>
              </div>
            </el-col>
            <el-col @click="changeShow(2)" style="cursor: pointer">
              <div class="active-b" :class="{ active_bor: fillFjzt == 2 }">
                <p class="left_p"></p>
                <p class="right_p"></p>
                <div class="yuan">
                  <p><span class="circle"></span></p>
                  <p>故障</p>
                </div>

                <div>
                  {{ sourceMap.gfgzts || "0" }}
                </div>
              </div>
            </el-col>
            <el-col @click="changeShow(3)" style="cursor: pointer">
              <div class="active-b" :class="{ active_bor: fillFjzt == 3 }">
                <p class="left_p"></p>
                <p class="right_p"></p>
                <div class="yuan">
                  <p><span class="circle"></span></p>
                  <p>检修</p>
                </div>
                <div>
                  {{ sourceMap.gfwhts || "0" }}
                </div>
              </div>
            </el-col>
            <el-col @click="changeShow(4)" style="cursor: pointer">
              <div class="active-b" :class="{ active_bor: fillFjzt == 4 }">
                <p class="left_p"></p>
                <p class="right_p"></p>
                <div class="yuan">
                  <p><span class="circle"></span></p>
                  <p>限电</p>
                </div>
                <div>
                  {{ sourceMap.gfxdts || "0" }}
                </div>
              </div>
            </el-col>
            <el-col @click="changeShow(5)" style="cursor: pointer">
              <div class="active-b" :class="{ active_bor: fillFjzt == 5 }">
                <p class="left_p"></p>
                <p class="right_p"></p>
                <div class="yuan">
                  <p><span class="circle"></span></p>
                  <p>受累</p>
                </div>
                <div>
                  {{ sourceMap.gfslts || "0" }}
                </div>
              </div>
            </el-col>
            <el-col @click="changeShow(6)" style="cursor: pointer">
              <div class="active-b" :class="{ active_bor: fillFjzt == 6 }">
                <p class="left_p"></p>
                <p class="right_p"></p>
                <div class="yuan">
                  <p><span class="circle"></span></p>
                  <p>离线</p>
                </div>
                <div>
                  {{ sourceMap.gflxts || "0" }}
                </div>
              </div>
            </el-col>
          </div>
        </el-col>
      </el-row>
    </el-header>
    <el-scrollbar
      v-loading="loading"
      element-loading-background="rgba(4, 12, 11, 0.8)"
      element-loading-text="加载中..."
      style="height: calc(100% - 62px)"
    >
      <div
        class="wind_power_plant"
        v-for="(item, index) in showMatrixList"
        :key="index"
      >
        <el-row class="data_statistics">
          <el-col>
            <i
              v-if="item.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="item.czlx == -1 ? '' : 'color:#ff8100'"
              >{{ item.wpname }}</span
            >
          </el-col>
          <el-col>
            接入台数<span>{{
              item.jrts ? item.jrts.toFixed(0) : "0"
            }}</span></el-col
          >
          <el-col>
            待机台数<span>{{
              item.djts ? item.djts.toFixed(0) : "0"
            }}</span></el-col
          >
          <el-col>
            并网台数<span>{{
              item.bwts ? item.bwts.toFixed(0) : "0"
            }}</span></el-col
          >

          <el-col>
            故障台数<span>{{
              item.gzts ? item.gzts.toFixed(0) : "0"
            }}</span></el-col
          >
          <el-col>
            检修台数<span>{{
              item.jxts ? item.jxts.toFixed(0) : "0"
            }}</span></el-col
          >
          <el-col>
            限电台数<span>{{
              item.xdts ? item.xdts.toFixed(0) : "0"
            }}</span></el-col
          >
          <el-col>
            受累台数<span>{{
              item.slts ? item.slts.toFixed(0) : "0"
            }}</span></el-col
          >
          <el-col>
            离线台数<span>{{
              item.lxts ? item.lxts.toFixed(0) : "0"
            }}</span></el-col
          >
          <el-col
            style="cursor: pointer"
            v-if="item.czlx == -1"
            @click="handleIndicatorClick(item.czlx, item.wpid)"
          >
            风速<span>{{ item.spped ? item.spped.toFixed(2) : "0.00" }}</span>
          </el-col>
          <el-col
            style="cursor: pointer"
            v-else
            @click="handleIndicatorClick(item.czlx, item.wpid)"
          >
            光照强度<span>{{
              item.spped ? item.spped.toFixed(2) : "0.00"
            }}</span></el-col
          >
          <el-col
            style="cursor: pointer"
            @click="handleIndicatorClick(item.czlx, item.wpid)"
          >
            预测功率<span>{{
              item.ycgl ? (item.ycgl).toFixed(2) : "0.00"
            }}</span></el-col
          >
          <el-col
            style="cursor: pointer"
            @click="handleIndicatorClick(item.czlx, item.wpid)"
          >
            保证功率<span>{{
              item.bzgl ? (item.bzgl / 1000).toFixed(2) : "0.00"
            }}</span></el-col
          >
          <!-- <el-col
            style="cursor: pointer"
            @click="handleIndicatorClick(item.czlx, item.wpid)"
          >
            理论功率<span>{{
              item.llgl ? (item.llgl / 1000).toFixed(2) : "0.00"
            }}</span></el-col
          > -->
          <el-col
            style="cursor: pointer"
            @click="handleIndicatorClick(item.czlx, item.wpid)"
          >
            实际功率<span>{{
              item.sjgl ? (item.sjgl / 1000).toFixed(2) : "0.00"
            }}</span></el-col
          >
          <!-- <el-col>
            AGC指令<span>{{
              item.agc ? item.agc.toFixed(2) : "0.00"
            }}</span></el-col
          >
          <el-col>
            出线功率<span>{{
              item.cxgl ? (item.cxgl / 1000).toFixed(2) : "0.00"
            }}</span></el-col
          > -->
        </el-row>

        <div
          class="data_views"
          :class="{ active_vie: item.wtlist.length == 0 }"
        >
          <span
            v-for="(subItem, index) in item.wtlist"
            :class="getColor(subItem?.status)"
            :key="index"
            @click="goDetails(subItem, item.czlx, item.wpid)"
            >{{ subItem.wtname }}
            <!-- <i class="lock"></i> -->
          </span>
        </div>
      </div>
    </el-scrollbar>
  </div>
  <el-dialog
    width="90%"
    top="40px"
    v-model="displayMatrix"
    :show-close="true"
    destroy-on-close
  >
    <template #title>
      <div class="dialog-title">
        <div class="title">设备详情</div>
      </div>
    </template>
    <div class="dialog-body" style="height: 900px">
      <img class="dialog-img" src="@assets/imgs/dialog.png" />
      <windDetail
        v-show="wtType == -1"
        :wind="wind"
        :wtType="wtType"
        :flag="flag"
      ></windDetail>
      <lightDetail
        v-show="wtType == -2"
        :wind="wind"
        :wtType="wtType"
        :flag="flag"
      ></lightDetail>
    </div>
  </el-dialog>
  <qushi-dialog ref="child" :chartName="chartName"></qushi-dialog>
</template>

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

  // 数据
  data() {
    return {
      loading: false,
      timmer: null, // 计时器
      sourceMap: {}, // 核心数据
      showMatrixList: [],
      fillCategory: null, // 过滤条件
      fillFjzt: "all", // 过滤条件
      displayMatrix: false, //风机详情
      wind: {},
      wtType: -1,
      flag: false,
      gfdetialDisplay: false,
      stationId: "",
      windId: "",
      contrastDisplay: false,
      chooseList: [],
      activeTab: "fc", //全部 风电 光伏
      enterpriseIndex: "all",
      tabIndex: -1,
      //   wp指标
      stse: [
        {
          statiomName: "风速",
          stse: "",
          sts: "SSPJFS",
        },
        {
          statiomName: "预测功率",
          stse: "",
          sts: "FCFGDQDT0001",
        },
        {
          statiomName: "保证功率",
          stse: "",
          sts: "SSZBZGL",
        },
        // {
        //   statiomName: "理论功率",
        //   stse: "",
        //   sts: "SSZNHGLZS",
        // },
        {
          statiomName: "实际功率",
          stse: "",
          sts: "SSZGL",
        },
      ],
      chartName: "对比曲线",
    };
  },

  // 函数
  methods: {
    deepClone,
    typeFlag(activeTab, enterpriseIndex) {
      this.activeTab = activeTab;
      this.tabIndex = activeTab == "all" ? 0 : activeTab == "fc" ? -1 : -2;
      this.enterpriseIndex = enterpriseIndex;
    },
    // 根据风机状态码返回对应 class
    getColor(fjzt) {
      switch (fjzt) {
        case 0:
          return "blue";
        case 1:
          return "green";
        case 2:
          return "red";
        case 3:
          return "orange";
        case 4:
          return "pink";
        case 5:
          return "write";
        case 6:
          return "gray";
      }
    },
    // 切换显示种类
    changeShow(fjzt) {
      // 风机状态
      this.fillFjzt = fjzt;
      let showMatrixList = this.deepClone(this.sourceMap.powerVos);
      if (fjzt !== "all") {
        // 展示数据过滤
        this.showMatrixList = showMatrixList?.map(function (item) {
          item.wtlist = item.wtlist.filter(function (y) {
            return y.status === fjzt;
          });
          return item;
        });
      } else {
        this.showMatrixList = showMatrixList;
      }
    },
    // 请求服务
    requestData() {
      api
        .matrixPush({
          company:
            this.enterpriseIndex == "all"
              ? "0"
              : this.enterpriseIndex.toString(),
          type: this.tabIndex.toString(),
        })
        .then((res) => {
          this.loading = false;
          if (Object.values(res.data.data).length) {
            this.sourceMap = res.data.data;
            if (this.fillFjzt) {
              this.changeShow(this.fillFjzt);
            }
          } else {
            this.sourceMap = {};
            this.showMatrixList = [];
          }
        });
    },
    // 展示对比曲线
    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);
    },
    // 查看风机详情
    goDetails(wt, type, wpid) {
      this.displayMatrix = true;
      this.wtType = type;
      this.$nextTick(() => {
        this.wind = { ...wt, wtType: type, wpid };
        this.flag = true;
      });
    },
    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(() => {
      this.loading = true;
      that.requestData();
      that.timmer = setInterval(() => {
        that.requestData();
      }, 5000);
    });
  },

  unmounted() {
    clearInterval(this.timmer);
    this.timmer = null;
  },
};
</script>
<style lang="less" scoped>
.dark-matrix {
  height: calc(100% - 59px);
  padding: 0 16px;
  display: flex;
  flex-direction: column;
  padding-bottom: 10px;
  p {
    margin: 0;
  }
  .el-header {
    height: 78px;
    //   margin-top: 10px;
    background-color: rgba(0, 0, 0, 0.45);
    border-radius: 5px 5px 0 0;

    .el-row {
      align-items: center;
      height: 100%;

      .el-col {
        width: 40px;

        div {
          text-align: center;
        }
        .fd-header1,
        .fd-header2 {
          display: flex;
          position: relative;
          .el-col {
            flex: 1;
            display: flex;
            align-items: center;
            .active-b {
              border: 1px solid transparent;
              padding: 4px 10px;
              position: relative;
              .left_p {
                width: 12px;
                height: 12px;
                position: absolute;
                left: -1px;
                top: -1px;
              }

              .right_p {
                width: 12px;
                height: 12px;
                position: absolute;
                left: 61px;
                top: 45px;
              }
              .yuan {
                font-family: AgencyFB-Reg;
                line-height: 30px;
                display: flex;

                > p:first-of-type {
                  width: 13px;
                  height: 13px;
                  border: 1px solid transparent;
                  position: absolute;
                  top: 9px;
                  left: 10px;
                }

                > p:last-of-type {
                  margin-left: 20px;
                }

                .circle {
                  display: inline-block;
                  width: 4px;
                  height: 4px;
                  vertical-align: middle;
                  margin-right: 10px;
                  position: absolute;
                  top: 3.5px;
                  left: 3px;
                }
              }
            }
          }
          .el-col.fd-img,
          .el-col.gf-img {
            flex: 1.5 0 auto;
            display: flex;
            color: #b3b3b3;
            align-items: none;
            //   border: 0;
            //   padding: 0;
            .imgs {
              margin-right: 20px;
            }
            .titles {
              display: flex;
              flex-direction: column;
              justify-content: center;
              align-items: center;
              font-size: 14px;
              p {
                font-size: 16px;
                margin-top: 5px;
              }
            }
          }
          .el-col.fd-img {
            .qty_imgs {
              position: absolute;
              left: 11px;
              top: 12px;
              animation: move 1s infinite linear;
            }
            @keyframes move {
              0% {
                top: 12px;
              }

              20% {
                top: 11px;
              }

              40% {
                top: 10px;
              }

              80% {
                top: 11px;
              }

              100% {
                top: 12px;
              }
            }
          }
          // 待机
          .el-col:nth-child(2) {
            color: #1c99ff;
            .active_bor {
              border: 1px solid #1c99ff;
              .left_p {
                border-left: 1.5px solid #ffffff;
                border-top: 1.5px solid #ffffff;
              }

              .right_p {
                border-right: 1.5px solid #ffffff;
                border-bottom: 1.5px solid #ffffff;
              }
              div {
                > p:first-of-type {
                  border: 1px solid #1c99ff !important;
                }
              }
            }
            .circle {
              background-color: #1c99ff;
            }
          }
          //并网
          .el-col:nth-child(3) {
            color: #05bb4c;
            .active_bor {
              border: 1px solid #05bb4c;
              .left_p {
                border-left: 1.5px solid #ffffff;
                border-top: 1.5px solid #ffffff;
              }

              .right_p {
                border-right: 1.5px solid #ffffff;
                border-bottom: 1.5px solid #ffffff;
              }
              div {
                > p:first-of-type {
                  border: 1px solid #05bb4c !important;
                }
              }
            }
            .circle {
              background-color: #05bb4c;
            }
          }
          // 故障
          .el-col:nth-child(4) {
            color: #ba3237;
            .active_bor {
              border: 1px solid #ba3237;
              .left_p {
                border-left: 1.5px solid #ffffff;
                border-top: 1.5px solid #ffffff;
              }

              .right_p {
                border-right: 1.5px solid #ffffff;
                border-bottom: 1.5px solid #ffffff;
              }
              div {
                > p:first-of-type {
                  border: 1px solid #ba3237 !important;
                }
              }
            }
            .circle {
              background-color: #ba3237;
            }
          }
          // 检修
          .el-col:nth-child(5) {
            color: #e17d24;
            .active_bor {
              border: 1px solid #e17d24;
              .left_p {
                border-left: 1.5px solid #ffffff;
                border-top: 1.5px solid #ffffff;
              }

              .right_p {
                border-right: 1.5px solid #ffffff;
                border-bottom: 1.5px solid #ffffff;
              }
              div {
                > p:first-of-type {
                  border: 1px solid #e17d24 !important;
                }
              }
            }
            .circle {
              background-color: #e17d24;
            }
          }
          // 限电
          .el-col:nth-child(6) {
            color: #c530c8;
            .active_bor {
              border: 1px solid #c530c8;
              .left_p {
                border-left: 1.5px solid #ffffff;
                border-top: 1.5px solid #ffffff;
              }

              .right_p {
                border-right: 1.5px solid #ffffff;
                border-bottom: 1.5px solid #ffffff;
              }
              div {
                > p:first-of-type {
                  border: 1px solid #c530c8 !important;
                }
              }
            }
            .circle {
              background-color: #c530c8;
            }
          }
          // 受累
          .el-col:nth-child(7) {
            color: rgba(255, 255, 255, 1);
            .active_bor {
              border: 1px solid rgba(255, 255, 255, 1);
              .left_p {
                border-left: 1.5px solid #ffffff;
                border-top: 1.5px solid #ffffff;
              }

              .right_p {
                border-right: 1.5px solid #ffffff;
                border-bottom: 1.5px solid #ffffff;
              }
              div {
                > p:first-of-type {
                  border: 1px solid rgba(255, 255, 255, 1) !important;
                }
              }
            }
            .circle {
              background-color: rgba(255, 255, 255, 1);
            }
          }
          // 离线
          .el-col:nth-child(8) {
            color: #606769;
            .active_bor {
              border: 1px solid #606769;
              .left_p {
                border-left: 1.5px solid #ffffff;
                border-top: 1.5px solid #ffffff;
              }

              .right_p {
                border-right: 1.5px solid #ffffff;
                border-bottom: 1.5px solid #ffffff;
              }
              div {
                > p:first-of-type {
                  border: 1px solid #606769 !important;
                }
              }
            }
            .circle {
              background-color: #606769;
            }
          }
        }

        .fd-header2 {
          .el-col.gf-img {
            .qty_img {
              position: absolute;
              left: 11px;
              top: 18px;
              animation: moves 1s infinite linear;
            }

            @keyframes moves {
              0% {
                top: 18px;
              }

              20% {
                top: 17px;
              }

              40% {
                top: 16px;
              }

              80% {
                top: 17px;
              }

              100% {
                top: 18px;
              }
            }
          }
        }
      }
    }
  }

  .data_statistics {
    width: 100%;
    height: 32px;
    line-height: 32px;
    // background-color: rgba(0, 24, 68, 0.8);
    background-color: rgba(96, 103, 105, 0.4);
    padding: 0 12px;

    .icon-photovoltaic {
      color: #ff8100;
    }

    .el-col {
      height: 32px;
    }
    .el-col + .el-col {
      padding-left: 0;
    }
    .el-col:first-child {
      flex: 0 0 auto;
      margin-right: 10px;
      font-family: AgencyFB-Reg;
      color: #05bb4c;
      font-size: 14px;
      i {
        margin-right: 5px;
        font-size: 15px;
        position: relative;
        top: 3px;
      }
    }

    .el-col:not(:first-child) {
      flex: 1 0 auto;
      color: #b3b3b3;
      display: flex;
      align-items: center;

      span {
        font-family: Arial;
        color: #9ca5a8;
        font-size: 12px;
        // display: inline-block;
        width: 45px;
        text-align: left;
        margin-left: 5px;
        vertical-align: middle;
      }
    }

    .el-col:nth-child(2) {
      span {
        color: #fff;
      }
    }

    .el-col:nth-child(3) {
      span {
        color: #1c99ff;
      }
    }

    .el-col:nth-child(4) {
      span {
        color: #05bb4c;
      }
    }

    .el-col:nth-child(5) {
      span {
        color: #ba3237;
      }
    }

    .el-col:nth-child(6) {
      span {
        color: #e17d24;
      }
    }

    .el-col:nth-child(7) {
      span {
        color: #c530c8;
      }
    }

    .el-col:nth-child(8) {
      span {
        color: #ffffff;
      }
    }

    .el-col:nth-child(9) {
      span {
        color: #606769;
      }
    }
  }

  .data_views {
    padding: 5px 0;
    display: grid;
    justify-content: space-between;
    grid-template-columns: repeat(auto-fill, 60px);

    span {
      cursor: pointer;
      display: inline-block;
      min-width: 60px;
      height: 22px;
      line-height: 22px;
      text-align: center;
      border: 1px solid #4b55ae;
      color: #4b55ae;
      border-radius: 2px;
      margin-bottom: 3px;
      margin-right: 4px;
      font-size: 13px;
      position: relative;
      .lock {
        width: 0;
        height: 0;
        border-top: 8px solid #fff;
        border-right: 8px solid transparent;
        position: absolute;
        top: 0;
        left: 0;
      }
    }

    .card_hover {
      background: #1a7ccd;
    }
    // 待机
    .blue {
      color: #1c99ff;
      border-color: #1c99ff;
    }
    // 并网
    .green {
      color: #05bb4c;
      border-color: #05bb4c;
    }
    // 限电
    .pink {
      color: #c530c8;
      border-color: #c530c8;
    }
    // 故障
    .red {
      color: #fff;
      border-color: #ba3237;
      background-color: #ba3237;
    }
    // 检修
    .orange {
      color: #e17d24;
      border-color: #e17d24;
    }
    // 受累
    .write {
      color: #ffffff;
      border-color: rgba(255, 255, 255, 1);
    }
    // 离线
    .gray {
      color: #a7a7a7;
      border-color: #606769;
      background-color: rgba(96, 103, 105, 0.2);
    }

    .line_ll {
      color: #ffffff !important;
      border-color: #606701 !important;
      background-color: #606239 !important;
    }
  }
}
</style>