fd_dwgz_zhyw_nx/src/views/SandTable/SandTable.vue

<template>
<!-- padding: 0 10px; -->
    <div style="width: 100%;height:100%;">
        <div class="sand-table" id="sandTable" v-if="$route.path === '/integratedAlarm'">
            <!-- <img :src="require('@assets/png/3dcloud.png')" class="i3dcloud" /> -->
            <StBack></StBack>
            <ThreeModel1 class="three-model-layer" :data="mapSource" @when="when" @clickMapItem="clickMapItem">
            </ThreeModel1>
            <!-- <img :src="require('@/assets/png/3dback.png')" class="i3dback" /> -->
             <!-- v-if="showPanel" -->
            <!-- 第一机组 -->
            <div class="sand-table-left">
                <PanelSand class="left-panel" :style="isFullScreen ? 'height: 26vh' : 'height: 27vh'" title="停机信息-中车">
                    <template v-slot:tools>
                        <div class="exchange" @click="changeBjSwitch('left')">
                            <span :class="bjSwitch ? 'gray' : 'white'">故障</span>
                            <i class="blue fa fa-exchange mg-l-8 mg-r-8"></i>
                            <span :class="bjSwitch ? 'white' : 'gray'">检修</span>
                        </div>
                    </template>
                    <RankTable :data="selsZC" @rowClick="clickStopRow('left')" height="20vh"></RankTable>
                </PanelSand>
                <PanelSandToolbar class="right-panel mg-t-16" :style="isFullScreen ? 'height: 19vh' : 'height: 22vh'" title="预警情况">
                    <template v-slot:tools>
                        <div class="exchange">
                            <span :class="warnSwitch === 'z' ? 'white' : 'gray'" @click="changeWarnSwitch('z')">周</span>
                            <i class="blue fa fa-exchange mg-l-8 mg-r-8"></i>
                            <span :class="warnSwitch === 'y' ? 'white' : 'gray'" @click="changeWarnSwitch('y')">月</span>
                            <i class="blue fa fa-exchange mg-l-8 mg-r-8"></i>
                            <span :class="warnSwitch === 'n' ? 'white' : 'gray'" @click="changeWarnSwitch('n')">年</span>
                        </div>
                    </template>
                    <template v-slot:toolsL>
                        <div class="exchange">
                            <span :class="warnPC ? 'white' : 'gray'" @click="changeWarnPC('left')">频次</span>
                            <i class="blue fa fa-exchange mg-l-8 mg-r-8"></i>
                            <span :class="warnPC ? 'gray' : 'white'" @click="changeWarnPC('left')">时长</span>
                        </div>
                    </template>
                    <template v-slot:default>
                        <RadarPieChart height="18vh" :list="warnChartDataZC" :title="warnPC ? '预警频次情况' : '预警时长情况'" />
                    </template>
                </PanelSandToolbar>
                <PanelSandToolbar class="right-panel mg-t-16" :style="isFullScreen ? 'height: 19vh' : 'height: 22vh'" title="故障情况" @click="clickTime('WT2000D121H85')" style="cursor: pointer">
                    <template v-slot:tools>
                        <div class="exchange">
                            <span :class="probSwitch === 'z' ? 'white' : 'gray'" @click.stop="changeProbSwitch('z')">周</span>
                            <i class="blue fa fa-exchange mg-l-8 mg-r-8"></i>
                            <span :class="probSwitch === 'y' ? 'white' : 'gray'" @click.stop="changeProbSwitch('y')">月</span>
                            <i class="blue fa fa-exchange mg-l-8 mg-r-8"></i>
                            <span :class="probSwitch === 'n' ? 'white' : 'gray'" @click.stop="changeProbSwitch('n')">年</span>
                        </div>
                    </template>
                    <template v-slot:toolsL>
                        <div class="exchange">
                            <span :class="probPC ? 'white' : 'gray'" @click.stop="changeProbPC('left')">频次</span>
                            <i class="blue fa fa-exchange mg-l-8 mg-r-8"></i>
                            <span :class="probPC ? 'gray' : 'white'" @click.stop="changeProbPC('left')">时长</span>
                        </div>
                    </template>
                    <template v-slot:default>
                        <!-- <RadarPieChartCom height="18vh" :list="probChartData" title="故障情况" /> -->
                        <RadarPieChart height="18vh" :list="probChartDataZC" :title="probPC ? '故障频次情况' : '故障时长情况'" />
                    </template>
                </PanelSandToolbar>
            </div>
            <!-- <div></div>
             v-if="showPanel" -->
             <!-- 第二机组 -->
            <div class="sand-table-right">
                <PanelSand class="left-panel" title="停机信息-联合动力">
                    <template v-slot:tools>
                        <div class="exchange" @click="changeBjSwitch('right')">
                            <span :class="bjSwitch2 ? 'gray' : 'white'">故障</span>
                            <i class="blue fa fa-exchange mg-l-8 mg-r-8"></i>
                            <span :class="bjSwitch2 ? 'white' : 'gray'">检修</span>
                        </div>
                    </template>
                    <RankTable :data="selsLH" @rowClick="clickStopRow('right')" height="20vh"></RankTable>
                </PanelSand>
                <PanelSandToolbar class="right-panel mg-t-16" :style="isFullScreen ? 'height: 19vh' : 'height: 22vh'" title="预警情况">
                    <template v-slot:tools>
                        <div class="exchange">
                            <span :class="warnSwitch2 === 'z' ? 'white' : 'gray'" @click="changeWarnSwitch2('z')">周</span>
                            <i class="blue fa fa-exchange mg-l-8 mg-r-8"></i>
                            <span :class="warnSwitch2 === 'y' ? 'white' : 'gray'" @click="changeWarnSwitch2('y')">月</span>
                            <i class="blue fa fa-exchange mg-l-8 mg-r-8"></i>
                            <span :class="warnSwitch2 === 'n' ? 'white' : 'gray'" @click="changeWarnSwitch2('n')">年</span>
                        </div>
                    </template>
                    <template v-slot:toolsL>
                        <div class="exchange">
                            <span :class="warnPC2 ? 'white' : 'gray'" @click="changeWarnPC('right')">频次</span>
                            <i class="blue fa fa-exchange mg-l-8 mg-r-8"></i>
                            <span :class="warnPC2 ? 'gray' : 'white'" @click="changeWarnPC('right')">时长</span>
                        </div>
                    </template>
                    <template v-slot:default>
                        <RadarPieChart height="18vh" :list="warnChartDataLH" :title="warnPC2 ? '预警频次情况' : '预警时长情况'" />
                    </template>
                </PanelSandToolbar>
                <PanelSandToolbar class="right-panel mg-t-16" :style="isFullScreen ? 'height: 19vh' : 'height: 22vh'" title="故障情况" @click="clickTime('UP2000-130')">
                    <template v-slot:tools>
                        <div class="exchange">
                            <span :class="probSwitch2 === 'z' ? 'white' : 'gray'" @click.stop="changeProbSwitch2('z')">周</span>
                            <i class="blue fa fa-exchange mg-l-8 mg-r-8"></i>
                            <span :class="probSwitch2 === 'y' ? 'white' : 'gray'" @click.stop="changeProbSwitch2('y')">月</span>
                            <i class="blue fa fa-exchange mg-l-8 mg-r-8"></i>
                            <span :class="probSwitch2 === 'n' ? 'white' : 'gray'" @click.stop="changeProbSwitch2('n')">年</span>
                        </div>
                    </template>
                    <template v-slot:toolsL>
                        <div class="exchange">
                            <span :class="probPC2 ? 'white' : 'gray'" @click.stop="changeProbPC('right')">频次</span>
                            <i class="blue fa fa-exchange mg-l-8 mg-r-8"></i>
                            <span :class="probPC2 ? 'gray' : 'white'" @click.stop="changeProbPC('right')">时长</span>
                        </div>
                    </template>
                    <template v-slot:default>
                        <!-- <RadarPieChartCom height="18vh" :list="probChartData" title="故障情况" style="cursor: pointer" /> -->
                        <RadarPieChart height="18vh" :list="probChartDataLH" :title="probPC ? '故障频次情况' : '故障时长情况'" />
                    </template>
                </PanelSandToolbar>
            </div>
            <div class="footer" :style="isFullScreen ? 'bottom: 1%' : 'bottom: 2%'">
                <div class="hover72Power">
                    <div
                    id="problem1"
                    class="cur"
                    style="width: 100%; height: 100%"
                    ></div>
                    <div class="hidBtn" @click="clickTime('WT2000D121H85')"></div>
                </div>
                <div class="monthPower">
                    <div
                    id="problem2"
                    class="cur"
                    style="width: 100%; height: 100%"
                    ></div>
                    <div class="hidBtn" @click="clickTime('UP2000-130')"></div>
                </div>
            </div>

            <el-dialog
                v-model="noTimeDialog"
                :custom-class="noTimeDialogsc"
                width="80%"
            >
                <template #title>
                    <div class="dialogTitle">
                        <span style="margin-left: 10px">非停时长占比与故障次数</span>
                        
                    </div>
                </template>
                <div class="allStyle">
                    <div class="radioGroupTime">
                        <el-date-picker
                            v-model="radioTime"
                            type="datetimerange"
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
                            format="YYYY-MM-DD HH:mm:ss">
                        </el-date-picker>
                        <el-radio-group v-model="radioGroup" @change="changeRadio">
                            <el-radio :label="1" >按日</el-radio>
                            <el-radio :label="2">按月</el-radio>
                        </el-radio-group>
                    </div>
                    <div class="allMain">
                        <!-- <span class="mainTit">2025-01-{{it}}</span> -->
                        <div class="allMsg">
                            <div class="warnLine">
                                <RadarLineChartCom width="45vw" height="50vh" :xAxis="problem3.xAxis" :series="problem3.series" />
                            </div>
                            <div class="warnPie">
                                <RadarPieChartCom width="30vw" height="50vh" :list="probChartData" title="非停时长占比" style="cursor: pointer" />
                            </div>
                        </div>
                    </div>
                </div>
                <!-- <template #footer>
                    <div class="dialog-footer">
                        <el-button @click="dialogVisible = false">Cancel</el-button>
                        <el-button type="primary" @click="dialogVisible = false">
                        Confirm
                        </el-button>
                    </div>
                </template> -->
            </el-dialog>
            <el-dialog
                v-model="showTableDialog"
                :custom-class="noTimeDialogsc"
                width="80%"
            >
                <template #title>
                    <div class="dialogTitle">
                        <span style="margin-left: 10px">停机信息</span>
                        
                    </div>
                </template>
                <div class="warnTable">
                    <el-table
                        size="mini"
                        :data="tableData"
                        style="width: 100%; height: calc(100% - 310px)"
                        max-height="520px"
                        stripe>
                        <el-table-column
                            v-for="item in tableHeader"
                            :label="item.name"
                            :prop="item.code"
                            :key="item.code"
                            :width="item.width || ''"
                            show-overflow-tooltip
                            header-align="center"
                            align="center"
                        >
                        <template #default="scope">
                            <span v-if="item.code == 'status'">
                                <span :style="scope.row.status === 0 ? 'color: red' : ''">{{scope.row.status === 0 ? "异常" : "正常"}}</span>
                            </span>
                            <span v-else>
                                {{
                                    scope.row[item.code] != "NULL" ? scope.row[item.code] : ""
                                }}
                            </span>
                        </template>
                        </el-table-column>
                    </el-table>
                </div>
            </el-dialog>
        </div>
        <router-view v-else />
    </div>
