ims-gyee/src/views/layout/stateMonitor/detailMatrix/index.vue

<template>
    <div class="simpleMatrix ">
        <!-- <headerNav @firstRender="firstRender"/> -->
        <HeaderMultiBtn @onChange="onChange"/>

        <div class="matrix-body">
            <div class="body-title">
                <div class="title-name">
                    <!--                        <div class="imgs" v-if="status === 0">-->
                    <!--                            <img src="@assets/img/images/downF.png">-->
                    <!--                            <img src="@assets/img/images/all.png" class="all_img">-->
                    <!--                        </div>-->
                    <div class="imgs" v-if="status == -1">
                        <img src="@assets/img/images/downF.png">
                        <img src="@assets/img/images/windup.png" class="qty_img">
                    </div>
                    <div class="imgs" v-if="status == -2">
                        <img src="@assets/img/images/downg.png">
                        <img src="@assets/img/images/ptyup.png" class="qty_img">
                    </div>
                    <div class="base-num" @click="handleClick('all')">
                        <div class="base-name">接入台数</div>
                        <div class="nums">{{ titleArr.JRTS }}</div>
                    </div>

                </div>
                <div class="base-inf">
                    <div></div>

                    <div class="el-cole" v-for="(item, index) in titleList" :key="index">

                        <div class="active-b" :class="{ active_bor: this.act == item.value1 }">

                            <div>
                                <p class="left_p"></p>
                                <p class="right_p"></p>
                            </div>
                            <div class="yuan">
                                <p><span class="circle"></span></p>
                                <p>{{ item.name }}</p>
                            </div>

                            <div @click="handleClick(item.value1)" class="disCircles"
                                 style="cursor: pointer;font-size: 16px;font-family: 'Bicubik'">
                                <span class="circles"></span>
                                <span>
                                    {{
                                        titleArr[item.code] ? (Number(titleArr[item.code])).toFixed(0) : '0'
                                    }}
                                </span>
                            </div>

                        </div>
                    </div>


                </div>
                <div class="lineContent">

                </div>
                <div class="unpaid">
                    <ul>
                        <li class="unpaid_name">
                            <div v-for="(item, index) in  unpaidLists" :key="index">{{ item }}</div>
                        </li>
                        <li class="unpaid_num">
                            <div> {{
                                    titleArr.capacityZl ? (Number(titleArr.capacityZl) / 1000).toFixed(2) : '0'
                                }}
                            </div>
                            <div>{{
                                    titleArr.capacityJl ? (Number(titleArr.capacityJl) / 1000).toFixed(2) : '0'
                                }}
                            </div>
                            <div>{{
                                    titleArr.SSZGL ? Number(titleArr.SSZGL / 1000).toFixed(2) : '0'
                                }}
                            </div>
                            <div>{{
                                    titleArr.RFDL ? Number(titleArr.RFDL / 1000).toFixed(2) : '0'
                                }}
                            </div>
                            <div>{{
                                    titleArr.RLYXS ? Number(titleArr.RLYXS).toFixed(2) : '0'
                                }}
                            </div>
                        </li>
                    </ul>
                </div>
                <div style="display: flex">
                    <div class="unpaid_left"></div>
                    <div class="unpaid_lefts"></div>
                    <div class="unpaid-tit"></div>
                    <div class="unpaid-tits"></div>
                    <el-button class="updownTits " round size="mini" type="primary" @click="setTitle">
                        自定义指标
                    </el-button>
                </div>

            </div>
            <div style="height: 888px;overflow-y: auto;">
                <el-collapse v-model="activeNames" @change="handleChange">

                    <el-collapse-item style="position: relative" class="matrixs"
                                      v-for="(values, leng) in showMatrixList"
                                      :key="leng" :name="leng + 1">
                        <template #title>
                            <div class="matrix-titles" style="height: 50px;padding: 0 0 0 10px"
                                 v-if="values.LISTS?.length != 0 || current == 'all'">
                                <div style="width: 150px">
                                    <span class="station-name">{{ values.CMANAME }}</span>
                                </div>
                                <div class="indicator" @click.stop="" style="margin-left: 6px">
                                    <div class="sub-title-item" v-for="(item, indexse) in subTitleData" :key="indexse"
                                         :class="indexse >= 7 ? 'active' : ''"
                                         @click="handleCurveClicks(leng, indexse)">
                                        <span>{{ item.text }}</span>
                                        <span class="sub-value" :style="{ color: item.color }">
                      {{
                                                values[item.key] ? (values[item.key] / item.ratio).toFixed(item.fix) : "0"
                                            }}
                    </span>
                                    </div>
                                </div>
                            </div>
                        </template>
                        <div v-for="(value, index) in values.LISTS" :key="index">

                            <div v-if="values.CMCODE!=values.LISTS[0].CZBM">
                                <div class="matrix-title active"
                                     v-if="value.lists.length !=0 || current=='all'">
                                    <div class="matrix-Left"></div>
                                    <div class="matrix-top"></div>
                                    <!--                        <i v-if="(value.CZLX === '-1')" class="icon-wind"></i>-->
                                    <i class="icon-photovoltaic" v-if="status==-2"></i>
                                    <i style="color:#1c99ff" class="icon-fan" v-if="status==-1"></i>
                                    <span style="color:#1c99ff" class="station-name" v-if="status==-1">{{
                                            value.CZAMC
                                        }}</span>
                                    <span class="station-name" v-if="status==-2">{{ value.CZAMC }}</span>
                                    <div class="indicator">
                                        <div class="sub-title-item"
                                             :class="indexs >= 7 && indexs!=10 ? 'active' : 'active1'"
                                             v-for="(item, indexs) in subTitleDatas" :key="indexs"
                                             @click="handleCurveClick(leng,item, index,indexs)">
                                            <span>{{ item.type === value.CZLX ? item.text1 : item.text }}</span>
                                            <span class="sub-value" :style="{ color: item.color }">
                  {{
                                                    value[item.key] ? Number(value[item.key] / (item.ratio)).toFixed(item.fix) : "0"
                                                }}
                </span>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="matrix-list"
                                 :style="{ margin: (value.lists.length == 0 ? '0' : '10px 0 5px 0') }">
                                <!--  风机颜色判断，随机数不对-->
                                <div class="matrix-card" style="cursor: pointer"
                                     :class="val.SBZT !== '' && colorList[Number(val.SBZT.toFixed(0))] ? colorList[Number(val.SBZT.toFixed(0))] : 'gray'"
                                     v-for="(val, indexe) in value.lists" :key="indexe">
                                    <div class="info">
                                        <div style="cursor: pointer" class="card-left"
                                             @click="handleClickMatrix(val, value.CZLX, value.CZMC, indexe, values.CMANAME, value.CZAMC)">
                                            <span class="card-name">{{ val.aname }}</span>
                                        </div>

                                        <div class="card-right" style="cursor: pointer"
                                             @click="handleDetailClick(index, indexe, leng, 'sun')">
                                            <div class="right-item" v-for="(vales, ind) in electTarget">
                                                <div style="width: 70px">
                                                    {{ vales.name }}
                                                </div>
                                                <div class="right-value"
                                                     @contextmenu="handDialog(vales, val[vales.type], val, value.CZAMC)">
                                                    {{
                                                        vales.type ? Number(val[vales.type + 'Value']).toFixed(2) : '0.00'
                                                    }}
                                                </div>
                                                <div class="right-unite">
                                                    {{ val[vales.unite] }}
                                                </div>
                                            </div>


                                        </div>
                                    </div>
                                    <!--                            <div class="matrix-progress"-->
                                    <!--                                 v-if="Number(val.QFZT) > 0 && Number(val.QFZT) <= 5 && (Number(val.MXZT) === 2 || Number(val.MXZT) === 3)">-->
                                    <!--                                <div class="progress-block" v-for="(item, index) in parseInt(Number(val.QFZT)) + 1"-->
                                    <!--                                     :key="index"></div>-->
                                    <!--                            </div>-->
                                </div>
                            </div>
                        </div>
                    </el-collapse-item>
                </el-collapse>
            </div>
            <el-dialog class="dialogs" width="90%" top="40px" v-model="displayMatrix" :show-close="true"
                       :destroy-on-close="true">
                <template #title>
                    <div class="dialog-title">
                        <img class="dialog-title-img" src="@assets/img/images/dialog-title.png"/>
                        <div class="title">设备详情</div>
                    </div>
                </template>
                <div class="dialog-body" style="height: 77vh">
                    <img class="dialog-img" src="@assets/img/images/dialog.png"/>
                    <windDetail :wind="wind" showHeight="77vh"></windDetail>
                </div>
            </el-dialog>
            <el-dialog class="dialogs" width="90%" top="40px" v-model="displaySunMatrix" :show-close="true"
                       :destroy-on-close="true">
                <template #title>
                    <div class="dialog-title">
                        <img class="dialog-title-img" src="@assets/img/images/dialog-title.png"/>
                        <div class="title">设备详情1</div>
                    </div>
                </template>
                <div class="dialog-body" style="height: 880px">
                    <img class="dialog-img" src="@assets/img/images/dialog.png"/>
                    <lightDetial ref="lightDetial" :JZheight="'63%'" :GJheight="'95%'" :stationName="stationName"
                                 :leftcellHeight="'2.8vh'" :rightcellHeight="'2.4vh'"/>
                </div>
            </el-dialog>

        </div>
        <el-dialog width="50%" top="80px" v-model="displaySet" :show-close="true" :destroy-on-close="true">
            <template #title>
                <div class="dialog-title">
                    <img class="dialog-title-img" src="@assets/img/images/dialog-title.png"/>
                    <div class="title">自定义指标</div>
                </div>
            </template>
            <img class="dialog-img" style="position:absolute;right: 0px;bottom: 40px"
                 src="@assets/img/images/dialog.png"/>
            <div class="dialog-body" style="height:30vh;position: relative">
                <el-checkbox-group v-model="checkList" @change="change">
                    <el-checkbox v-for="(item2, index2) in setTarget" :key="index2" :label="item2.name"></el-checkbox>
                </el-checkbox-group>
                <el-row class="footerButton">
                    <el-button round @click="cancel">取消</el-button>
                    <el-button type="primary" round @click="tableRefresh">确认</el-button>
                </el-row>
            </div>
        </el-dialog>
        <dialog-check ref="tagChild"
        />
        <qushi-dialog ref="child" :chartName="chartName"></qushi-dialog>
    </div>
