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 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" :class="{ active: item.value2 == fillFjzt }"
                                @click="handleClick(item.value2)">
                                <div class="matrix-status-left">
                                    <i class="svg-icon svg-icon-sm" :class="
                      $store.state.themeName === 'dark'
                        ? 'svg-icon-' + item.color
                        : 'white'
                    ">
                                        <SvgIcon :svgid="item.icon1"></SvgIcon>
                                    </i>
                                    {{ item.text1 }}
                                </div>
                                <div class="matrix-status-right">
                                    <!-- {{ sourceMap[item.code1] }} -->
                                    {{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>
                </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">
                            <!--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>
                        <!-- wt v-show="value['switch' + index]"-->
                        <div class="matrix-list">
                            <div class="matrix-card" style="cursor: pointer" :class="
                                val.status !== '' && colorList[Number(val.status)]
                                    ? colorList[Number(val.status)]
                                    : 'gray'
                                " v-for="(val, indexe) in value.wtlist" :key="indexe">
                                <div class="info">
                                    <!-- 是否预警 -->
                                    <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 {
                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",
                    },
                ],
                titleListNew: [{
                        color: "blue",
                        name: "待机",
                        value1: "",
                        code: "djts",
                        icon1: "svg-standby",
                        icon2: "svg-manual",
                    },
                    {
                        color: "green",
                        name: "并网",
                        value1: "",
                        code: "bwts",
                        icon1: "svg-normal-power",
                        icon2: "svg-drop-output",
                    },
                    {
                        color: "red",
                        name: "故障",
                        value1: "",
                        code: "gzts",
                        icon1: "svg-gz-downtime",
                        icon2: "svg-field-involved",
                    },
                    {
                        color: "orange",
                        name: "检修",
                        value1: "",
                        code: "jxts",
                        icon1: "svg-jx-downtime",
                        icon2: "svg-field-involved",
                    },
                    {
                        color: "pink",
                        name: "限电",
                        value1: "",
                        code: "xdts",
                        icon1: "svg-limit-power",
                        icon2: "svg-downtime",
                    },
                    {
                        color: "write",
                        name: "停机",
                        value1: "",
                        code: "slts",
                        icon1: "svg-intranet-involvement",
                        icon2: "svg-environment",
                    },
                    {
                        color: "gray",
                        name: "离线",
                        value1: "",
                        code: "lxts",
                        icon1: "svg-offline",
                        icon2: "svg-unknown",
                    },
                    {
                        color: "pansy",
                        name: "解缆",
                        value1: "",
                        code: "jlts",
                        icon1: "svg-environment",
                        icon2: "svg-environment",
                    },
                    {
                        color: "peachpuff",
                        name: "启动",
                        value1: "",
                        code: "qdts",
                        icon1: "svg-unknown",
                        icon2: "svg-unknown",
                    },
                ],
                //   右侧欠发标签
                unpaidList: [{
                        id: 1,
                        test: "欠发电量",
                        num1: 0,
                        key: "qf0",
                        num3: "0%~5%",
                        color: "upGreen",
                    },
                    {
                        id: 2,
                        test: "欠发电量",
                        num1: 0,
                        key: "qf1",
                        num3: "5%~10%",
                        color: "upSkyBlue",
                    },
                    {
                        id: 3,
                        test: "欠发电量",
                        num1: 0,
                        key: "qf2",
                        num3: "10%~20%",
                        color: "upBlue",
                    },
                    {
                        id: 4,
                        test: "欠发电量",
                        num1: 0,
                        key: "qf3",
                        num3: "20%~40%",
                        color: "upPurple",
                    },
                    {
                        id: 5,
                        test: "欠发电量",
                        num1: 0,
                        key: "qf4",
                        num3: ">40%",
                        color: "upPink",
                    },
                ],
                colorList: [
                    "blue",
                    "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: {
            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
                    .matrixDetailPush({
                        company: this.enterpriseIndex == "all" ?
                            "0" : this.enterpriseIndex.toString(),
                        type: this.tabIndex.toString(),
                    })
                    .then((res) => {
                        // this.BASE.closeLoading();
                        this.changeData(first, res)
                    });
            },

            changeData(first, 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;
                    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
                            }
                        }
                        console.log("32154==>>>", this.showMatrixList[0].wtlist)
                    }
                })
            },

            // 点击切换状态
            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);
                //     }
                //   }

                //   console.log(11, tempWtArray);
                //   console.log(22, sourceMap);
                this.showMatrixList = JSON.parse(JSON.stringify(this.sourceMap.powerVos));
                let matrixList = this.sourceMap.powerVos;
                if (this.fillFjzt !== "all") {
                    this.showMatrixList.forEach((item) => {
                        item.wtlist = [];
                    });
                    switch (this.fillFjzt) {
                        case "dj":
                            matrixList.forEach((val, index) => {
                                val.wtlist.forEach((item) => {
                                    if (item.status === 0 || item.status === 1) {
                                        this.showMatrixList[index].wtlist.push(item);
                                    }
                                });
                            });
                            break;
                        case "0":
                            matrixList.forEach((val, index) => {
                                val.wtlist.forEach((item) => {
                                    if (item.status === 0) {
                                        this.showMatrixList[index].wtlist.push(item);
                                    }
                                });
                            });
                            break;
                        case "1":
                            matrixList.forEach((val, index) => {
                                val.wtlist.forEach((item) => {
                                    if (item.status === 1) {
                                        this.showMatrixList[index].wtlist.push(item);
                                    }
                                });
                            });
                            break;

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

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

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

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

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

                        case "lx":
                            matrixList.forEach((val, index) => {
                                val.wtlist.forEach((item) => {
                                    if (item.status === 12 || item.status === 13) {
                                        this.showMatrixList[index].wtlist.push(item);
                                    }
                                });
                            });
                            break;
                        case "12":
                            matrixList.forEach((val, index) => {
                                val.wtlist.forEach((item) => {
                                    if (item.status === 12) {
                                        this.showMatrixList[index].wtlist.push(item);
                                    }
                                });
                            });
                            break;
                        case "13":
                            matrixList.forEach((val, index) => {
                                val.wtlist.forEach((item) => {
                                    if (item.status === 13) {
                                        this.showMatrixList[index].wtlist.push(item);
                                    }
                                });
                            });
                            break;
                        case "all":
                            this.showMatrixList = this.sourceMap.powerVos;
                            break;
                    }
                } else {
                    this.showMatrixList = this.sourceMap.powerVos;
                }
            },

            // 点击左侧数据弹出曲线
            handleLeftClick(wt, type, wpid) {
                this.displayMatrix = true;
                this.wtType = type;
                this.$nextTick(() => {
                    this.wind = {
                        ...wt,
                        wtType: type,
                        wpid
                    };
                    this.flag = true;
                });
            },
            // 点击右侧数据弹出曲线
            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: 70%;
                    height: 100%;

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

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

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

                            .nums {
                                font-size: 18px;
                                font-family: Arial;

                                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;

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