</template>

<script>
    import ThreeModel1 from "./component/ThreeModel1.vue";
    import PanelSand from "@com/coms/panel/panel-sand.vue";
    import PanelSandToolbar from "@com/coms/panel/panel-sand-toolbar.vue";
    import StBack from "./component/st-back.vue";
    import RankTable from "./component/rank-table.vue";
    import RadarPieChart from "@com/chart/pie/radar-pie-chart.vue";
    import RadarPieChartCom from "./component/radar-pie-chart.vue";
    import RadarLineChartCom from "./component/radar-line-chart.vue";
    import dataJson from "./component/dataBJJson.json"
    import dayjs from "dayjs";
    import {onBeforeRouteLeave} from "vue-router"
    import {
        alarm_history,
    } from "@/api/zhbj/index.js";
    import {
        apiGetqueryshutdowneventlist,
        apiGetfindCtFeatureStat,
        apiGetqueryShutdownEvent2ByType,
        apiGetqueryShutdownEvent2ByDay,
        apiGetqueryShutdownEvent2ByMonth,
        apiGetqueryShutdownEvent2ByMap
    } from "@/api/sandtable/index.js";
    import jsonData from "./component/data.json";
    export default {
        // 名称
        name: "SandTable",
        // 使用组件
        components: {
            ThreeModel1,
            PanelSand,
            PanelSandToolbar,
            RadarPieChart,
            StBack,
            RankTable,
            RadarPieChartCom,
            RadarLineChartCom
        },
        // 数据
        data() {
            const that = this;
            return {
                radioGroup: 1,
                radioTime: [],
                problem1: null,
                problem2: null,
                problem3: {},
                videoShow: true,
                showPanel: false,
                bjSwitch: false,
                bjSwitch2: false,
                warnSwitch: 'y',
                warnSwitch2: 'y',
                probSwitch: 'y',
                probSwitch2: 'y',
                warnPC: true,
                warnPC2: true,
                probPC: true,
                probPC2: true,
                timmer1: null,
                showWeatherDialog: false,
                showTableDialog: false,
                showHealthDialog: false,
                showMainInfoDialog: false,
                noTimeDialog: false,
                noTimeType: "",
                weathercollapse: "",
                weatherChart: [{
                        title: "温度",
                        smooth: true,
                        value: [],
                    },
                    {
                        title: "湿度",
                        smooth: true,
                        value: [],
                    },
                ],
                videoDialogClass: "modal animated a1 bounceIn",
                tableDialogClass: "modal animated a1 fadeInLeftBig",
                mainInfoDialogClass: "modal curModal animated a0 fadeInDownBig",
                mainInfo: [],
                peopleClass: "",
                timeStr: "",
                wpId: "0",
                tqmap1: {},
                tqmap5: [],
                gxkmap: {},
                tableItem: {},
                mapSource: {},
                videoArray1: [
                    // [
                    //   { code: "NSS_FDC_ZK", class: "", switch: true },
                    //   { code: "NSS_FDC_ZK", class: "", switch: true },
                    // ],
                    // [
                    //   { code: "NSS_FDC_ZK", class: "", switch: true },
                    //   { code: "QS_FDC_ZK", class: "", switch: true },
                    // ],
                    // [
                    //   { code: "QS_FDC_ZK", class: "", switch: true },
                    //   { code: "QS_FDC_ZK", class: "", switch: true },
                    // ],
                    [{
                            code: "SBQ_FDC_SC",
                            class: "",
                            switch: true
                        },
                        {
                            code: "NSS_FDC_SC",
                            class: "",
                            switch: true
                        },
                    ],
                    [{
                            code: "QS_FDC_SC",
                            class: "",
                            switch: true
                        },
                        {
                            code: "MHS_FDC_SC",
                            class: "",
                            switch: true
                        },
                    ],
                    [{
                            code: "XS_FDC_SC",
                            class: "",
                            switch: true
                        },
                        {
                            code: "PL_GDC_SC",
                            class: "",
                            switch: true
                        },
                    ],
                ],
                videoArray: [
                    [{
                            url: "http://192.168.10.10:9984/ws.html",
                            token: "?token=SBQ_FDC_SC&autoplay=true",
                            class: "",
                            switch: true,
                        },
                        {
                            url: "http://192.168.10.10:9984/ws.html",
                            token: "?token=NSS_FDC_SC&autoplay=true",
                            class: "",
                            switch: true,
                        },
                    ],
                    [{
                            url: "http://192.168.10.10:9984/ws.html",
                            token: "?token=QS_FDC_SC&autoplay=true",
                            class: "",
                            switch: true,
                        },
                        {
                            url: "http://192.168.10.10:9984/ws.html",
                            token: "?token=MHS_FDC_SC&autoplay=true",
                            class: "",
                            switch: true,
                        },
                    ],
                    [{
                            url: "http://192.168.10.10:9984/ws.html",
                            token: "?token=XS_FDC_SC&autoplay=true",
                            class: "",
                            switch: true,
                        },
                        {
                            url: "http://192.168.10.10:9984/ws.html",
                            token: "?token=PL_GDC_SC&autoplay=true",
                            class: "",
                            switch: true,
                        },
                    ],
                ],
                showVideoDialog: false,
                dialogVideoUrl: "",
                warnChartDataZC: dataJson.data.warnChartData,
                warnChartDataLH: dataJson.data.warnChartData,
                probChartDataZC: dataJson.data.probChartData,
                probChartDataLH: dataJson.data.probChartData,
                probChartData: dataJson.data.probChartData,
                bjChartData: [],
                ForecastPower: [{
                        name: "今日预测电量",
                        value: 103.62,
                        total: 150,
                    },
                    {
                        name: "月预测发电量",
                        value: 98.62,
                        total: 100,
                    },
                ],
                workDataIndex: 0,
                workData: {
                    column: [{
                            name: "人员",
                            field: "laborname",
                            is_num: false,
                            is_light: false,
                            click(e, row) {
                                that.changePeople(row.index);
                            },
                        },
                        {
                            name: "职务",
                            field: "jobcode",
                            is_num: false,
                            is_light: false,
                            click(e, row) {
                                that.changePeople(row.index);
                            },
                        },
                        {
                            name: "开始时间",
                            field: "starttime",
                            width: "150px",
                            is_num: false,
                            is_light: false,
                            click(e, row) {
                                that.changePeople(row.index);
                            },
                        },
                        {
                            name: "原因",
                            field: "problem",
                            is_num: false,
                            is_light: false,
                            click(e, row) {
                                that.changePeople(row.index);
                            },
                        },
                    ],
                    data: [],
                },
                selsZC: {
                    column: [
                        {
                            name: "机组",
                            field: "code",
                            width: "60px",
                        },
                        {
                            name: "停机时长(h)",
                            field: "selsTime",
                        },
                        {
                            name: "状态",
                            field: "isCloseName",
                            width: "60px",
                        },
                    ],
                    data: dataJson.data.sels.data
                },
                selsLH: {
                    column: [
                        {
                            name: "机组",
                            field: "code",
                            width: "60px",
                        },
                        {
                            name: "停机时长(h)",
                            field: "selsTime",
                        },
                        {
                            name: "状态",
                            field: "isCloseName",
                            width: "60px",
                        },
                    ],
                    data: dataJson.data.sels.data
                },
                rmls: {
                    column: [{
                            // name: "风机编号",
                            name: "机组",
                            field: "code",
                            width: "60px",
                        },
                        {
                            // name: "推荐时间",
                            name: "报警时间",
                            field: "rmlsTime",
                        },
                        {
                            // name: "类型",
                            name: "状态",
                            // field: "operation",
                            field: "isCloseName",
                            width: "60px",
                        },
                    ],
                    data: [],
                },
                tableHeader: [
                    {
                        name: "机组",
                        code: "code"
                    },
                    {
                        name: "停机开始时间",
                        code: "stopTime"
                    },
                    {
                        name: "停机恢复时间",
                        code: "startTime"
                    },
                    {
                        name: "停机时长",
                        code: "stopHours"
                    },
                    {
                        name: "故障信息",
                        code: "faultView"
                    },
                    // {
                    //     name: "当前状态",
                    //     code: "status"
                    // }
                ],
                tableData: [
                    {
                        code: "1001",
                        startTime: "2024-12-31 09:00",
                        endTime: "2024-12-31 18:00",
                        selsTime: "8.0",
                        message: "电气故障，机械故障",
                        status: "正常"
                    }
                ],
                timmer: null, // 定时器开关
                isFullScreen: false
            };
        },

        // 函数
        methods: {
            init(res) {
                let that = this
                // 72小时功率曲线
                if (res.data["72time"] && res.data["72time"].length > 0) {
                    let xAxis = [];
                    let seriesSpeed = [];
                    let seriesGl = [];
                    res.data["72time"].forEach((it) => {
                        xAxis.push(dayjs(it.time).format("MM-DD HH:mm"));
                        seriesSpeed.push(it.speed);
                        seriesGl.push(it.expectedpower);
                    });
                    let series = [
                        {
                            name: "故障次数",
                            data: seriesSpeed,
                            type: "line",
                            symbol: "none",
                        },
                        {
                            name: "故障时长",
                            data: seriesGl,
                            yAxisIndex: 1,
                            type: "line",
                            symbol: "none",
                        },
                    ];
                    that.getPowerLine(
                        xAxis,
                        series,
                        "problem1"
                    );
                    that.getPowerLine2(
                        xAxis,
                        series,
                        "problem2"
                    );
                }
            },
            getDataInfo() {
                let that = this;
                that.radioTime = [
                    dayjs().startOf('month').format("YYYY-MM-DD HH:mm:ss"),
                    dayjs().format("YYYY-MM-DD HH:mm:ss")
                ]
                that.getShutDownevenList(!this.bjSwitch ? "gz" : "wh", "WT2000D121H85", 5)
                that.getShutDownevenList(!this.bjSwitch2 ? "gz" : "wh", "UP2000-130", 5)
                that.getFindCtFeature("WT2000D121H85", this.warnSwitch)
                that.getFindCtFeature("UP2000-130", this.warnSwitch2)
                that.getShutDownEvent("WT2000D121H85", this.probSwitch)
                that.getShutDownEvent("UP2000-130", this.probSwitch2)
                that.getShutdownEventByDay("WT2000D121H85", that.radioTime)
                that.getShutdownEventByDay("UP2000-130", that.radioTime)
                
            },
            changeRadio(val) {
                if (val === 1) {
                    if (this.noTimeType === "WT2000D121H85") {
                        this.getShutdownEventByDay("WT2000D121H85", this.radioTime, "Dia")
                        this.getShutdownEventByMap("WT2000D121H85", this.radioTime)
                    } else {
                        this.getShutdownEventByDay("UP2000-130", this.radioTime, "Dia")
                        this.getShutdownEventByMap("UP2000-130", this.radioTime)
                    }
                } else {
                    if (this.noTimeType === "WT2000D121H85") {
                        this.getShutdownEventByMonth("WT2000D121H85", this.radioTime)
                        this.getShutdownEventByMap("WT2000D121H85", this.radioTime)
                    } else {
                        this.getShutdownEventByMonth("UP2000-130", this.radioTime)
                        this.getShutdownEventByMap("UP2000-130", this.radioTime)
                    }
                }
            },
            //获取停机表格信息
            getShutDownevenList(types, modelIds, size) {
                let that = this
                let params = {
                    wpId: "NX_FGS_HA_FDC_STA",
                    modelId: modelIds,
                    begin: dayjs().subtract(1, 'month').format("YYYY-MM-DD HH:mm:ss"),
                    end: dayjs().format("YYYY-MM-DD HH:mm:ss"),
                    pageNum: 1,
                    pageSize: size,
                    type: types
                }
                apiGetqueryshutdowneventlist(params).then(res =>{
                    if (res && res.data) {
                        if (size === 5) {
                            let result = []
                            res.data.result.forEach(it =>{
                                let obj = {
                                    code: it.code,
                                    selsTime: it.stopHours,
                                    isCloseName: types === "gz" ? "故障" : "检修"
                                }
                                result.push(obj)
                            })
                            if (modelIds === "WT2000D121H85") {
                                that.selsZC.data = result
                            } else {
                                that.selsLH.data = result
                            }
                        } else {
                            res.data.result.forEach(it =>{
                                it.status = types === "gz" ? "故障" : "检修"
                                it.startTime = dayjs(it.startTime).format("YYYY-MM-DD HH:mm:ss")
                                it.stopTime = dayjs(it.stopTime).format("YYYY-MM-DD HH:mm:ss")
                            })
                            that.tableData = res.data.result
                        }
                    }
                })
            },
            //获取预警统计
            getFindCtFeature(modelIds, dateType) {
                let that = this
                let date = ""
                if (dateType === "z") {
                    date = dayjs().subtract(1, 'week').format("YYYY-MM-DD HH:mm:ss")
                } else if (dateType === "y") {
                    date = dayjs().subtract(1, 'month').format("YYYY-MM-DD HH:mm:ss")
                } else if (dateType === "n") {
                    date = dayjs().subtract(1, 'year').format("YYYY-MM-DD HH:mm:ss")
                } else {
                    date = dayjs().subtract(1, 'month').format("YYYY-MM-DD HH:mm:ss")
                }
                let params = {
                    stationid: "NX_FGS_HA_FDC_STA",
                    modelId: modelIds,
                    begin: date,
                    end: dayjs().format("YYYY-MM-DD HH:mm:ss"),
                    deviceType: "windturbine"
                }
                apiGetfindCtFeatureStat(params).then(res =>{
                    if (res) {
                        let result = []
                        res.forEach(it =>{
                            let obj = {
                                name: it.typeName,
                                value: modelIds === "WT2000D121H85" ? that.warnPC ? it.total : it.totalSeconds : that.warnPC2 ? it.total : it.totalSeconds
                            }
                            result.push(obj)
                        })
                        if (modelIds === "WT2000D121H85") {
                            that.warnChartDataZC = result
                        } else {
                            that.warnChartDataLH = result
                        }
                    }
                })
            },
            //获取故障统计
            getShutDownEvent(modelIds, dateType) {
                let that = this
                let date = ""
                if (dateType === "z") {
                    date = dayjs().subtract(1, 'week').format("YYYY-MM-DD HH:mm:ss")
                } else if (dateType === "y") {
                    date = dayjs().subtract(1, 'month').format("YYYY-MM-DD HH:mm:ss")
                } else if (dateType === "n") {
                    date = dayjs().subtract(1, 'year').format("YYYY-MM-DD HH:mm:ss")
                } else {
                    date = dayjs().subtract(1, 'month').format("YYYY-MM-DD HH:mm:ss")
                }
                let params = {
                    wpId: "NX_FGS_HA_FDC_STA",
                    modelId: modelIds,
                    begin: date,
                    end: dayjs().format("YYYY-MM-DD HH:mm:ss")
                }
                apiGetqueryShutdownEvent2ByType(params).then(res =>{
                    if (res && res.data) {
                        let result = []
                        res.data.forEach(it =>{
                            let obj = {
                                name: it.name,
                                value: modelIds === "WT2000D121H85" ? that.warnPC ? it.times : it.hours : that.warnPC2 ? it.times : it.hours
                            }
                            result.push(obj)
                        })
                        if (modelIds === "WT2000D121H85") {
                            that.probChartDataZC = result
                        } else {
                            that.probChartDataLH = result
                        }
                    }
                })
            },
            //获取故障次数时长----日
            getShutdownEventByDay(modelIds, dates, type) {
                let that = this
                let params = {
                    wpId: "NX_FGS_HA_FDC_STA",
                    modelId: modelIds,
                    begin: dates[0],
                    end: dates[1]
                }
                apiGetqueryShutdownEvent2ByDay(params).then(res =>{
                    if (res && res.data) {
                        let xAxis = [];
                        let seriesSpeed = [];
                        let seriesGl = [];
                        res.data.forEach((it) => {
                            xAxis.push(it.stoptime);
                            seriesSpeed.push(it.times);
                            seriesGl.push(it.hours);
                        });
                        let series = [
                            {
                                name: "故障次数",
                                data: seriesSpeed,
                                type: "line",
                                symbol: "none",
                            },
                            {
                                name: "故障时长",
                                data: seriesGl,
                                yAxisIndex: 1,
                                type: "line",
                                symbol: "none",
                            },
                        ];
                        if (modelIds === "WT2000D121H85") {
                            if (type === 'Dia') {
                                that.problem3 = {
                                    xAxis: xAxis,
                                    series: series
                                }
                            } else {
                                that.getPowerLine(
                                    xAxis,
                                    series,
                                    "problem1"
                                );
                            }
                        } else {
                            if (type === 'Dia') {
                                that.problem3 = {
                                    xAxis: xAxis,
                                    series: series
                                }
                            } else {
                                that.getPowerLine2(
                                    xAxis,
                                    series,
                                    "problem2"
                                );
                            }
                        }
                    }
                })
            },
            getShutdownEventByMonth(modelIds, dates) {
                let that = this
                let params = {
                    wpId: "NX_FGS_HA_FDC_STA",
                    modelId: modelIds,
                    begin: dates[0],
                    end: dates[1]
                }
                apiGetqueryShutdownEvent2ByMonth(params).then(res =>{
                    if (res && res.data) {
                        let xAxis = [];
                        let seriesSpeed = [];
                        let seriesGl = [];
                        res.data.forEach((it) => {
                            xAxis.push(it.stoptime);
                            seriesSpeed.push(it.times);
                            seriesGl.push(it.hours);
                        });
                        let series = [
                            {
                                name: "故障次数",
                                data: seriesSpeed,
                                type: "line",
                                symbol: "none",
                            },
                            {
                                name: "故障时长",
                                data: seriesGl,
                                yAxisIndex: 1,
                                type: "line",
                                symbol: "none",
                            },
                        ];
                        if (modelIds === "WT2000D121H85") {
                            that.problem3 = {
                                xAxis: xAxis,
                                series: series
                            }
                        } else {
                            that.problem3 = {
                                xAxis: xAxis,
                                series: series
                            }
                        }
                    }
                })
            },
            getShutdownEventByMap(modelIds, dates) {
                let that = this
                let params = {
                    wpId: "NX_FGS_HA_FDC_STA",
                    modelId: modelIds,
                    begin: dates[0],
                    end: dates[1]
                }
                apiGetqueryShutdownEvent2ByMap(params).then(res =>{
                    if (res && res.data) {
                        let result = []
                        for (let i in res.data) {
                            res.data[i].forEach(it =>{
                                let obj = {
                                    name: it.name,
                                    value: it.times
                                }
                                result.push(obj)
                            })
                        }
                        if (modelIds === "WT2000D121H85") {
                            that.probChartData = result
                        } else {
                            that.probChartData = result
                        }
                    }
                })
            },

            getPowerLine(
                xAxis,
                series,
                name
                ) {
                let myChart;
                let legendState = {};
                if (this.problem1?.getOption) {
                    legendState = this.problem1.getOption().legend[0].selected;
                }

                let option = {
                    title: {
                    text: "故障次数时长(中车)",
                    left: "5px",
                    top: "5px",
                    textStyle: {
                        fontSize: "16",
                        fontWeight: 400,
                        color: "#fff",
                    },
                    },
                    tooltip: {
                    trigger: "axis",
                    },
                    color: ["#7981AF", "#1C99FF", "#E57F25", "#f25656"],
                    legend: {
                    right: "25",
                    top: "5",
                    itemWidth: 5,
                    itemHeight: 5,
                    data: ["故障次数", "故障时长"],
                    textStyle: {
                        color: "#fff",
                    },
                    selected: legendState,
                    },
                    grid: {
                    left: "3%",
                    right: "5%",
                    bottom: "5%",
                    height: "110px",
                    containLabel: true,
                    },
                    xAxis: {
                    type: "category",
                    boundaryGap: false,
                    data: xAxis,
                    axisLine: {
                        lineStyle: {
                        color: "#fff", // 修改为需要的颜色
                        },
                    },
                    },
                    yAxis: [
                    {
                        type: "value",
                        splitLine: {
                        lineStyle: {
                            color: "#ccc",
                            type: "dashed", // 修改为虚线
                            opacity: 0.2,
                        },
                        },
                        name: "单位：次",
                        nameLocation: "end",
                        axisLine: {
                        lineStyle: {
                            color: "#fff",
                        },
                        },
                        axisLabel: {
                        formatter(value) {
                            return parseFloat(value.toFixed(1));
                        },
                        },
                    },
                    {
                        type: "value",
                        splitLine: {
                        lineStyle: {
                            color: "#ccc",
                            type: "dashed", // 修改为虚线
                            opacity: 0.2,
                        },
                        },
                        name: "单位：h",
                        axisLine: {
                        lineStyle: {
                            color: "#fff",
                        },
                        },
                        axisLabel: {
                        formatter(value) {
                            return parseFloat(value.toFixed(1));
                        },
                        },
                    },
                    ],
                    series: series,
                };
                // 基于准备好的dom，初始化echarts实例
                let dom = document.getElementById(name);
                dom && dom.removeAttribute("_echarts_instance_");

                myChart = this.$echarts.init(dom);
                this.problem1 = myChart;

                myChart.setOption(option);

                window.addEventListener("resize", () => {
                    myChart.resize();
                });
            },
            getPowerLine2(
                xAxis,
                series,
                name
                ) {
                let myChart;
                let legendState = {};
                if (this.problem2?.getOption) {
                    legendState = this.problem2.getOption().legend[0].selected;
                }

                let option = {
                    title: {
                    text: "故障次数时长(联合动力)",
                    left: "5px",
                    top: "5px",
                    textStyle: {
                        fontSize: "16",
                        fontWeight: 400,
                        color: "#fff",
                    },
                    },
                    tooltip: {
                    trigger: "axis",
                    },
                    color: ["#7981AF", "#1C99FF", "#E57F25", "#f25656"],
                    legend: {
                    right: "25",
                    top: "5",
                    itemWidth: 5,
                    itemHeight: 5,
                    data: ["故障次数", "故障时长"],
                    textStyle: {
                        color: "#fff",
                    },
                    selected: legendState,
                    },
                    grid: {
                    left: "3%",
                    right: "5%",
                    bottom: "5%",
                    height: "110px",
                    containLabel: true,
                    },
                    xAxis: {
                    type: "category",
                    boundaryGap: false,
                    data: xAxis,
                    axisLine: {
                        lineStyle: {
                        color: "#fff", // 修改为需要的颜色
                        },
                    },
                    },
                    yAxis: [
                    {
                        type: "value",
                        splitLine: {
                        lineStyle: {
                            color: "#ccc",
                            type: "dashed", // 修改为虚线
                            opacity: 0.2,
                        },
                        },
                        name: "单位：次",
                        axisLine: {
                        lineStyle: {
                            color: "#fff",
                        },
                        },
                        axisLabel: {
                        formatter(value) {
                            return parseFloat(value.toFixed(1));
                        },
                        },
                    },
                    {
                        type: "value",
                        splitLine: {
                        lineStyle: {
                            color: "#ccc",
                            type: "dashed", // 修改为虚线
                            opacity: 0.2,
                        },
                        },
                        name: "单位：h",
                        axisLine: {
                        lineStyle: {
                            color: "#fff",
                        },
                        },
                        axisLabel: {
                        formatter(value) {
                            return parseFloat(value.toFixed(1));
                        },
                        },
                    },
                    ],
                    series: series,
                };
                // 基于准备好的dom，初始化echarts实例
                let dom = document.getElementById(name);
                dom && dom.removeAttribute("_echarts_instance_");

                myChart = this.$echarts.init(dom);
                this.problem2 = myChart;

                myChart.setOption(option);

                window.addEventListener("resize", () => {
                    myChart.resize();
                });
            },

            clickStopRow(type) {
                this.showTableDialog = true;
                if (type === 'left') {
                    if (!this.bjSwitch) {
                        this.getShutDownevenList("gz", "WT2000D121H85", 100)
                    } else {
                        this.getShutDownevenList("wh", "WT2000D121H85", 100)
                    }
                } else {
                    if (!this.bjSwitch2) {
                        this.getShutDownevenList("gz", "UP2000-130", 100)
                    } else {
                        this.getShutDownevenList("wh", "UP2000-130", 100)
                    }
                }
            },

            changeBjSwitch(type) {
                if (type === "left") {
                    this.bjSwitch = !this.bjSwitch;
                    if (!this.bjSwitch) {
                        this.getShutDownevenList("gz", "WT2000D121H85", 5)
                    } else {
                        this.getShutDownevenList("wh", "WT2000D121H85", 5)
                    }
                } else {
                    this.bjSwitch2 = !this.bjSwitch2;
                    if (!this.bjSwitch2) {
                        this.getShutDownevenList("gz", "UP2000-130", 5)
                    } else {
                        this.getShutDownevenList("wh", "UP2000-130", 5)
                    }
                }
            },

            changeWarnSwitch(val) {
                this.warnSwitch = val
                this.getFindCtFeature("WT2000D121H85", val)
            },
            changeWarnSwitch2(val) {
                this.warnSwitch2 = val
                this.getFindCtFeature("UP2000-130", val)
            },
            changeProbSwitch(val) {
                this.probSwitch = val
                this.getShutDownEvent("WT2000D121H85", val)
            },
            changeProbSwitch2(val) {
                this.probSwitch2 = val
                this.getShutDownEvent("UP2000-130", val)
            },
            
            changeProbPC(type) {
                if (type === 'left') {
                    this.probPC = !this.probPC;
                    this.getShutDownEvent("WT2000D121H85", this.probSwitch)
                } else {
                    this.probPC2 = !this.probPC2;
                    this.getShutDownEvent("UP2000-130", this.probSwitch2)
                }
            },
            changeWarnPC(type) {
                if (type === 'left') {
                    this.warnPC = !this.warnPC;
                    this.getFindCtFeature("WT2000D121H85", this.warnSwitch)
                } else {
                    this.warnPC2 = !this.warnPC2;
                    this.getFindCtFeature("UP2000-130", this.warnSwitch2)
                }
            },
            clickTime(type) {
                let res = jsonData
                this.noTimeDialog = true
                this.noTimeType = type
                let that = this
                // 72小时功率曲线
                if (res.data["72time"] && res.data["72time"].length > 0) {
                    let xAxis = [];
                    let seriesSpeed = [];
                    let seriesGl = []
                    res.data["72time"].forEach((it) => {
                        xAxis.push(dayjs(it.time).format("MM-DD HH:mm"));
                        seriesSpeed.push(it.speed);
                        seriesGl.push(it.expectedpower);
                    });
                    let series = [
                        {
                            name: "故障次数",
                            data: seriesSpeed,
                            type: "line",
                            symbol: "none",
                        },
                        {
                            name: "故障时长",
                            data: seriesGl,
                            yAxisIndex: 1,
                            type: "line",
                            symbol: "none",
                        },
                    ];
                    this.problem3 = {
                        xAxis: xAxis,
                        series: series
                    }
                }
                if (type === 'left') {
                    that.getShutdownEventByDay("WT2000D121H85", that.radioTime, "Dia")
                    that.getShutdownEventByMap("WT2000D121H85", that.radioTime)
                } else {
                    that.getShutdownEventByDay("UP2000-130", that.radioTime, "Dia")
                    that.getShutdownEventByMap("UP2000-130", that.radioTime)
                }
            },
            
            // 获取历史记录表
            async getAlarmHistoryt(params, type) {

                if (type === 'history') {
                    params.alarmType = 'windturbine',
                    params.stationid = 'NX_FGS_HA_FDC_STA',
                    params.deviceid = ""
                } else {
                    params.alarmType = 'custom',
                    params.stationid = 'NX_FGS_HA_FDC_STA',
                    params.deviceid = "",
                    params.deviceType = "windturbine"
                }
                
                const { data } = await alarm_history(params);

                if (data) {
                    if (type === 'history') {
                        data?.ls?.forEach((ele) => {
                            ele.isCloseName = ele.endts ? "已解除" : "未解除";
                            ele.rmlsTime = ele.ts > 0 ? this.formatTime(ele.ts) : "--";
                        });
                        this.rmls.data = data?.ls;
                    } else {
                        data?.ls?.forEach((ele) => {
                            ele.isCloseName = ele.endts ? "已解除" : "未解除";
                            ele.selsTime = ele.ts > 0 ? this.formatTime(ele.ts) : "--";
                        });
                        this.sels.data = data?.ls;
                    }
                } else {
                    this.sels.data = dataJson.data.sels.data;
                    this.warnChartData = dataJson.data.warnChartData;
                    this.probChartData = dataJson.data.probChartData;
                }
                
                
            },
            // 时间格式化
            formatTime(val) {
                return dayjs(val).format("YYYY-MM-DD HH:mm:ss");
            },

            // 获取中部地图数据
            getWpHealthInfo() {
                let that = this;
                that.API.requestData({
                    method: "POST",
                    subUrl: "sandtable/judgeWpHealth",
                    data: {
                        wpId: that.wpId,
                    },
                    success(res) {
                        that.mapSource = res.data;
                    },
                });
            },

            // 获取报警玫瑰图
            getWarnMGT() {
                let that = this;
                that.API.requestData({
                    method: "GET",
                    baseURL: "http://192.168.1.82:8075/",
                    subUrl: "alarm/count/query/alltotal",
                    data: {
                        stationid: that.wpId,
                    },
                    success(res) {
                        let warnChartData = [];
                        for (let key in res.data) {
                            const ele = res.data[key];
                            warnChartData.push({
                                value: ele.count,
                                name: ele.relatePartsText,
                            });
                        }
                        that.warnChartData = warnChartData;
                    }
                });
            },

            // 获取故障玫瑰图
            getStopMGT() {
                let that = this;
                that.API.requestData({
                    method: "GET",
                    baseURL: "http://192.168.1.82:8075/",
                    subUrl: "shutdown/count/alltotal",
                    data: {
                        stId: that.wpId,
                    },
                    success(res) {
                        let warnChartData = [];
                        for (let key in res.data) {
                            const ele = res.data[key];
                            warnChartData.push({
                                value: ele.count,
                                name: ele.type,
                            });
                        }
                        that.warnChartData = warnChartData;
                    },
                });
            },

            // 获取库存玫瑰图
            getRepertoryMGT() {
                let that = this;
                that.API.requestData({
                    method: "GET",
                    baseURL: "http://10.155.32.4:9988/",
                    subUrl: "inventory/groupcount",
                    data: {
                        stId: that.wpId,
                    },
                    success(res) {
                        let bjChartData = [];
                        for (let key in res.data) {
                            const ele = res.data[key];
                            bjChartData.push({
                                value: ele.curbal,
                                name: ele.description,
                            });
                        }
                        that.bjChartData = bjChartData;
                    },
                });
            },

            // 获取记录玫瑰图
            getRecordMGT() {
                let that = this;
                that.API.requestData({
                    method: "GET",
                    baseURL: "http://10.155.32.4:9988/",
                    subUrl: "equoperationrecord/equupdatecount",
                    data: {
                        stId: that.wpId,
                    },
                    success(res) {
                        let bjChartData = [];
                        for (let key in res.data) {
                            const ele = res.data[key];
                            bjChartData.push({
                                value: ele.count,
                                name: ele.description,
                            });
                        }
                        that.bjChartData = bjChartData;
                    },
                });
            },

            // 获取中部地图数据
            getTop4Info() {
                let that = this;
                that.API.requestData({
                    method: "GET",
                    baseURL: "http://10.155.32.4:9988/",
                    subUrl: "equoperationrecord/top4",
                    data: {
                        stId: that.wpId,
                    },
                    success(res) {
                        res.data.forEach((ele, index) => {
                            ele.index = index;
                            ele.jobcode = ele.jobcode || "------";
                        });
                        that.workData.data = res.data;
                    },
                });
            },

            // 获取主要指标
            getWpMainInfo() {
                let that = this;
                that.API.requestData({
                    method: "GET",
                    baseURL: "http://10.155.32.4:8034/",
                    subUrl: "benchmark/zyzb",
                    data: {
                        windPowerStation: that.wpId,
                    },
                    success(res) {
                        that.mainInfo = res.data;
                        that.showMainInfoDialog = true;
                    },
                });
            },

            // 切换人员展示
            changePeople(index) {
                if (!this.peopleAnmLock && this.workDataIndex !== index) {
                    this.peopleAnmLock = true;
                    this.peopleClass = "fadeOutRight";
                    setTimeout(() => {
                        this.workDataIndex = index;
                        this.peopleClass = "fadeInRight";
                        this.peopleAnmLock = false;
                    }, 150);
                }
            },

            // 点击风场或者光伏
            clickMapItem(videoArray, wpId) {
                this.wpId = wpId;
                // this.videoArray.forEach((pEle, pIndex) => {
                //   pEle.forEach((cEle, cIndex) => {
                //     setTimeout(() => {
                //       // 设置隐藏动画
                //       cEle.class = "animated a1 flipOutX";
                //       setTimeout(() => {
                //         // 修改 token
                //         cEle.token =
                //           "?token=" + videoArray[pIndex + cIndex] + "&autoplay=true";
                //         setTimeout(() => {
                //           // 设置显示动画
                //           cEle.class = "animated a1 flipInX";
                //         }, 150);
                //       }, 350);
                //     }, (pIndex + cIndex + pIndex) * 150);
                //   });
                // });
                this.videoArray1.forEach((pEle, pIndex) => {
                    pEle.forEach((cEle, cIndex) => {
                        setTimeout(() => {
                            // 设置隐藏动画
                            cEle.class = "animated a1 flipOutX";
                            setTimeout(() => {
                                // 修改 token
                                cEle.code = videoArray[pIndex + cIndex];
                                setTimeout(() => {
                                    // 设置显示动画
                                    cEle.class = "animated a1 flipInX";
                                }, 150);
                            }, 350);
                        }, (pIndex + cIndex + pIndex) * 150);
                    });
                });
                this.getWtInfo();
                this.getWpHealthInfo();
                this.getTop4Info();
                this.getWarnMGT();
                this.getRepertoryMGT();
                this.getWpMainInfo();
            },

            when() {
                this.showPanel = true;
            },

            
        },
        // 生命周期钩子
        beforeCreate() {
            // 创建前
        },
        created() {
            const clientHeight =
                document.documentElement.clientHeight || document.body.clientHeight;
                if (clientHeight === 1080) {
                this.isFullScreen = true;
                } else {
                this.isFullScreen = false;
                }
            // this.getWpHealthInfo();
            // this.getTop4Info();
            // this.getWarnMGT();
            // this.getRepertoryMGT();
            this.timeStr = new Date().formatDate("MM-dd hh:mm");
            this.timmer1 = setInterval(() => {
                this.timeStr = new Date().formatDate("MM-dd hh:mm");
            });
        },
        beforeMount() {
            // 渲染前
        },
        mounted() {
            window.onresize = () => {
            const clientHeight =
                document.documentElement.clientHeight || document.body.clientHeight;
            this.isFullScreen = window.screen.height == clientHeight;
            };
            // 渲染后
            this.$nextTick(() =>{
                // this.init(jsonData)
                this.getDataInfo();
                this.timmer = setInterval(() => {
                    this.getDataInfo();
                }, 10000);
            })
            

        },
        unmounted() {
            clearInterval(this.timmer);
            this.timmer = null;
            clearInterval(this.timmer1);
            this.timmer1 = null;
        },
        watch: {
            $route: {
                handler(val) {
                    if (val.path !== "/integratedAlarm") {
                        clearInterval(this.timmer);
                        this.timmer = null;
                    }else {
                        this.timmer = setInterval(() => {
                            this.getDataInfo();
                        }, 10000);
                    }
                },
            },
        },
        
        beforeUpdate() {
            // 数据更新前
        },
        updated() {
            // 数据更新后
        },
    };