</template>

<script>
    import dialogCheck from "@/views/layout/stateMonitor/factoryMonitor/components/dialogCheck";
    import qushiDialog from "../factoryMonitor/components/qushiDialog";
    import {GetPowerstationTypeList} from '@/api/factoryMonitor';
    // import headerNav from '@/components/headerNav'
    import windDetail from "@/components/windDetail/index";
    import windChartCom from "@/views/layout/stateMonitor/factoryMonitor/windPowerPlant/components/lineCharts.vue";
    import lightDetial from '@/components/lightDetial'
    import {
        GetEquipmentsListGroupByCompany,
        GetCompanyListGroupByRegion,
        GetRtValuesByTagName,
        GetGfEquipmentInfo
    } from "@api/stateMonitor";
    import {GetCurveValues} from '@/api/home'
    import dayjs from "dayjs";
    import HeaderMultiBtn from "../simpleMatrix/HeaderMultiBtn.vue";
    import {rtDataRefreshTime} from "../../../../config";


    export default {
        name: 'detailMatrix',//明细矩阵
        components: {
            // headerNav,
            windDetail,
            windChartCom,
            lightDetial,
            qushiDialog,
            dialogCheck,
            HeaderMultiBtn
        },
        data() {
            return {
                checkList: [],
                displaySet: false,
                activeNames: 1,
                units: [],
                unitDatas: [{flag: false, min: 0, max: 0, codex: 0}],
                color: ["#1985de", "#ff8300", "#06a746", "#3eede7", "#eb0f7c", "#dfdc0a", "#de0feb", "#cca4e3"],
                stationName: '',
                unpaidLists: ["容量(直流)MWp", "容量(交流)MW", "实时功率(MW)", "日发电量(MWh)", "日等效小时(h)"],
                titleList: [
                    {
                        color: "gray",
                        name: "通讯中断",
                        ic: 'icon-offline',
                        value1: "dj",
                        code: 'TXZDTS',


                    },
                    {
                        color: "red",
                        name: "设备停机",
                        value1: "yx",
                        ic: 'icon-gz-downtime',
                        code: 'SBTJTS',
                    },
                    {
                        color: "orange",
                        name: "带障运行",
                        value1: "gz",
                        ic: 'icon-jx-downtime',
                        code: 'DZYXTS',
                    },
                    {
                        color: "blue",
                        name: "正常运行",
                        ic: 'icon-normal-power',
                        value1: "jx",
                        code: 'ZCYXTS',
                    },

                ],
                act: '',
                titleLists: [
                    {
                        color: "green",
                        name: "待机",
                        value1: "dj",
                        code: 'DJTS',

                    },
                    {
                        color: "blue",
                        name: "并网",
                        value1: "yx",
                        code: 'YXTS',
                    },
                    {
                        color: "red",
                        name: "故障",
                        value1: "gz",
                        code: 'GZTJTS',
                    },
                    {
                        color: "orange",
                        name: "检修",
                        value1: "jx",
                        code: 'JXTJTS',
                    },
                    {
                        color: "pink",
                        name: "限电",
                        value1: "xd",
                        code: 'XDTS',
                    },
                    {
                        color: "write",
                        name: "受累",
                        value1: "sl",
                        code: 'SLTS',
                    },
                    {
                        color: "gray",
                        name: "离线",
                        value1: "lx",
                        code: 'TXZDTS',
                    },
                ],
                unpaidList: [
                    {
                        id: 1,
                        test: "欠发电量",
                        num1: 0,
                        key: "r0qf",
                        num3: "0%~5%",
                    },
                    {
                        id: 2,
                        test: "欠发电量",
                        num1: 0,
                        key: "r1qf",
                        num3: "5%~10%",
                    },
                    {
                        id: 3,
                        test: "欠发电量",
                        num1: 0,
                        key: "r2qf",
                        num3: "10%~20%",
                    },
                    {
                        id: 4,
                        test: "欠发电量",
                        num1: 0,
                        key: "r3qf",
                        num3: "20%~40%",
                    },
                    {
                        id: 5,
                        test: "欠发电量",
                        num1: 0,
                        key: "r4qf",
                        num3: ">40%",
                    },
                ],
                stse: [
                    {
                        statiomName: "实时功率",
                        stse: 'CZMC',
                        sts: "SSZGL",
                    },
                    {
                        statiomName: "日发电量",
                        stse: 'CZMC',
                        sts: "RFDL",

                    },
                    {
                        statiomName: "日等效小时",
                        stse: 'CZMC',
                        sts: "RLYXS",

                    },

                ],
                companyStse: [
                    {
                        statiomName: "实时功率",
                        stse: 'CMANAME',
                        sts: "SSZGL",
                    },
                    {
                        statiomName: "日发电量",
                        stse: 'CMANAME',
                        sts: "RFDL",

                    },
                    {
                        statiomName: "日等效小时",
                        stse: 'CMANAME',
                        sts: "RLYXS",

                    },

                ],

                stsed: '',
                subTitleDatas: [
                    {
                        text: "接入台数",
                        color: "#ffffff",
                        key: "JRTS",
                        ratio: 1,
                        fix: 0
                    },
                    {
                        text: "通讯中断",
                        color: "#606769",
                        key: "TXZDTS",
                        ratio: 1,
                        fix: 0
                    },
                    {
                        text: "设备停机",
                        color: "#BA3237",
                        key: "SBTJTS",
                        ratio: 1,
                        fix: 0
                    },
                    {
                        text: "带障运行",
                        color: "#E17D24",
                        key: "DZYXTS",
                        ratio: 1,
                        fix: 0
                    },

                    {
                        text: "正常运行",
                        color: "#1C99FF",
                        key: "ZCYXTS",
                        ratio: 1,
                        fix: 0
                    },


                    {
                        text: "容量(直流)",
                        color: "#9CA5A8",
                        key: "capacityJl",
                        ratio: 1000,
                        fix: 2
                    },
                    {
                        text: "容量(交流)",
                        color: "#9CA5A8",
                        key: "capacityZl",
                        ratio: 1000,
                        fix: 2
                    },

                    {
                        text: "实时功率",
                        color: "#9CA5A8",
                        key: "SSZGL",
                        ratio: 1000,
                        fix: 2
                    },
                    {
                        text: "日发电量",
                        color: "#9CA5A8",
                        key: "RFDL",
                        ratio: 1000,
                        fix: 2
                    },

                    {
                        text: "日等效小时",
                        color: "#9CA5A8",
                        key: "RLYXS",
                        ratio: 1,
                        fix: 0

                    },
                    {
                        text: "接入电压",
                        color: "#9CA5A8",
                        key: "JRDY",
                        ratio: 1,
                        fix: 0
                    },

                ],
                subTitleData: [
                    {
                        text: "接入台数",
                        color: "#ffffff",
                        key: "JRTS",
                        ratio: 1,
                        fix: 0
                    },
                    {
                        text: "通讯中断",
                        color: "#606769",
                        key: "TXZDTS",
                        ratio: 1,
                        fix: 0
                    },
                    {
                        text: "设备停机",
                        color: "#BA3237",
                        key: "SBTJTS",
                        ratio: 1,
                        fix: 0
                    },
                    {
                        text: "带障运行",
                        color: "#E17D24",
                        key: "DZYXTS",
                        ratio: 1,
                        fix: 0
                    },

                    {
                        text: "正常运行",
                        color: "#1C99FF",
                        key: "ZCYXTS",
                        ratio: 1,
                        fix: 0

                    },


                    {
                        text: "容量(直流)",
                        color: "#9CA5A8",
                        key: "capacityJl",
                        ratio: 1000,
                        fix: 2
                    },
                    {
                        text: "容量(交流)",
                        color: "#9CA5A8",
                        key: "capacityZl",
                        ratio: 1000,
                        fix: 2
                    },

                    {
                        text: "实时功率",
                        color: "#9CA5A8",
                        key: "SSZGL",
                        ratio: 1000,
                        fix: 2
                    },
                    {
                        text: "日发电量",
                        color: "#9CA5A8",
                        key: "RFDL",
                        ratio: 1000,
                        fix: 2
                    },

                    {
                        text: "日等效小时",
                        color: "#9CA5A8",
                        key: "RLYXS",
                        ratio: 1,
                        fix: 0
                    },
                ],
                carCode: '',
                iconList: [
                    'icon-normal-power',
                    'icon-jx-downtime',
                    'icon-gz-downtime',
                    'icon-offline',
                ],

                stationSet: '',
                stsee: [],
                colorList: [
                    "blue",
                    "orange",
                    "red",
                    "gray",
                ],
                status: 0,
                totle: 0,
                company: '',
                pointList: [],
                titleArr: [],
                showMatrixList: [],
                current: 'all',
                timer: null,
                param: {},
                pointArr: {},
                displayMatrix: false,
                wind: '',
                chartsData: [],
                dialogVisible: false,
                chartsDatas: [],
                dialogDetail: false,
                chartName: '对比曲线',
                displaySunMatrix: false,
                detailsValue: [],
                setTit: [],
                params: {},
                pointArrs: [],
                data5: [],
                changeCom: '',
                setTarget: [],
                electTarget: [],
                electType: '',

                // 趋势对比曲线
                cilent: "", //区分点击事件触发条件

            }
        },
        created() {
            this.getPowerstationTypeList()
        },
        methods: {


            // 点击趋势对比
            handDialog(val, de, item, aname) {
                if (de !== '') {
                    this.cilent = process.env.VUE_APP_DIALOG_POINT; //区分鼠标左右键点击
                    this.$refs.tagChild.getXY(val.type, val.name, de, aname + item.aname, item[val.dataTime])

                } else {
                    this.$message({
                        type: 'warning',
                        offset: 200,
                        center: true,
                        customClass: 's',
                        message: '指标测点为空'
                    });

                }
                event.preventDefault();
            },

            // 获取逆变器可选的指标
            async getPowerstationTypeList() {

                const data = await GetPowerstationTypeList({code: 'INUniformCodes'});
                if (data) {
                    data.push({
                        name: '转换率', type: 'ZHL', unite: 'zhUnit'
                    })
                    data.forEach(s => {
                        s.value = s.type
                        s.dataTime = s.type + 'Time'
                        if (s.name != '转换率') {
                            s.unite = s.type + '-UNIT'
                        }
                    })
                    this.setTarget = this.deepClone(data)
                    let list = [];
                    this.electTarget = data.splice(0, 4)
                    this.electTarget.forEach(s => {
                        list.push(s.type)

                    })
                    this.electType = list
                }

            },

            // 切换title
            setTitle() {
                this.displaySet = true

                let arr = []
                this.electTarget.forEach(s => {
                    arr.push(s.name)
                })
                this.checkList = arr
            },
            //点击取消重置选中项
            cancel() {
                this.displaySet = false
            },

            //点击确定，将checkList文字转为编码
            async tableRefresh() {
                if (this.checkList.length > 4) {
                    this.$message({
                        type: 'warning',
                        offset: 200,
                        center: true,
                        message: '请选择4个指标',

                    });
                } else if (this.checkList.length < 4) {
                    this.$message({
                        type: 'warning',
                        offset: 200,
                        center: true,
                        message: '请选择4个指标',

                    });
                } else if (this.checkList.length == 4) {
                    var arr = []
                    this.checkList.forEach(item => {

                        const obj = this.setTarget.find(s => {
                            return s.name == item
                        })

                        arr.push(obj);

                    })
                    this.electTarget = arr
                    let list = [];
                    arr.forEach(s => {
                        list.push(s.type)
                    })
                    this.electType = list
                    // this.current='all'
                    // this.act=''
                    this.getEquipmentsListGroupByCompany(this.carCode, this.param)
                    this.displaySet = false
                }
            },
            change(val) {
                if (val.length > 4) {
                    this.$message({
                        type: 'warning',
                        offset: 200,
                        center: true,
                        message: '最多选择4个指标',

                    });
                    this.checkList.pop()
                }

            },


            curveSwitchData(e) {
                this.value = e.showy
                var option = "{";
                this.detailsValue.forEach((value, index) => {
                    option += "'" + value.name + "'" + ":" + value.showy + ","
                })
                option = option.substring(0, option.length - 1)
                option += "}";
                var json = eval("(" + option + ")");
                this.$refs.windChartCom.changDateVisible(json)
            },
            tagCellStyle({row, column, rowIndex, columnIndex}) {
                if (!row.showy) {
                    return {color: '#525252', fontSize: '11px'};
                }
                if ((columnIndex == 0 || columnIndex == 1) && row.showy) {
                    return {color: this.color[rowIndex], fontSize: '13px'};
                } else {
                    return {padding: '6px 0px'};
                }
            },
            handleClickMatrix(val, type, name, index, valed, vale) {
                let obj = {
                    namesed: 'name'
                }
                this.displaySunMatrix = true
                setTimeout(() => {
                    this.$refs.lightDetial.render(obj, val.nemCode);

                }, 100);

            },
            async getPoint() {
                let pointList = []
                let arr = []
                if (this.company == undefined) {
                    this.company = ''
                }
                const data = await GetCompanyListGroupByRegion({
                    companyCode: this.company,
                    stationType: this.status,
                    stationCode: '',
                })


                if (data) {

                    this.data5 = this.deepClone(data?.LIST2)
                    for (const key in data.LIST1) {
                        if (key !== 'JRTS' && key !== 'NAME' && key !== 'JRDY' && key !== 'ANAME' && key !== 'CMCODE' && key !== 'NEMCODE' && key !== 'capacityJl' && key !== 'capacityZl') {
                            pointList.push(data.LIST1[key])
                        }
                    }
                    data.LIST2?.forEach(item => {
                        for (const key in item) {
                            if (key !== 'CZBM ' && key !== 'zjCapacityJl ' && key !== 'orgType' && key !== 'CMCODE ' && key !== 'JRDY' && key !== 'CZLX' && key !== 'CZMC' && key !== 'CZAMC' && key !== 'JRTS' && key !== 'CMANAME' && key !== 'CMNAME' && key !== 'COMPNAME' && key !== 'capacityJl' && key !== 'capacityZl') {
                                arr.push(item[key])
                            }
                        }

                    })

                    this.stsee = data.LIST2
                    this.pointArr = JSON.parse(JSON.stringify(data))
                    let param = arr.join('|') + '|' + pointList.join('|')
                    this.param = param
                    this.carCode = data?.LIST2[0]?.CMCODE
                    this.getEquipmentsListGroupByCompany(this.carCode, param)

                }
            },
            handleChange(val) {
                let arr = []
                let arr2 = 0
                if (this.data5.length != 0) {
                    val.forEach(l => {
                        arr.push(this.data5[l - 1].CMCODE)
                    })
                    this.carCode = arr.toString()
                    arr.forEach(z => {
                        this.setTit.forEach(s => {
                            if (z == s.CMCODE) {
                                arr2++
                            }

                        })
                    })
                    if (arr.length != arr2) {
                        this.getEquipmentsListGroupByCompany(this.carCode, this.param)
                    }
                }

            },
            async getEquipmentsListGroupByCompany(val, par) {
                let pointList = []

                if (this.company == '' || this.company.length == 1) {
                    this.changeCom = val
                } else {
                    this.changeCom = this.company
                }
                const data = await GetEquipmentsListGroupByCompany({
                    companyCode: this.changeCom,
                    stationType: this.status,
                    stationCode: this.stationSet,
                })
                if (data) {
                    let arr3 = []
                    this.electTarget.forEach(s => {
                        arr3.push(s.value)
                    })
                    let arr2 = ['SBZT', 'AIG007', 'AIG010']
                    let arr = arr3.concat(arr2);

                    data.LISTS?.forEach(items => {
                        items.list?.forEach(item => {
                            for (const key in item) {
                                if (key !== 'CZBM ' && key !== 'CMCODE' && key !== 'JRDY' && key !== 'CZLX' && key !== 'CZMC' && key != 'CZAMC' && key != 'JRDYUNIT' && key !== 'JRTS' && key != 'COMPNAME' && key != 'capacityJl' && key != 'capacityZl') {
                                    if (key == 'lists') {
                                        item.lists.forEach(val => {
                                            arr.forEach(z => {
                                                for (const keys in val) {
                                                    if (keys === z) {
                                                        pointList.push(val[keys])
                                                    }

                                                }
                                            })
                                        })
                                    } else {
                                        pointList.push(item[key])
                                    }
                                }
                            }
                        })
                    })


                    this.setTit = data.LISTS
                    this.pointArrs = JSON.parse(JSON.stringify(data))
                    let param = pointList.join('|')
                    this.params = param + par
                    this.GetRtValuesByTagName(this.params)
                }
            },
            async GetRtValuesByTagName(param) {
                let data = JSON.parse(JSON.stringify(this.pointArr))
                let datas = JSON.parse(JSON.stringify(this.pointArrs))
                datas.LISTS.forEach((s, ind) => {
                    data.LIST2?.forEach((z, index) => {
                        if (z.CMCODE == s.CMCODE) {
                            data.LIST2[index].LISTS = datas.LISTS[ind].list
                        }
                    })
                })

                const lists = await GetRtValuesByTagName(param)
                this.dataDeal(data.LIST1, data?.LIST2, lists)
                clearInterval(this.timer);
                this.timer = null;
                this.timer = setInterval(() => {
                    this.GetRtValuesByTagName(param)
                }, rtDataRefreshTime);
            },
            dataDeal(titleList, matrixList, data) {
                for (const key in titleList) {
                    titleList[key] = data.find(val => val.tagName === titleList[key]) ? data.find(val => val.tagName === titleList[key])?.value : titleList[key]
                }
                let arr3 = []
                this.electTarget.forEach(s => {
                    arr3.push(s.value)
                })
                let arr2 = ['SBZT', 'AIG007', 'AIG010']
                let arr = arr3.concat(arr2);
                matrixList?.forEach(items => {
                    for (const key in items) {
                        if (key !== 'CMCODE') {
                            items[key] = data.find(val => val.tagName === items[key]) ? data.find(val => val.tagName === items[key])?.value : items[key]
                        }
                    }

                    items.LISTS?.forEach(item => {
                        for (const key in item) {
                            if (key === 'lists') {
                                item[key].forEach(val => {
                                    arr.forEach(d => {
                                        let dataValue = data.find(vals => vals.tagName === val[d])
                                        if (dataValue) {
                                            if (d === 'SBZT') {
                                                val[d + 'tagName'] = dataValue?.tagName
                                                val[d + 'Time'] = dataValue?.dateTime
                                                val[d] = dataValue?.value
                                            } else {
                                                val[d + 'tagName'] = dataValue?.tagName
                                                val[d + 'Time'] = dataValue?.dateTime
                                                val[d + 'Value'] = dataValue?.value
                                            }

                                        }
                                    })

                                    val.ZHLValue = (val.AIG007 / val.AIG010) * 100 ? (val.AIG007 / val.AIG010) * 100 : ''
                                    val.ZHLdateTime = val.AIG010dateTime
                                    val.zhUnit = '%'
                                })
                            } else {
                                if (key !== "CZBM") {
                                    item[key] = data.find(val => val.tagName === item[key]) ? data.find(val => val.tagName === item[key])?.value : item[key]
                                }
                            }
                        }
                    })
                })

                this.titleArr = titleList
                this.matrixList = matrixList


                this.handleClickWind()
            },
            handleClickWind() {

                if (this.matrixList != undefined) {

                    this.showMatrixList = JSON.parse(JSON.stringify(this.matrixList))

                }

                if (this.current !== 'all') {

                    // this.changeCom=this.company
                    // this.activeNames=[0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15]
                    this.showMatrixList.forEach(item => {
                        item.list = []
                    })
                    switch (this.current) {
                        case 'dj':
                            this.matrixList?.forEach((val, index) => {
                                val.LISTS?.forEach((ls, indexe) => {
                                    this.showMatrixList[index].LISTS[indexe].lists = []
                                    ls.lists?.forEach(item => {
                                        if (item.SBZT == '') {
                                            item.SBZT = 3
                                        }
                                        if (Number(item.SBZT.toFixed(0)) === 3) {
                                            this.showMatrixList[index].LISTS[indexe].lists.push(item)
                                        }
                                    })
                                })

                            })
                            break;

                        case 'yx':
                            this.matrixList?.forEach((val, index) => {
                                val.LISTS?.forEach((ls, indexe) => {
                                    this.showMatrixList[index].LISTS[indexe].lists = []
                                    ls.lists.forEach(item => {
                                        if (item.SBZT == '') {
                                            item.SBZT = 3
                                        }
                                        if (Number(item.SBZT.toFixed(0)) === 2) {

                                            this.showMatrixList[index].LISTS[indexe].lists.push(item)

                                        }
                                    })
                                })
                            })

                            break;


                        case 'gz':
                            this.matrixList?.forEach((val, index) => {
                                val.LISTS?.forEach((ls, indexe) => {
                                    this.showMatrixList[index].LISTS[indexe].lists = []
                                    ls.lists.forEach(item => {
                                        if (item.SBZT == '') {
                                            item.SBZT = 3
                                        }
                                        if (Number(item.SBZT.toFixed(0)) === 1) {
                                            this.showMatrixList[index].LISTS[indexe].lists.push(item)
                                        }
                                    })
                                })

                            })
                            break;


                        case 'jx':
                            this.matrixList?.forEach((val, index) => {
                                val.LISTS?.forEach((ls, indexe) => {
                                    this.showMatrixList[index].LISTS[indexe].lists = []
                                    ls.lists.forEach(item => {
                                        if (item.SBZT == '') {
                                            item.SBZT = 3
                                        }
                                        if (Number(item.SBZT.toFixed(0)) === 0) {
                                            this.showMatrixList[index].LISTS[indexe].lists.push(item)
                                        }
                                    })
                                })
                            })
                            break;

                    }

                }
            },
            handleClick(val) {
                this.act = val
                this.current = val
                this.handleClickWind()
            },
            onChange({type, companys, stations, area}) {
                this.firstRender(type, companys, stations, area, 'all')
            },
            firstRender(val, company, stationSet, activeNode, a) {
                this.current = 'all'
                this.status = val
                this.company = company
                this.stationSet = stationSet;
                if (company != "" || this.company.length > 1) {
                    this.activeNames = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13]
                } else {
                    this.activeNames = 1
                }
                this.getPoint()
            },
            handleCurveClicks(index, length) {

                if (length >= 7) {
                    let s = this.deepClone(this.stsee[index]);
                    let y = this.deepClone(this.companyStse)
                    y?.forEach(vals => {
                        for (let key in vals) {
                            for (let k in s) {
                                if (vals[key] == k) {
                                    vals[key] = s[k]
                                }
                            }
                        }
                    })

                    this.$refs.child.openCurvDatas(y)
                }
            },

            handleCurveClick(index, vale, indexs, leng) {
                if (leng >= 7 && leng != 10) {
                    let s;
                    if (this.setTit.length == 1) {
                        s = this.deepClone(this.setTit[0].list[indexs])

                    } else {
                        s = this.deepClone(this.setTit[index].list[indexs])
                    }

                    let y = this.deepClone(this.stse)

                    y?.forEach(vals => {
                        for (let key in vals) {
                            for (let k in s) {
                                if (vals[key] == k) {
                                    vals[key] = s[k]
                                }
                            }
                        }
                    })


                    this.stsed = y
                    this.$refs.child.openCurvDatas(this.stsed)
                }
            },
            handleDetailClick(index, indexe, leng) {
                let s;
                if (this.setTit.length == 1) {
                    s = this.deepClone(this.setTit[0].list[index].lists[indexe])

                } else {
                    s = this.deepClone(this.setTit[leng].list[index].lists[indexe])
                }

                let y = this.deepClone(this.electTarget)

                y?.forEach((val, ine) => {
                    if (val.name == '转换率') {
                        y.splice(ine)
                    }
                    val.statiomName = val.name
                    val.sts = val.type
                    val.stse = 'stse'
                    for (let key in val) {
                        for (let k in s) {
                            if (val[key] == k) {
                                val[key] = s[k]
                            } else if (val[key] == 'stse') {
                                if (this.setTit.length == 1) {
                                    val[key] = this.setTit[0].list[index].CZAMC + s.name

                                } else {
                                    val[key] = this.setTit[leng].list[index].CZAMC + s.name
                                }

                            }
                        }
                    }
                })

                this.$refs.child.openCurvDatas(y, 2)
            },

            deepClone(ob) {
                var obj = JSON.stringify(ob)
                var objClone = JSON.parse(obj)
                return objClone
            },

        },
        unmounted() {
            clearInterval(this.timer);
            this.timer = null;
        },
    }

