fd_dwgz_zhyw_nx/src/views/IntegratedAlarm/DetailMatrix/index.vue

<template>
  <div
    :class="$store.state.themeName === 'dark' ? 'dark-matrix' : 'light-matrix'"
  >
    <!-- 头部按钮选项 -->
    <HeaderNav :isAll="true" @firstRender="typeFlag" />
    <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"
              :class="{ active: fillFjzt == 'all' }"
              @click="handleClick('all')"
            >
              <div class="base-name">接入台数</div>
              <div class="nums">{{ sourceMap.jrts || 0 }}</div>
            </div>
          </div>
          <div class="matrix-status">
            <div
              style="margin-right: 10px"
              class="title-status"
              :class="item.color"
              v-for="(item, index) in titleListNew"
              :key="index"
            >
              <!-- <div class="status-first" :class="{ active: item.value1 == fillFjzt }"
                                @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-first">
                <div class="matrix-status-left">{{ item.name }}</div>
              </div>
              <!-- <div class="status-end" style="height: 50px">
                                <span style="margin-left: 5px">{{item.value1}}</span>
                            </div> -->
              <div class="status-end" @click="handleClick(item.sCode)">
                <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] }} -->
                  {{ item.value1 }}
                </div>
              </div>
              <!-- <div class="status-end" :class="{ active: item.value3 == fillFjzt }"
                                @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
              style="
                margin-left: 40px;
                margin-right: 10px;
                background: #fff;
                color: #040713;
                border: 1px solid #a6b8dd;
                padding: 0;
              "
              class="title-status static"
            >
              <div class="status-first">
                <div
                  class="matrix-status-left"
                  style="
                    width: 100%;

                    display: flex;
                    justify-content: center;
                    align-items: center;
                  "
                >
                  风速
                </div>
              </div>
              <div class="status-end">
                <div
                  class="matrix-status-right"
                  style="
                    width: 100%;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    margin: 0;
                  "
                >
                  <span>{{ titleListZb.spped }}</span>
                  &nbsp;
                  <span>m/s</span>
                </div>
              </div>
            </div>
            <div
              style="
                margin-right: 10px;
                background: #fff;
                color: #040713;
                border: 1px solid #a6b8dd;
                padding: 0;
              "
              class="title-status static"
            >
              <div class="status-first">
                <div
                  class="matrix-status-left"
                  style="
                    width: 100%;

                    display: flex;
                    justify-content: center;
                    align-items: center;
                  "
                >
                  实际功率
                </div>
              </div>
              <div class="status-end">
                <div
                  class="matrix-status-right"
                  style="
                    width: 100%;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    margin: 0;
                  "
                >
                  <span>{{ titleListZb.sjgl }}</span>
                  &nbsp;
                  <span>kW</span>
                </div>
              </div>
            </div>
            <div
              style="
                background: #fff;
                color: #040713;
                border: 1px solid #a6b8dd;
                padding: 0;
              "
              class="title-status static"
            >
              <div class="status-first">
                <div
                  class="matrix-status-left"
                  style="
                    width: 100%;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                  "
                >
                  理论功率
                </div>
              </div>
              <div class="status-end">
                <div
                  class="matrix-status-right"
                  style="
                    width: 100%;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    margin: 0;
                  "
                >
                  <span>{{ titleListZb.llgl }}</span>
                  &nbsp;
                  <span>kW</span>
                </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)">
        <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" v-if="false">
              <!--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 >= 10 && !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 >= 10
                        ? item.key1
                          ? value[item.key1]
                            ? item.ratio
                              ? (value[item.key1] / item.ratio).toFixed(2)
                              : value[item.key1].toFixed(2)
                            : "0.00"
                          : 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>
            <div class="jzBox" v-if="switchtToUglyMode">
              <div
                class="jzItem"
                v-for="(val, indexe) in value.wtlist"
                :key="indexe"
              >
                <el-popover
                  placement="top-start"
                  title="预警信息"
                  :width="200"
                  trigger="hover"
                  content="点击查看详情"
                  v-if="val.isShowWarn"
                >
                  <template #reference>
                    <div class="jzWarn" @click.stop="showWarnList(val)"></div>
                  </template>
                </el-popover>
                <div class="l" :class="stateMap[val.status]"></div>
                <div
                  class="c"
                  @click="handleLeftClick(val, value.czlx, value.wpid)"
                >
                  <img src="@assets/images/ugly.gif" v-if="val.status === 0" />
                  <img src="@assets/images/ugly.png" v-else />
                </div>
                <div class="r" :class="stateMap[val.status]">
                  <div class="zb">
                    <div class="name">{{ val.wtname }}</div>
                    <div class="value">{{ getStName(val.status) }}</div>
                    <!-- <div class="value">{{ mapping[val.status] }}</div> -->
                  </div>
                  <div class="zb">
                    <div class="key">
                      <span>转</span>
                      <span>速</span>
                    </div>
                    <div class="value">
                      {{
                        value.czlx == "-1"
                          ? val.transfer
                            ? Number(val.transfer)?.toFixed(2)
                            : "0.00"
                          : val.voltage
                          ? Number(val.voltage)?.toFixed(2)
                          : "0.00"
                      }}
                    </div>
                    <div class="unit">RPM</div>
                  </div>
                  <div class="zb">
                    <div class="key">
                      <span>风</span>
                      <span>速</span>
                    </div>
                    <div class="value">
                      {{
                        value.czlx == "-1"
                          ? val.speed
                            ? Number(val.speed)?.toFixed(2)
                            : "0.00"
                          : val.current
                          ? Number(val.current)?.toFixed(2)
                          : "0.00"
                      }}
                    </div>
                    <div class="unit">m/s</div>
                  </div>
                  <div class="zb">
                    <div class="key">
                      <span>功</span>
                      <span>率</span>
                    </div>
                    <div class="value">
                      {{
                        val.power
                          ? val && Number(val.power)?.toFixed(2)
                          : "0.00"
                      }}
                    </div>
                    <div class="unit">kW</div>
                  </div>
                </div>
              </div>
            </div>
            <!-- wt v-show="value['switch' + index]"-->
            <div class="matrix-list" v-else>
              <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">
                  <!-- 是否预警 -->
                  <el-popover
                    placement="top-start"
                    title="预警信息"
                    :width="200"
                    trigger="hover"
                    content="点击查看详情"
                    v-if="val.isShowWarn"
                  >
                    <template #reference>
                      <div class="isWarn" @click="showWarnList(val)"></div>
                    </template>
                  </el-popover>
                  <!-- wtname + 状态 -->
                  <div
                    class="card-left"
                    @click="handleLeftClick(val, value.czlx, value.wpid)"
                  >
                    <!-- <i class="lock" @mouseenter="handleMouse"></i> -->

                    <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" />
                  <!-- 数据项  @click="handleRightClick(value.czlx, val.wtid)"-->
                  <div class="card-right">
                    <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>
                      <!-- <input style="width: 200px" :value="val.power" /> -->
                    </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>
                      <!-- <input
                        style="width: 200px"
                        :value="
                          value.czlx == '-1'
                            ? val.speed
                              ? Number(val.speed)?.toFixed(2)
                              : '0.00'
                            : val.current
                            ? Number(val.current)?.toFixed(2)
                            : '0.00'
                        "
                      /> -->
                    </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>
                      <!-- <input
                        style="width: 200px"
                        :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 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
        :fullscreen="true"
        top="40px"
        v-model="displayMatrix"
        :show-close="true"
        destroy-on-close
      >
        <template #title>
          <div class="dialog-title">
            <div class="title">{{ wind.wtname }}号风机 设备详情</div>
          </div>
        </template>
        <div class="dialog-body" style="height: 100vh">
          <img class="dialog-img" src="@assets/imgs/dialog.png" />
          <windDetail
            v-if="wtType == -1"
            ref="windDetail"
            :wind="wind"
            :flag="flag"
          ></windDetail>
          <lightDetail
            v-if="wtType == -2"
            :wind="wind"
            :flag="flag"
          ></lightDetail>
        </div>
      </el-dialog>
      <el-dialog
        :fullscreen="true"
        top="40px"
        v-model="warnDialog"
        :show-close="true"
        destroy-on-close
      >
        <template #title>
          <div class="dialog-title">
            <div class="title">预警详情</div>
          </div>
        </template>
        <div class="dialog-body" style="height: 100vh">
          <el-table
            size="mini"
            :data="warntableData"
            style="width: 100%; height: calc(100% - 35px - 55px)"
            stripe
          >
            <el-table-column
              v-for="item in warntableHeader"
              :label="item.title"
              :prop="item.code"
              :key="item.code"
              :width="item.width || ''"
              show-overflow-tooltip
              header-align="center"
              align="center"
            >
              <template #default="scope">
                <p>
                  <span v-if="item.code == 'rank'">
                    {{ tableFilter(scope.row.rank) }}
                  </span>
                  <span v-else-if="item.code == 'ts'">
                    {{ formatTime(scope.row.ts) }}
                  </span>
                  <span
                    :style="`color:${
                      scope.row.isCloseName === '已解除'
                        ? '#05bb4c'
                        : 'var(--el-color-danger)'
                    }`"
                    v-else-if="item.code == 'isCloseName'"
                    >{{ scope.row.isCloseName }}</span
                  >
                  <span
                    :style="`color:${
                      scope.row.confirmed ? '#05bb4c' : 'var(--el-color-danger)'
                    }`"
                    v-else-if="item.code == 'confirmed'"
                  >
                    {{ scope.row.confirmed ? "是" : "否" }}
                  </span>
                  <span v-else>
                    {{
                      scope.row[item.code] != "NULL" ? scope.row[item.code] : ""
                    }}
                  </span>
                </p>
              </template>
            </el-table-column>
          </el-table>
          <div class="pagination-wrapper">
            <el-pagination
              layout="total, prev, pager, next"
              :current-page="query.page"
              :page-size="query.limit"
              :total="query.pageTotal"
              @current-change="handlePageChange"
            ></el-pagination>
          </div>
        </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, chunkArray } from "@/utills/func.js";
import { GetTableDataXo, alarm_history } from "@/api/zhbj/index.js";
import HeaderNav from "@/components/headerNavSta/index.vue";
import api from "@api/cockpit/matrix/index.js";
import dataJson from "./dataJson2.json";
import dayjs from "dayjs";
export default {
  // 名称
  name: "DetailMatrix", //明细矩阵
  // 使用组件
  components: {
    SvgIcon,
    HeaderNav,
    qushiDialog,
    windDetail,
    lightDetail,
  },

  // 数据
  data() {
    return {
      switchtToUglyMode: 1,
      loading: false,
      warnDialog: false,
      query: {
        page: 1,
        limit: 15,
        pageTotal: null,
      },
      timmer: null, // 定时器开关
      sourceMap: {}, // 接口数据
      showMatrixList: [], //展示数据
      fillFjzt: "all", // 风机/电站状态
      mapping: {
        0: "svg-standby",
        // 1: "svg-manual",
        1: "svg-intranet-involvement",
        2: "svg-normal-power",
        // 3: "svg-drop-output",
        3: "svg-environment",
        4: "svg-gz-downtime",
        5: "svg-unknown",
        // 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: "lxz",
          code1: "lx",
          code2: "wz",
          icon1: "svg-offline",
          icon2: "svg-unknown",
        },
      ],
      stateMap: {
        0: "zcyx",
        2: "djzt",
        1: "xgyx",
        "-1": "txzd",
        5: "zctj",
        3: "gztj",
        4: "dwgz",
        7: "tjwh",
        6: "tqtj",
        9: "jhtj",
        10: "qd",
        8: "xgtj",
        11: "jlzt",
      },
      titleListNew: [
        {
          sCode: 0,
          color: "zcyx",
          name: "正常运行",
          value1: "",
          code: "zcyxts",
          icon1: "svg-standby",
          icon2: "svg-manual",
        },
        {
          sCode: 2,
          color: "djzt",
          name: "待机状态",
          value1: "",
          code: "djztts",
          icon1: "svg-normal-power",
          icon2: "svg-drop-output",
        },
        {
          sCode: 1,
          color: "xgyx",
          name: "限功运行",
          value1: "",
          code: "xgyxts",
          icon1: "svg-gz-downtime",
          icon2: "svg-field-involved",
        },
        {
          sCode: -1,
          color: "txzd",
          name: "通讯中断",
          value1: "",
          code: "txzdts",
          icon1: "svg-jx-downtime",
          icon2: "svg-field-involved",
        },
        {
          sCode: 5,
          color: "zctj",
          name: "正常停机",
          value1: "",
          code: "zctjts",
          icon1: "svg-limit-power",
          icon2: "svg-downtime",
        },
        {
          sCode: 3,
          color: "gztj",
          name: "故障停机",
          value1: "",
          code: "gztjts",
          icon1: "svg-intranet-involvement",
          icon2: "svg-environment",
        },
        {
          sCode: 4,
          color: "dwgz",
          name: "电网故障",
          value1: "",
          code: "dwgzts",
          icon1: "svg-offline",
          icon2: "svg-unknown",
        },
        {
          sCode: 7,
          color: "tjwh",
          name: "停机维护",
          value1: "",
          code: "tjwhts",
          icon1: "svg-environment",
          icon2: "svg-environment",
        },
        {
          sCode: 6,
          color: "tqtj",
          name: "天气停机",
          value1: "",
          code: "tqtjts",
          icon1: "svg-unknown",
          icon2: "svg-unknown",
        },
        {
          sCode: 9,
          color: "jhtj",
          name: "计划停机",
          value1: "",
          code: "jhtjts",
          icon1: "svg-downtime",
          icon2: "svg-downtime",
        },
        {
          sCode: 10,
          color: "qd",
          name: "启动",
          value1: "",
          code: "qdztts",
          icon1: "svg-manual",
          icon2: "svg-manual",
        },
        {
          sCode: 8,
          color: "xgtj",
          name: "限功停机",
          value1: "",
          code: "xgtjts",
          icon1: "svg-photovoltaic",
          icon2: "svg-photovoltaic",
        },
        {
          sCode: 11,
          color: "jlzt",
          name: "解缆状态",
          value1: "",
          code: "jlztts",
          icon1: "svg-gf",
          icon2: "svg-gf",
        },
      ],
      titleListZb: {
        spped: 0,
        llgl: 0,
        sjgl: 0,
      },
      //   右侧欠发标签
      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",
        "write",
        "green",
        "pansy",
        "red",
        "peachpuff",
        "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: "#40E0D0",
          key: "slts",
        },
        {
          text: "启动台数",
          color: "#ffbe98",
          key: "qdts",
        },
        {
          text: "风速",
          color: "#9CA5A8",
          key: "spped",
          text1: "光照强度",
          type: "-2",
        },
        {
          text: "预测功率",
          color: "#9CA5A8",
          key: "ycgl",
        },
        {
          text: "保证功率",
          color: "#9CA5A8",
          key: "bzgl",
          ratio: 1000,
          text1: "理论功率",
          key1: "llgl",
          type: "-2",
        },
        // {
        //   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,
      warntableData: [],
      warntableHeader: [
        { title: "时间", code: "ts", width: "150" },
        { title: "场站", code: "wpName", width: "150" },
        { title: "机组", code: "code", width: "150" },
        { title: "部件", code: "components", width: "200" },
        { title: "预警信息", code: "characteristic" },
        { title: "报警解除时间", code: "endtsName", width: "150" },
        {
          title: "状态",
          code: "isCloseName",
          width: "80",
        },
        { title: "是否确认", code: "confirmed", width: "100" },
        { title: "类型", code: "deviceTypeName", width: "80" },
      ],
      changeWind: "",
    };
  },

  watch: {
    $route: {
      handler: function (val, oldVal) {
        this.getWarnData();
      },
    },
  },

  mounted() {
    // this.changeData(true, dataJson.data);
    this.requestData(true);
    // this.timmer = setInterval(() => {
    //     this.requestData(true);
    // }, 5000);
  },
  unmounted() {
    clearInterval(this.timmer);
    this.timmer = null;
  },

  // 函数
  methods: {
    getStName(code) {
      return (
        this.titleListNew.find((ele) => {
          return ele.sCode === code;
        })?.name || ""
      );
    },
    showWarnList(val) {
      this.changeWind = val;
      this.warnDialog = true;
      this.getAlarmHistoryt(val);
    },
    getColumnStyle(columnItem) {
      let style = "color:";
      if (columnItem.endts) {
        style += "#05bb4c";
      } else {
        style += "var(--el-color-danger)";
      }
      return style;
    },
    tableFilter(val) {
      const obj = {
        1: "低级",
        2: "低中级",
        3: "中级",
        4: "中高级",
        5: "高级",
        booststation: "升压站",
        custom: "自定义",
        windturbine: "风机",
        inverter: "光伏",
      };
      return obj[val];
    },
    formatTime(val) {
      return dayjs(val).format("YYYY-MM-DD HH:mm:ss");
    },
    // 分页导航
    handlePageChange(val) {
      this.query.page = val;
      this.getAlarmHistoryt(this.changeWind);
    },
    async getAlarmHistoryt(val) {
      let params = {
        pageNum: this.query.page,
        pageSize: this.query.limit,
        alarmId: "",
        alarmType: "custom",
        deviceType: "windturbine",
        stationid: "NX_FGS_HA_FDC_STA",
        deviceid: val.wtid,
        modelId: "",
        components: "",
        description: "",
        begin: dayjs().add(-1, "hour").format("YYYY-MM-DD HH:mm:ss"),
        end: dayjs().format("YYYY-MM-DD HH:mm:ss"),
      };
      const { data } = await alarm_history(params);
      if (data) {
        this.query.pageTotal = data?.total;
        data?.ls?.forEach((ele) => {
          ele.isCloseName = ele.endts ? "已解除" : "未解除";
          ele.deviceTypeName = this.tableFilter(ele.deviceType);
          ele.endtsName = ele.endts > 0 ? this.formatTime(ele.endts) : "--";
        });
        this.warntableData = data?.ls;
      }
    },
    handleMouse() {},
    deepClone,
    findUpColor,
    chunkArray,
    // 头部tab选择
    // typeFlag(activeTab) {
    //   this.activeTab = activeTab;
    //   this.tabIndex = activeTab;
    //   this.enterpriseIndex = "all";
    //   this.requestData(true);
    //   clearInterval(this.timmer);
    //   this.timmer = null;
    //   this.timmer = setInterval(() => {
    //     this.requestData();
    //   }, 5000);
    // },
    // 请求服务
    requestData(first) {
      if (first) {
        // this.BASE.showLoading();
        // this.changeData(first, dataJson)
      }
      api
        .matrixDetailPush1({
          company:
            this.enterpriseIndex == "all"
              ? "0"
              : this.enterpriseIndex.toString(),
          type: this.tabIndex.toString(),
        })
        .then((res) => {
          // this.BASE.closeLoading();
          this.changeData(first, res);
        });
    },

    changeData(first, res) {
      console.log(1122, res);
      if (Object.values(res.data).length) {
        let sourceMap = res.data;
        let windNumData = res.data.powerVos[0];

        this.titleListNew.forEach((it) => {
          it.value1 = windNumData[it.code];
        });
        this.sourceMap = sourceMap;
        this.titleListZb.spped = res.data.powerVos[0].spped;
        this.titleListZb.llgl = res.data.powerVos[0].llgl;
        this.titleListZb.sjgl = res.data.powerVos[0].sjgl;
        if (first) {
          const tempWtArray = this.chunkArray(this.sourceMap.powerVos, 3);
          this.showMatrixList = tempWtArray[0];
          for (let i = 1; i < tempWtArray.length; i++) {
            setTimeout(() => {
              this.showMatrixList.push(...tempWtArray[i]);
            }, 5);
          }
        } else {
          this.handleClick(this.fillFjzt);
        }
      } else {
        this.sourceMap = {};
        this.showMatrixList = [];
      }

      if (this.showMatrixList.length > 0) {
        this.getWarnData(this.showMatrixList[0].wtlist);
      }
    },

    getWarnData(datas) {
      let params = {
        begin: dayjs().add(-1, "hour").format("YYYY-MM-DD HH:mm:ss"),
        end: dayjs().format("YYYY-MM-DD HH:mm:ss"),
        alarmType: "custom",
        stationid: "NX_FGS_HA_FDC_STA",
      };
      GetTableDataXo(params).then((res) => {
        if (res && res.data) {
          for (let i = 0; i < datas.length; i++) {
            let itv = datas[i];
            itv.isShowWarn = false;
            if (res.data.indexOf(itv.wtid) !== -1) {
              itv.isShowWarn = true;
            }
          }
        }
      });
    },

    // 点击切换状态
    handleClick(val) {
      this.fillFjzt = val;
      this.handleClickWind();
    },
    // 点击开关闭场站设备
    handleToggle(index) {
      //   this.showMatrixList[index]["switch" + index] =
      //     !this.showMatrixList[index]["switch" + index];
    },
    // 状态切换改变数据
    handleClickWind() {
      //   const tempWtArray = this.BASE.deepCopy(sourceMap.powerVos);

      //   tempWtArray?.forEach((ele) => {
      //     ele.spWtlist = this.chunkArray(ele.wtlist, 100);
      //   });

      //   sourceMap.powerVos.forEach((ele) => {
      //     ele.wtlist = [];
      //   });

      //   for (let i = 0; i < sourceMap.powerVos.length; i++) {
      //     const ele = sourceMap.powerVos[i];
      //     for (let j = 0; j < tempWtArray[i]?.spWtlist?.length; j++) {
      //       setTimeout(() => {
      //         ele.wtlist = ele.wtlist.concat(tempWtArray[i].spWtlist[j]);
      //       }, 500);
      //     }
      //   }

      this.showMatrixList = JSON.parse(JSON.stringify(this.sourceMap.powerVos));
      let matrixList = this.sourceMap.powerVos;
      if (this.fillFjzt !== "all") {
        this.showMatrixList.forEach((item) => {
          item.wtlist = [];
        });
        matrixList.forEach((val, index) => {
          val.wtlist.forEach((item) => {
            if (item.status === this.fillFjzt) {
              this.showMatrixList[index].wtlist.push(item);
            }
          });
        });
      } else {
        this.showMatrixList = this.sourceMap.powerVos;
      }
    },

    // 点击左侧数据弹出曲线
    handleLeftClick(wt, type, wpid) {
      console.log(111, wt);
      console.log(222, type);
      console.log(333, wpid);
      this.displayMatrix = true;
      this.wtType = type;
      this.$nextTick(() => {
        this.wind = {
          ...wt,
          wtType: type,
          wpid,
        };
        this.flag = true;
      });
    },
    // 点击右侧数据弹出曲线
    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";
        y[2].statiomName = "理论功率";
        y[2].sts = "SSZNHGLZS";
      }
      this.$refs.child.openCurvDatas(y, 1, wpid);
    },
  },
};
</script>

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

.dark-matrix {
  height: 100%;
  display: flex;
  flex-direction: column;

  .matrix-body {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding-right: 20px;
    padding-left: 20px;
    padding-bottom: 5px;

    .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: 100%;
        height: 100%;

        .title-name {
          display: flex;
          flex-direction: row;
          align-items: center;
          width: 10%;
          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;

              color: #ffffff;
            }

            .base-name {
              font-size: 14px;
              font-family: Microsoft YaHei;

              color: #b3b3b3;
              margin-bottom: 10px;
            }

            &.active {
              font-weight: 700;
            }
          }

          .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: 90%;
          display: flex;
          flex-direction: row;
          align-items: center;
          height: 80%;
        }

        .title-status {
          display: flex;
          flex-direction: column;
          width: 17%;
          height: 100%;
          padding-right: 5px;
          cursor: pointer;

          &.static {
            cursor: auto;
          }

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

            .matrix-status-right {
              margin-right: 6px;
              font-size: 16px;
              font-family: Arial;
            }

            &.active {
              font-weight: 700;

              .matrix-status-left {
                font-size: 15px;
              }

              .matrix-status-right {
                font-size: 17px;
              }
            }
          }

          .status-end {
            width: 100%;
            // height: 33%;
            height: 50%;
            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;
            }

            .matrix-status-right {
              margin-right: 6px;
              font-size: 14px;
              font-family: Arial;
            }

            &.active {
              font-weight: 700;

              .matrix-status-left {
                font-size: 13px;
              }

              .matrix-status-right {
                font-size: 15px;
              }
            }
          }

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

          &.green {
            .status-first {
              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 {
                color: #05bb4c;
              }

              .matrix-status-right {
                color: #05bb4c;
              }
            }

            .status-end {
              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 {
                color: #05bb4c;
              }

              .matrix-status-right {
                color: #05bb4c;
              }
            }

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

          &.blue {
            .status-first {
              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 {
                color: #1c99ff;
              }

              .matrix-status-right {
                color: #1c99ff;
              }
            }

            .status-end {
              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 {
                color: #1c99ff;
              }

              .matrix-status-right {
                color: #1c99ff;
              }
            }

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

          &.pink {
            .status-first {
              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 {
                color: #c530c8;
              }

              .matrix-status-right {
                color: #c530c8;
              }
            }

            .status-end {
              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 {
                color: #c530c8;
              }

              .matrix-status-right {
                color: #c530c8;
              }
            }

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

          &.red {
            .status-first {
              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 {
                color: #ba3237;
              }

              .matrix-status-right {
                color: #ba3237;
              }
            }

            .status-end {
              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 {
                color: #ba3237;
              }

              .matrix-status-right {
                color: #ba3237;
              }
            }

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

          &.orange {
            .status-first {
              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 {
                color: #e17d24;
              }

              .matrix-status-right {
                color: #e17d24;
              }
            }

            .status-end {
              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 {
                color: #e17d24;
              }

              .matrix-status-right {
                color: #e17d24;
              }
            }

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

          &.gray {
            .status-first {
              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 {
                color: #606769;
              }

              .matrix-status-right {
                color: #606769;
              }
            }

            .status-end {
              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 {
                color: #606769;
              }

              .matrix-status-right {
                color: #606769;
              }
            }

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

          &.write {
            .status-first {
              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 {
                color: #ffffff;
              }

              .matrix-status-right {
                color: #ffffff;
              }
            }

            .status-end {
              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 {
                color: #ffffff;
              }

              .matrix-status-right {
                color: #ffffff;
              }
            }

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

          &.pansy {
            .status-first {
              background-color: rgba(64, 224, 205, 0.28);
              border-top: 1px solid #335f5b;
              border-left: 1px solid #335f5b;
              border-right: 1px solid #335f5b;

              .matrix-status-left {
                color: #40e0d0;
              }

              .matrix-status-right {
                color: #40e0d0;
              }
            }

            .status-end {
              background-color: rgba(64, 224, 205, 0.16);
              border-left: 1px solid #335f5b;
              border-right: 1px solid #335f5b;
              border-bottom: 1px solid #335f5b;

              .matrix-status-left {
                color: #40e0d0;
              }

              .matrix-status-right {
                color: #40e0d0;
              }
            }

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

          &.peachpuff {
            .status-first {
              background-color: rgba(255, 218, 185, 0.28);
              border-top: 1px solid #554135;
              border-left: 1px solid #554135;
              border-right: 1px solid #554135;

              .matrix-status-left {
                color: #ffbe98;
              }

              .matrix-status-right {
                color: #ffbe98;
              }
            }

            .status-end {
              background-color: rgba(255, 218, 185, 0.16);
              border-left: 1px solid #554135;
              border-right: 1px solid #554135;
              border-bottom: 1px solid #554135;

              .matrix-status-left {
                color: #ffbe98;
              }

              .matrix-status-right {
                color: #ffbe98;
              }
            }

            .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, 142px);
        width: 100%;
        margin-top: 5px;

        .matrix-card {
          display: flex;
          flex-direction: column;
          width: 142px;
          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;
            position: relative;

            .isWarn {
              position: absolute;
              left: 3px;
              top: 3px;
              width: 8px;
              height: 8px;
              background: #ffd700;
              border-radius: 20px;
            }

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

              .lock {
                width: 0;
                height: 0;
                border-top: 8px solid #fff;
                border-right: 8px solid transparent;
                position: absolute;
                top: 0;
                left: 0;
              }

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

            .card-right {
              width: calc(100% - 1px - 55px);
              display: flex;
              flex-direction: column;
              padding-left: 10px;
              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;
              }
            }
          }

          &.pansy {
            border: 1px solid #40e0d0;
            color: #a7a7a7;

            .info {
              border-bottom: 1px solid #40e0d0;
              background-color: rgba(64, 224, 205, 0.2);

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

          &.peachpuff {
            border: 1px solid #ffbe98;
            color: #a7a7a7;

            .info {
              border-bottom: 1px solid #ffbe98;
              background-color: rgba(255, 218, 185, 0.2);

              .dashed {
                width: 1px;
                height: 100%;
                background-image: linear-gradient(
                  #ffbe98 0%,
                  #ffbe98 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;
}

.jzBox {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;

  .jzItem {
    width: 12%;
    height: 100px;
    background: #506382;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    font-size: 12px;
    margin-top: 10px;
    margin-left: 10px;
    position: relative;

    .jzWarn {
      position: absolute;
      left: 7px;
      top: 4px;
      width: 8px;
      height: 8px;
      background: #ffd700;
      border-radius: 20px;
      cursor: pointer;
    }

    &:nth-child(1),
    &:nth-child(8n + 1) {
      margin-left: 0;
    }

    .l {
      width: 3px;
      height: 100%;
    }

    .c {
      width: 80px;
      height: 100px;
      cursor: pointer;

      img {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
        border: 0;
      }
    }

    .r {
      flex: 1;
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      align-items: flex-start;

      .zb {
        width: 100%;
        padding: 0 10px;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        color: #fff;
        margin-top: 5px;

        .name {
          width: 40px;
          font-weight: 700;
          margin-right: 5px;
        }

        .key {
          width: 35px;
          margin-right: 10px;
          display: flex;
          justify-content: space-between;
          align-items: center;
          font-size: 0;
          span {
            font-size: 12px;
          }
        }

        .value,
        .unit {
          display: flex;
          justify-content: center;
          align-items: center;
        }

        .unit {
          margin-left: 5px;
        }
      }
    }
  }
}

.jzBox,
.matrix-status {
  .zcyx {
    background: #71af81;
  }
  .djzt {
    background: #d18d6a;
  }
  .xgyx {
    background: #608ec6;
  }
  .txzd {
    background: #a0a3a7;
  }
  .zctj {
    background: #756a66;
  }
  .gztj {
    background: #f26060;
  }
  .dwgz {
    background: #a980b6;
  }
  .tjwh {
    background: #cca15e;
  }
  .tqtj {
    background: #46aab0;
  }
  .jhtj {
    background: #645b43;
  }
  .qd {
    background: #3b2e7e;
  }
  .xgtj {
    background: #8988c3;
  }
  .jlzt {
    background: #519ef8;
  }
}
</style>