</script>

<style lang="less">
    .sand-table {
        width: 100%;
        // height: 91.667vh;
        height: 100%;
        position: relative;
        background-image: url("../../assets/png/3dback_1.png");
        background-repeat: no-repeat;
        background-size: cover;

        .i3dback {
            position: fixed;
            // z-index: -1;
            width: 100vw;
            height: 100%;
            top: 0;
            left: 0;
        }

        .i3dcloud {
            position: absolute;
            z-index: 2;
            width: 100vw;
            height: 100vh;
            top: 0;
            left: 0;
        }

        .left-panel {
            width: 360px;
            margin-top: 20px;
        }

        .right-panel {
            width: 36.852vh;

            .mask {
                width: 100%;
                height: 28vh;
                background: url("~@assets/nxfImg/ship.png");
                background-size: 100% 100%;
            }
        }

        .three-model-layer {
            position: absolute;
            width: 100%;
            height: 100%;
            z-index: 1;
        }

        .sand-table-left {
            height: 79vh;
            position: absolute;
            left: 0;
            top: 0;
            z-index: 2;
        }

        .sand-table-right {
            height: 79vh;
            position: absolute;
            right: 0;
            top: 0;
            z-index: 2;
        }

        .sand-table-bottom {
            position: absolute;
            bottom: 20px;
            z-index: 2;
            display: flex;
            transform: 0.2s;

            .stb-p {
                margin-left: 0.926vh;
            }
        }

        .pre-img-box {
            display: flex;
            align-items: center;
            justify-content: center;
            margin-top: 0.556vh;
            padding: 0;
            position: relative;
            cursor: pointer;

            .sand-table-bottom {
                position: absolute;
                bottom: 0;
                z-index: 2;
                display: flex;
                transition: 0.2s;
            }

            .mask {
                width: 100%;
                height: 8.657vh;
                background: url("~@assets/nxfImg/ship.png");
                background-size: 100% 100%;
                // img {
                //     width: 100%;
                //     height: 100px;
                // }
            }

            .pre-img {
                position: relative;
                width: 95%;
                height: 8.657vh;
                z-index: 4;
            }
        }

        .person-info-box {
            display: flex;

            .header {
                width: 75px;
            }
        }

        .table {
            width: calc(100% + 2.963vh);
            margin-left: -1.481vh;
            margin-bottom: -1.481vh;

            tr {
                cursor: pointer;
            }

            .com-table thead tr th,
            .com-table tr td {
                padding: 0.556vh 0;
                color: #fff;
            }
        }

        .animated.a0 {
            animation-duration: 0.35s;
        }

        .animated.a1 {
            animation-duration: 0.5s;
        }

        .el-overlay {
            overflow: hidden;
        }

        .footer {
            display: flex;
            justify-content: space-between;
            width: 100%;
            height: 19vh;
            position: absolute;
            
            z-index: 111;

            .hover72Power,
            .monthPower {
            width: calc(50% - 10px);
            background: rgba(41, 45, 53, 0.4);
            border-radius: 6px;
            position: relative;
            .hidBtn {
                position: absolute;
                left: 5px;
                top: 5px;
                width: 0;
                height: 24px;
                cursor: pointer;
            }
            }

            .hover72Power {
            .hidBtn {
                width: 125px;
            }
            }

            .monthPower {
            .hidBtn {
                width: 75px;
            }
            }
        }
    }

    #sandTable.sand-table .curModal .el-dialog__body {
        max-height: 600px;
        overflow-y: scroll;
    }

    .exchange {
        cursor: pointer;
    }

    .weatherBox {
        width: 100%;
        display: flex;
        justify-content: space-around;
        align-items: center;

        .l,
        .r {
            width: 48%;
            height: 500px;
            padding: 50px 0;
        }

        .el-collapse {
            border-top: 1px solid #999;
        }

        .el-collapse-item .el-collapse-item__wrap {
            border-bottom: 1px solid #999;
        }

        .el-collapse-item__content {
            background: rgba(18, 29, 28, 1);
            color: rgba(255, 255, 255, 0.75);
            padding: 20px;
        }

        .el-collapse-item__header {
            background: rgb(18, 29, 28);
            border-bottom: 1px solid #999;
            color: rgba(255, 255, 255, 0.75);
        }

        .el-card__header,
        .el-collapse,
        .el-collapse-item__header {
            border-bottom: 1px solid #999;
        }

        .collapseItemTitle {
            display: flex;
            justify-content: space-between;
            align-items: center;
            width: 100%;

            .svg {
                width: 20px;
                height: 20px;
            }

            .info {
                margin-left: 4px;
            }

            .otherWea {
                margin-right: 10px;
            }
        }

        .other-info {
            text-align: center;
            font-size: @fontsize-s;

            .text {
                color: @font-color;
                font-size: 12px;
            }

            .value {
                margin: 0.741vh 0 0 0;
            }

            .other-icon {
                margin: 0 auto;
            }
        }
    }

    .videoBoxiframe {
        border: none;
        overflow: hidden;
        cursor: pointer;
    }

    .modal {
        .dialogTitle {
            position: relative;
            left: 10px;
        }

        .jumpBtn {
            position: absolute;
            right: 30px;
            top: 8px;
            cursor: pointer;
            font-size: 20px;
        }

        .el-divider__text {
            background: rgb(17, 28, 27);
            color: #b3bdc0;
        }

        .el-divider {
            background: #b3bdc0;
        }

        animation-duration: 0;

        @keyframes dialog-fade-in {
            0% {
                transform: translate3d(-1000%, -1000%, 0);
                opacity: 0;
            }

            100% {
                transform: translate3d(-1000%, -1000%, 0);
                opacity: 1;
            }
        }

        @keyframes dialog-fade-out {
            0% {
                // transform: translate3d(0, 0, 0);
                transform: translate3d(-1000%, -1000%, 0);
                opacity: 1;
            }

            100% {
                // transform: translate3d(0, -100%, 0);
                transform: translate3d(-1000%, -1000%, 0);
                opacity: 0;
            }
        }
    }

    .el-overlay{
        .el-overlay-dialog{
            .el-dialog{
                .el-dialog__body{
                    padding-top: 0 !important;
                    .allStyle{
                        // max-height: 55vh;
                        // overflow: auto;
                        .radioGroupTime{
                            display: flex;
                            margin-bottom: 10px;
                            .el-date-editor{
                                margin-right: 10px;
                            }
                        }
                        .allMain{
                            .mainTit{
                                display: inline-block;
                                margin-left: 10px;
                                font-size: 20px;
                                color: #fff;
                                margin-bottom: 10px;
                            }
                            .allMsg{
                                width: 100%;
                                height: 500px;
                                display: flex;
                                .warnLine{
                                    width: 60%;
                                    height: 100%;
                                } 
                                .warnPie{
                                    width: 40%;
                                    height: 100%;
                                }
                            }
                        }
                    }
                    
                }
            }
        }
    }
</style>