</script>

<style lang="less" scoped>
  /deep/ .el-collapse {
    div {
      &:first-of-type {
        margin-top: 0;
      }
    }
  }

  .matrixs {
    /deep/ .el-icon-arrow-right:before {
      content: '';
    }

    /deep/ .el-icon-arrow-right {
      width: 22px;
      height: 17px;
      top: 17px;
      background: url("../../../../assets/img/images/zuLeft.png") no-repeat;

    }

    /deep/ .el-collapse-item__arrow.is-active {
      transform: rotate(0);
      top: 15px;
      background: url("../../../../assets/img/images/zuTop.png") no-repeat;
    }
  }


  .simpleMatrix {
    padding: 0 18px;
    height: 100%;
  }

  .footerButton {
    position: absolute;
    right: 20px;
    bottom: 5px;

    .el-button:first-child {
      background-color: rgba(0, 70, 199, 0.2) !important;
      color: #B3B3B3;
      border-color: transparent;
    }
  }

  .unpaid_left {
    position: absolute;
    right: 113px;
    top: 0;
    width: 1px;
    height: 61px;
    background: #000000;
  }

  .unpaid_lefts {
    position: absolute;
    right: 111px;
    top: 0;
    width: 1px;
    height: 61px;
    background: rgba(28, 153, 255, 0.2);
  }

  .unpaid-tit {
    position: absolute;
    right: 2px;
    top: .5px;
    width: 113px !important;
    border-radius: 0 4px 4px 0;
    height: 1px !important;
    background: linear-gradient(to left, rgba(28, 153, 255, .8), rgba(0, 70, 199, .05));
  }

  .unpaid-tits {
    position: absolute;
    right: 2px;
    bottom: 3px;
    width: 113px !important;
    border-radius: 0 4px 4px 0;
    height: 1px !important;
    background: linear-gradient(to left, rgba(28, 153, 255, .8), rgba(0, 70, 199, .05));
  }

  .updownTits {
    position: absolute;
    right: 0;
    top: 0;
    color: #1C99FF;
    font-size: 14px;
    padding: 0 !important;
    width: 114px !important;
    height: 62px !important;
    font-family: Microsoft YaHei;
    border-radius: 0 4px 4px 0;
    //border: 1px solid rgba(225, 225, 225, .3) !important;
    border-right: 1px solid rgba(28, 153, 255, .8) !important;
    background: linear-gradient(to right, rgba(28, 153, 255, 0), rgba(28, 153, 255, .1), rgba(28, 108, 255, .3));

  }

  .lineContent {
    width: 1px;
    height: 51px;
    background: #333333;
    margin-left: -35px;
    margin-right: 52px;
    position: relative;

    &:after {
      content: '';
      position: absolute;
      top: -3px;
      left: -3px;
      width: 7px;
      height: 7px;
      border: 1px solid #333333;
    }

    &:before {
      content: '';
      position: absolute;
      bottom: -3px;
      left: -3px;
      width: 7px;
      height: 7px;
      border: 1px solid #333333;
    }
  }


  ::v-deep .el-collapse {

    border: none !important;


    .el-icon-arrow-right {
      margin: 0;
    }

    .el-collapse-item__arrow {
      position: absolute;
      left: 132px;
      color: #1C99FF !important;
    }


    .el-collapse-item__content {
      padding-bottom: 1px;

    }

    .el-collapse-item__wrap {
      background-color: transparent !important;
      border: none !important;
    }

    .el-collapse-item__header {
      cursor: auto;
      background-color: transparent !important;
      border: none !important;
      height: 48px !important;
      margin-bottom: 5px !important;
      line-height: 48px !important;
    }

    .el-collapse-item {
    }
  }

  .unpaid {
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 39.5% !important;
    height: 65px !important;
    position: relative;
    right: 1%;
    font-size: 14px;

    ul {
      width: 100%;

      .unpaid_num {
        width: 99%;
        height: 35px;
        line-height: 18px;
        display: flex;

        justify-content: space-between;

        div {
          width: 111px;
          text-align: center;
          height: 11px;
          margin-left: 2px;
          font-size: 16px;
          text-align: center;
          font-family: 'Bicubik';
          color: #FFFFFF;
        }
      }

      .unpaid_name {
        width: 100%;
        height: 31px;
        line-height: 31px;
        display: flex;

        justify-content: space-between;

        div {
          width: 111px;
          height: 31px;
          margin-left: 2px;
          text-align: center;

        }
      }
    }


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

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

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

      .progress-item {
        width: 24%;
        height: 3px;
        background-color: #05BB4C;
        margin-right: 2px;
      }
    }
  }

  .el-cole {
    width: 134px;
    height: 65px;

    .yuan:first-child {
      height: 31px;
      width: 135px;
      margin-left: -10px;
      margin-top: -3px;
    }

    .yuan:last-child {
      height: 31px;
      width: 135px;
      margin-left: -10px;
      margin-top: -3px;
    }
  }

  .el-cole:first-child {
    display: flex;
    width: 180px;
    flex: unset;
    color: #B3B3B3;
    font-family: 思源黑体;

    img {
      margin-right: 20px;
      margin-bottom: 10px;
    }

    div {
      margin-top: 10px;
      font-size: 14px;

    }

    p {
      font-size: 16px;
      font-family: Bicubik;
      color: #FFFFFF;
      width: 50px;
      text-align: center;
      position: absolute;
      top: 31px;
      left: 72px;
      margin-top: 2px;
    }
  }

  .el-cole:last-child {
    padding-left: 0;
  }


  .el-cole:not(:first-child) {
    flex: 1;
    color: #1C99FF;
    text-align: center;

    .active-b {
      width: 96px;
      height: 52px;
      padding: 6px;
      margin-top: -5px;
      padding-left: 10px;
      position: relative;
      border: 1px solid transparent;

      .yuan {
        font-family: AgencyFB-Reg;
        line-height: 20px;
        display: flex;

        > p:first-of-type {

          width: 13px;
          height: 13px;
          border: 1px solid transparent;
          position: absolute;
          top: 9px;
          left: 10px;

        }

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


        }


        .circle {
          display: inline-block;
          width: 5px;
          height: 5px;
          vertical-align: middle;
          margin-right: 10px;
          position: absolute;
          top: 3.5px;
          left: -4px;

        }

      }

      .disCircles {
        position: relative;
      }


      > div:last-child {
        font-size: 16px;
        font-family: Bicubik;
        text-align: right;
        padding-right: 6px;
      }
    }
  }


  .checkIcon {
    position: absolute;
    left: 50px;
    top: 8px;
    font-size: 20px;
    color: #929396
  }

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

    .body-title {
      display: flex;
      flex-direction: row;
      align-items: center;
      width: 100%;
      position: relative;
      //padding-top: 10px;
      height: 64px;
      border-radius: 4px;
      margin-bottom: 5px;
      background-color: rgba(0, 0, 0, .45);

      .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: 55px;
          margin-bottom: 10px;
        }

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

          .nums {
            font-size: 16px;
            font-family: Bicubik;
            font-weight: 400;
            color: #FFFFFF;

          }

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

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

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

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

          20% {
            top: -1px
          }

          40% {
            top: -2px
          }

          80% {
            top: -1px
          }

          100% {
            top: 0px
          }

        }
      }

      .base-inf {
        display: flex;
        flex-direction: row;
        align-items: center;
        height: 100%;
        width: 34%;
        font-size: 14px;
        margin-left: -14px;


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

        }
      }

      .unpaid {
        display: flex;
        flex-direction: row;
        align-items: center;
        width: 40%;
        margin-top: 15px;
        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%;
            display: flex;
            flex-direction: row-reverse;
            font-size: 14px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: #B3B3B3;
          }
        }

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

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

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

          .progress-item {
            width: 24%;
            height: 3px;
            background-color: #05BB4C;
            margin-right: 2px;
          }
        }
      }
    }

    .matrixs {
      width: 100%;
      background-color: rgba(0, 0, 0, 0.45);
      margin-top: 5px;
      padding: 0 10px;

      .matrix-titles {
        display: flex;
        flex-direction: row;
        align-items: center;
        width: 100%;
        height: 32px;
        font-size: 15px;
        font-family: SourceHanSansCN;
        font-weight: 400;
        color: #FFFFFF;
        padding: 0 0 0 50px;

        .icon-enterprise {
          font-size: 15px;
          position: relative;
          top: 2px;
        }

        &.active {
          color: #FC8004;
        }

        .station-name {
          margin-left: 5px;
          margin-right: 39px;
          width: 96px;
        }

        .indicator {
          display: flex;
          flex-direction: row;
          justify-content: space-between;
          width: 84%;
          height: 100%;


        }

        .sub-title-item {
          display: flex;
          flex-direction: row;
          align-items: center;
          // justify-content: space-between;
          width: 8%;
          height: 100%;
          font-size: 14px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          color: #B3B3B3;

          &:nth-of-type(4) {
            //margin-left: -5px;
          }

          &:nth-of-type(6) {
            //margin-left: -5px;
          }

          &:nth-of-type(8) {
            //margin-left: -5px;
          }

          &:nth-of-type(9) {
            //margin-left: 45px;
          }

          &:last-of-type {
            //margin-left: 47px;
          }

          &.active {
            cursor: pointer;
          }

          &.active1 {
            width: 5%;
          }

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

          }
        }
      }

      .matrix-title {

        display: flex;
        flex-direction: row;
        align-items: center;
        width: 100%;
        height: 38px;
        background: rgba(9, 30, 69, 0.6);
        border: 1px solid #072866;
        border-radius: 4px;
        font-size: 13px;
        font-family: SourceHanSansCN;
        font-weight: 400;
        color: #1C99FF;
        padding: 0 0 0 40px;
        position: relative;

        .matrix-Left {
          position: absolute;
          width: 1px;
          height: 30px;
          left: 0;
          top: 0;
          background: linear-gradient(to bottom, rgba(0, 70, 199, 1), rgba(0, 70, 199, 0));
        }

        .matrix-top {
          position: absolute;
          width: 30px;
          height: 1px;
          left: 0;
          top: 0;
          background: linear-gradient(to right, rgba(0, 70, 199, 1), rgba(0, 70, 199, 0));
        }

        .icon-photovoltaic {
          margin-right: 2px;
          font-size: 15px;
          position: relative;
          top: 0;
          left: -25px
        }

        &.active {
          color: #FC8004;
        }

        .station-name {
          font-size: 15px;
          margin-left: -15px;
          width: 125px;
          white-space: nowrap;
        }

        .indicator {
          display: flex;
          flex-direction: row;
          align-items: center;
          justify-content: space-between;
          width: 100%;
          height: 100%;
          margin-left: 8px;


          &:first-of-type {
            margin-left: 5px;
          }
        }

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

          &.active {
            cursor: pointer;
          }

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

          .sub-value {
            font-size: 15px;
            font-family: Bicubik;
            font-weight: 400;
            margin-left: 5px;
            margin-top: 2px;
          }
        }
      }

      .matrix-list {
        display: grid;
        justify-content: space-between;
        grid-template-columns: repeat(auto-fill, 8%);
        width: 100%;
        margin: 5px 0;
        padding-right: 6px;

        .matrix-card:hover .info {
          transform: translateZ(40px);
        }

        .matrix-card {

          perspective: 800px;
          display: flex;
          flex-direction: column;
          width: 100%;
          height: 114px;
          margin-left: 1px;
          margin-right: 1px;
          margin-bottom: 2px;

          .info {

            width: 100%;
            height: 114px;
            margin-right: 4px;


            .card-left {
              text-align: center;
              width: 100%;
              height: 33px;
              border-left: 1px solid #474D58;
              border-right: 1px solid #474D58;
              font-size: 14px;
              line-height: 25px;
              color: #ffffff;
              background: #474d58;
              box-shadow: 0px -7px 7px #2d3342 inset;
              border-radius: 10px 10px 0 0;

              .card-name {
                font-size: 14px;
                font-family: Arial;
                font-weight: 400;
                margin-top: 17px;
                margin-bottom: 1px;
              }
            }

            .card-right {
              width: 100%;
              height: 90px;
              color: #ffffff;
              background: #2d3342;
              border: 1px solid #303749;
              border-radius: 7px 7px 10px 10px;
              display: flex;
              flex-direction: column;
              align-content: space-between;
              padding: 0px 8px;
              position: relative;
              margin-top: -12px;
              padding-top: 7px;

              .right-item {
                display: flex;
                flex-direction: row;
                align-items: center;
                height: 19px;
                width: 100%;

                div:first-of-type {
                  font-family: Microsoft YaHei;
                  width: 80px;
                  white-space: nowrap;
                  overflow: hidden;
                  color: rgba(179, 179, 179, 1);
                  text-overflow: ellipsis;
                }

                .right-value {
                  width: 50px;
                  font-size: 12px;
                  color: #FFFFFF;
                  font-family: Arial;

                }

                .right-unite {
                  font-size: 12px;
                  margin-left: -5px;
                  color: #B3B3B3;
                }
              }

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


          &.blue {
            .info {
              .card-left {
                background: rgba(12, 71, 149, 1);
                border-left: 1px solid #0C4795;
                border-right: 1px solid #0C4795;
              }
            }
          }


          &.red {
            .info {
              .card-left {
                background: rgba(139, 46, 51, 1);
                border-left: 1px solid #8B2E33;
                border-right: 1px solid #8B2E33;
              }
            }
          }

          &.orange {

            .info {
              .card-left {
                background: rgba(186, 93, 10, 1);
                border-left: 1px solid #BA5D0A;
                border-right: 1px solid #BA5D0A;
              }
            }
          }


          &.gray {

            .info {
              .card-left {
                background: rgba(97, 105, 119, 1);
                border-left: 1px solid #474D58;
                border-right: 1px solid #474D58;
              }
            }
          }
        }

      }
    }

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

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


  .el-col:last-child {
    padding-left: 0;
  }


  .el-cole {
    flex: 1;
    color: #1C99FF;
    height: 40px;
    text-align: center;

    .active-b {
      width: 96px;
      height: 52px;
      padding: 6px;
      margin-top: -5px;
      padding-left: 10px;
      margin-left: -20px;
      position: relative;
      border: 1px solid transparent;

      .yuan {
        font-family: AgencyFB-Reg;
        line-height: 20px;
        display: flex;

        > p:first-of-type {

          width: 13px;
          height: 13px;
          border: 1px solid transparent;
          position: absolute;
          top: 9px;
          left: 14px;

        }

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

        }


        .circle {
          display: inline-block;
          width: 5px;
          height: 5px;
          vertical-align: middle;
          margin-right: 10px;
          position: absolute;
          top: 4px;
          left: -4px;

        }
      }

      > div:last-child {
        font-size: 16px;
        font-family: Bicubik;
        text-align: center;
        margin-left: 2px;
      }
    }
  }

  .el-cole:nth-child(2) {

    color: #05BB4C;

    .active_bor {


      .left_p {
        width: 16px;
        height: 20px;
        border-left: 1px solid #333333;
        border-bottom: 1px solid #333333;
        position: absolute;
        left: 8px;
        top: 17px
      }


    }


  }

  .el-cole:nth-child(5) {
    color: #1C99FF;

    .active_bor {


      .left_p {
        width: 16px;
        height: 20px;
        border-left: 1px solid #333333;
        border-bottom: 1px solid #333333;
        position: absolute;
        left: 8px;
        top: 17px
      }

      .circles {
        display: inline-block;
        width: 5px;
        height: 5px;
        vertical-align: middle;
        margin-right: 10px;
        position: absolute;
        top: 8px;
        left: 13px;
        background-color: #1C99FF;

      }


    }

    .circle {
      background-color: #1C99FF;
    }

  }

  .el-cole:nth-child(3) {
    color: #BA3237;

    .active_bor {
      .circles {
        display: inline-block;
        width: 5px;
        height: 5px;
        vertical-align: middle;
        margin-right: 10px;
        position: absolute;
        top: 8px;
        left: 13px;
        background-color: #BA3237;

      }

      .left_p {
        width: 16px;
        height: 20px;
        border-left: 1px solid #333333;
        border-bottom: 1px solid #333333;
        position: absolute;
        left: 8px;
        top: 17px
      }


    }

    .circle {
      background-color: #BA3237;
    }

  }

  .el-cole:nth-child(4) {
    color: #E17D24;

    .active_bor {
      .circles {
        display: inline-block;
        width: 5px;
        height: 5px;
        vertical-align: middle;
        margin-right: 10px;
        position: absolute;
        top: 8px;
        left: 13px;
        background-color: #E17D24;

      }

      .left_p {
        width: 16px;
        height: 20px;
        border-left: 1px solid #333333;
        border-bottom: 1px solid #333333;
        position: absolute;
        left: 8px;
        top: 17px
      }


    }

    .circle {
      background-color: #E17D24;
    }

  }

  .el-cole:nth-child(6) {

    color: #C530C8;

    .active_bor {


      .left_p {
        width: 16px;
        height: 20px;
        border-left: 1px solid #333333;
        border-bottom: 1px solid #333333;
        position: absolute;
        left: 8px;
        top: 17px
      }


    }


    .circle {
      background-color: #C530C8;
    }

    .circles {
      background-color: #C530C8;
    }
  }

  .el-cole:nth-child(7) {
    color: rgba(255, 255, 255, 1);


    .active_bor {


      .left_p {
        width: 16px;
        height: 20px;
        border-left: 1px solid #333333;
        border-bottom: 1px solid #333333;
        position: absolute;
        left: 8px;
        top: 17px
      }


    }

    .circle {
      background-color: rgba(255, 255, 255, 1);
    }

    .circles {
      background-color: rgba(255, 255, 255, 1);
    }
  }

  .el-cole:nth-child(2) {
    color: #606769;

    .active_bor {

      .circles {
        display: inline-block;
        width: 5px;
        height: 5px;
        vertical-align: middle;
        margin-right: 10px;
        position: absolute;
        top: 8px;
        left: 13px;
        background-color: #606769;

      }

      .left_p {
        width: 16px;
        height: 20px;
        border-left: 1px solid #333333;
        border-bottom: 1px solid #333333;
        position: absolute;
        left: 8px;
        top: 17px
      }

    }

    .active-b {
      .circle {
        background-color: #606769;
      }

    }
  }
</style>