删除无用页面

Admin

2022-09-21 999cab6fb3fc6d2a288d365da991351c5a396bf0

 src/views/riskWarningSys/warningBigScreen/index.vue

@@ -1,22 +1,48 @@
<template>
    <div class="container">
    <div id="container" class="dark">
        <div class="warn-dialog" :class="dialogShow">
            <div>预警消息</div>
            <p>企业8月份总体安全生产预警指数SPI风险值高于预警阈值，可能存在未处理隐患，请注意查阅相关风险因素，采取风险防控措施。</p>
            <span @click="dialogShow = 'hide'">关闭</span>
        </div>
        <div class="info-panel" :class="dialogHide"  @click="openDialog">
            <div class="info-tit">
                <div>
                    <el-icon><Bell /></el-icon>
                    <div style="margin-left: 10px">消息预警</div>
                </div>
                <div @click.stop="dialogHide = 'hide'">X</div>
            </div>
            <div class="info-desc">
                企业8月份总体安全生产预警指数SPI风险值高于预警阈值。
            </div>
            <div class="info-num">
                1
            </div>
        </div>
        <div class="header-content">
            <div class="logo">
                <img src="../../../assets/warningScreen/logo_dark.png" alt="" />
                <img v-if="screenTheme.isDark" src="../../../assets/warningScreen/logo_dark.png" alt="" />
                <img v-else="!screenTheme.isDark" src="../../../assets/warningScreen/logo_light.png" alt="" />
            </div>
            <div class="title">风险预警预报平台</div>
            <div class="title-right">
<!--                <img src="themeStyle.skinIcon" class="qiehuan" @click="changeTheme" />-->
                <span class="datetime">{{currentTime}}</span>
                <div class="btns">
                    <div class="fullbtn" @click="onScreenfullClick">
                    <div class="themeBtn" @click="changeTheme()">
                        <img v-if="screenTheme.isDark" src="../../../assets/warningScreen/skin.png"/>
                        <img v-else src="../../../assets/warningScreen/skin-light.png"/>
                    </div>
                    <div class="fullBtn" @click="onScreenfullClick">
                        <div class="toFull">
                            <i class="iconfont" :title="isScreenfull ? $t('message.user.title6') : $t('message.user.title5')" :class="!isScreenfull ? 'icon-fullscreen' : 'icon-tuichuquanping'"></i>
                        </div>
                        <div>全屏</div>
                    </div>
                    <div class="backBtn" @click="goBack()">
                        <img src="../../../assets/loginPage/back-icon.png"/>
<!--                        <img src="../../../assets/loginPage/back-icon.png"/>-->
                        <el-icon><SwitchButton /></el-icon>
                        <div>退出</div>
                    </div>
                </div>
@@ -25,40 +51,118 @@
        <div class="main-content">
            <div class="main-left">
                <div class="left-top">

                    <dv-border-box-13 :backgroundColor="boxBg" :color="boxColor" class="box-bg"></dv-border-box-13>
                    <div class="part-tit">
                        <span>| 事故等级分布</span>
<!--                        <img @click="jumpPage(1)" src="../../../assets/warningScreen/small-full.png">-->
                        <Switch style="width: 1.2rem;height: 1.2rem;cursor: pointer" @click="jumpPage(1)"/>
                    </div>
                    <div class="chart-box">
                        <accident :size="1" :theme="screenTheme.isDark"></accident>
                    </div>
                </div>
                <div class="left-mid">

                    <dv-border-box-13 :backgroundColor="boxBg" :color="boxColor" class="box-bg"></dv-border-box-13>
                    <div class="part-tit">
                        <span>| 应急演练次数</span>
<!--                        <img @click="jumpPage(2)" src="../../../assets/warningScreen/small-full.png">-->
                        <Switch style="width: 1.2rem;height: 1.2rem;cursor: pointer" @click="jumpPage(2)"/>
                    </div>
                    <div class="chart-box">
                        <span class="train-tip">距上次演练结束 5 天</span>
                        <training class="train-chart" :size="1"></training>
                    </div>
                </div>
                <div class="left-bottom">

                    <dv-border-box-13 :backgroundColor="boxBg" :color="boxColor" class="box-bg"></dv-border-box-13>
                    <div class="part-tit">
                        <span>| 隐患等级数量分布</span>
                        <Switch style="width: 1.2rem;height: 1.2rem;cursor: pointer" @click="jumpPage(3)"/>
                    </div>
                    <div class="chart-box">
                        <risk :size="1" :theme="screenTheme.isDark"></risk>
                    </div>
                </div>
            </div>
            <div class="main-middle">
                <div class="mid-top">

                    <dv-border-box-11 title="SPI数据分析" :backgroundColor="boxBg" :color="boxBigColor" class="box-bg"></dv-border-box-11>
                    <div class="part-tit" style="position: absolute;top: 8%;padding: 0 4%">
                        <div></div>
                        <Switch style="width: 1.2rem;height: 1.2rem;cursor: pointer" @click="jumpPage(4)"/>
                    </div>
                    <div class="chart-box" style="top: 60px;height: calc(100% - 70px)">
                        <spi :size="1" :theme="screenTheme.isDark"></spi>
                    </div>
                </div>
                <div class="mid-bottom">
                    <div class="mid-bot-l">

                        <dv-border-box-13 :backgroundColor="boxBg" :color="boxColor" class="box-bg"></dv-border-box-13>
                        <div class="part-tit">
                            <span>| 教育培训分析</span>
<!--                            <img @click="jumpPage(5)" src="../../../assets/warningScreen/small-full.png">-->
                            <Switch style="width: 1.2rem;height: 1.2rem;cursor: pointer" @click="jumpPage(5)"/>
                        </div>
                        <div class="chart-box">
                            <educate :size="1"></educate>
                        </div>
                    </div>
                    <div class="mid-bot-m">

                        <dv-border-box-13 :backgroundColor="boxBg" :color="boxColor" class="box-bg"></dv-border-box-13>
                        <div class="part-tit">
                            <span>| 隐患等级</span>
<!--                            <img @click="jumpPage(6)" src="../../../assets/warningScreen/small-full.png">-->
                            <Switch style="width: 1.2rem;height: 1.2rem;cursor: pointer" @click="jumpPage(6)"/>
                        </div>
                        <div class="chart-box">
                            <danger :size="1" :theme="screenTheme.isDark"></danger>
                        </div>
                    </div>
                    <div class="mid-bot-r">

                        <dv-border-box-13 :backgroundColor="boxBg" :color="boxColor" class="box-bg"></dv-border-box-13>
                        <div class="part-tit">
                            <span>| 人员专业度分布</span>
<!--                            <img @click="jumpPage(7)" src="../../../assets/warningScreen/small-full.png">-->
                            <Switch style="width: 1.2rem;height: 1.2rem;cursor: pointer" @click="jumpPage(7)"/>
                        </div>
                        <div class="chart-box">
                            <profession :size="1"></profession>
                        </div>
                    </div>
                </div>
            </div>
            <div class="main-right">
                <div class="right-top">

                    <dv-border-box-13 :backgroundColor="boxBg" :color="boxColor" class="box-bg"></dv-border-box-13>
                    <div class="part-tit">
                        <span>| 预警消息报告</span>
<!--                        <img @click="jumpPage(8)" src="../../../assets/warningScreen/small-full.png">-->
                        <Switch style="width: 1.2rem;height: 1.2rem;cursor: pointer" @click="jumpPage(8)"/>
                    </div>
                    <div class="chart-box">
                        <message :size="1" :theme="screenTheme.isDark"></message>
                    </div>
                </div>
                <div class="right-mid">

                    <dv-border-box-13 :backgroundColor="boxBg" :color="boxColor" class="box-bg"></dv-border-box-13>
                    <div class="part-tit">
                        <span>| 特殊作业实时监控</span>
<!--                        <img @click="jumpPage(9)" src="../../../assets/warningScreen/small-full.png">-->
                        <Switch style="width: 1.2rem;height: 1.2rem;cursor: pointer" @click="jumpPage(9)"/>
                    </div>
                    <div class="chart-box">
                        <monitor></monitor>
                    </div>
                </div>
                <div class="right-bottom">

                    <dv-border-box-13 :backgroundColor="boxBg" :color="boxColor" class="box-bg"></dv-border-box-13>
                    <div class="part-tit">
                        <span>| 风险应急物资储备</span>
                        <Switch style="width: 1.2rem;height: 1.2rem;cursor: pointer" @click="jumpPage(10)"/>
                    </div>
                    <div class="chart-box">
                        <stock :size="1"></stock>
                    </div>
                </div>
            </div>
        </div>
@@ -67,41 +171,145 @@

<script lang="ts">
    import screenfull from 'screenfull';
    import { toRefs, reactive, ref, onMounted } from 'vue';
    import { toRefs, reactive, ref, onMounted, defineComponent, defineAsyncComponent, nextTick, onUnmounted } from 'vue';
    import { ElTable } from 'element-plus';
    import { FormInstance, FormRules, ElMessage } from 'element-plus';
    import { safetyRiskEventApi } from '/@/api/doublePreventSystem/safetyRiskEvent/index.ts';
    import { useRouter } from 'vue-router';
    import {hiddenReportApi} from "/@/api/doublePreventSystem/report";
    import { productionDeviceApi } from '/@/api/doublePreventSystem/productionDevice/index.ts';
    import * as echarts from 'echarts/core';
    import {TooltipComponent, TooltipComponentOption, LegendComponent, LegendComponentOption} from 'echarts/components';
    import {PieChart, PieSeriesOption} from 'echarts/charts';
    import {LabelLayout} from 'echarts/features';
    import {CanvasRenderer} from 'echarts/renderers';
    echarts.use([TooltipComponent, LegendComponent, PieChart, CanvasRenderer, LabelLayout]);
    import '/@/theme/bigScreen.css'
    import {useScreenTheme} from "/@/stores/screenTheme"
    import {storeToRefs} from "pinia";

    // 定义接口来定义对象的类型
    interface stateType {
        boxBg: string;
        boxColor: Array<string>;
        boxBigColor: Array<string>;
        isScreenfull: boolean;
        currentTime: string
        currentTime: string;
        spiValue: number;
        spiOptions: Array<any>;
        dialogShow: string;
        dialogHide: string
    }
    export default {
    export default defineComponent({
        name: 'warningScreen',
        components: {},
        components: {
            accident: defineAsyncComponent(() => import('/@/views/riskWarningSys/warningBigScreen/components/accident.vue')),
            training: defineAsyncComponent(() => import('/@/views/riskWarningSys/warningBigScreen/components/training.vue')),
            spi: defineAsyncComponent(() => import('/@/views/riskWarningSys/warningBigScreen/components/SPI.vue')),
            risk: defineAsyncComponent(() => import('/@/views/riskWarningSys/warningBigScreen/components/risk.vue')),
            educate: defineAsyncComponent(() => import('/@/views/riskWarningSys/warningBigScreen/components/educate.vue')),
            danger: defineAsyncComponent(() => import('/@/views/riskWarningSys/warningBigScreen/components/danger.vue')),
            profession: defineAsyncComponent(() => import('/@/views/riskWarningSys/warningBigScreen/components/profession.vue')),
            message: defineAsyncComponent(() => import('/@/views/riskWarningSys/warningBigScreen/components/message.vue')),
            monitor: defineAsyncComponent(() => import('/@/views/riskWarningSys/warningBigScreen/components/monitor.vue')),
            stock: defineAsyncComponent(() => import('/@/views/riskWarningSys/warningBigScreen/components/stock.vue'))
        },
        setup() {
            const screenThemes = useScreenTheme()
            const { screenTheme }  = storeToRefs(screenThemes);
            const router = useRouter();
            const props = {
                expandTrigger: 'hover',
                checkStrictly: true
            }
            const state = reactive<stateType>({
                boxBg: 'rgba(8, 109, 209, 0.2)',
                boxColor: [],
                boxBigColor: [],
                isScreenfull: false,
                currentTime: ''
                currentTime: '',
                spiValue: 0,
                dialogShow: 'hide',
                dialogHide: 'showup',
                spiOptions: [
                    {
                        value: 0,
                        label: '公司级别SPI'
                    },
                    {
                        value: 1,
                        label: 'A事业部SPI',
                        children: [
                            {
                                value: 11,
                                label: 'A车间SPI'
                            },
                            {
                                value: 12,
                                label: 'B车间SPI'
                            },
                            {
                                value: 13,
                                label: 'C车间SPI'
                            }
                        ]
                    },
                    {
                        value: 2,
                        label: 'B事业部SPI',
                        children: [
                            {
                                value: 21,
                                label: 'D车间SPI'
                            },
                            {
                                value: 22,
                                label: 'E车间SPI'
                            },
                            {
                                value: 23,
                                label: 'F车间SPI'
                            }
                        ]
                    }
                ]
            });

            // 页面载入时执行方法
            onMounted(() => {
                getTime()
                getTheme()
            });

            const getTime =()=>{
                setInterval(() => {
                    state.currentTime = new Date().toLocaleString();
                    console.log(state.currentTime)
                }, 1000);
            });
            }

            const changeTheme = () =>{
                screenTheme.value.isDark = !screenTheme.value.isDark
                screenThemes.setScreenTheme(screenTheme.value.isDark)
                if(screenTheme.value.isDark){
                    document.getElementById('container').setAttribute( "class", 'dark' )
                    state.boxBg = 'rgba(8, 109, 209, 0.2)'
                    state.boxColor = []
                    state.boxBigColor = []
                }else{
                    document.getElementById('container').setAttribute( "class", 'light' )
                    state.boxBg = '#fff'
                    state.boxColor = ['#fff','#ccc']
                    state.boxBigColor = ['#999','#fff']
                }
            }

            const getTheme =()=>{
                if(screenTheme.value.isDark){
                    window.document.getElementById('container').setAttribute( "class", 'dark' );
                    state.boxBg = 'rgba(8, 109, 209, 0.2)'
                    state.boxColor = []
                    state.boxBigColor = []
                }else{
                    window.document.getElementById('container').setAttribute( "class", 'light' );
                    state.boxBg = '#fff'
                    state.boxColor = ['#fff','#ccc']
                    state.boxBigColor = ['#999','#fff']
                }
            }

            // 全屏
            const onScreenfullClick = () => {
@@ -118,6 +326,27 @@
                    }
                });
            };

            const openDialog = () => {
                if(state.dialogShow == 'hide'){
                    state.dialogShow = 'showup'
                }else{
                    state.dialogShow = 'hide'
                }
            };

            const closeInfo = ()=>{
                state.dialogHide = 'hide'
            };

            const jumpPage = (num) =>{
                router.push({
                    path: 'screenPage',
                    query: {
                        num: num
                    }
                });
            }

            // 返回上一页
            const goBack = () => {
@@ -138,104 +367,32 @@
            //     }
            // };

            // 隐患整改情况
            // const initRiskFix =()=>{
            //     var dom = document.getElementById('riskFix');
            //     var myChart = echarts.init(dom, null, {
            //         renderer: 'canvas',
            //         useDirtyRect: false
            //     });
            //     var app = {};
            //
            //     var option;
            //
            //     option = {
            //         tooltip: {
            //             trigger: 'item'
            //         },
            //         legend: {
            //             bottom: '5%',
            //             left: 'center'
            //         },
            //         series: [
            //             {
            //                 name: 'Access From',
            //                 type: 'pie',
            //                 radius: ['35%', '60%'],
            //                 avoidLabelOverlap: false,
            //                 itemStyle: {
            //                     borderRadius: 6,
            //                     borderColor: '#fff',
            //                     borderWidth: 2
            //                 },
            //                 label: {
            //                     alignTo: 'labelLine',
            //                     formatter: '{name|{b}}\n{value|{c}}',
            //                     minMargin: 5,
            //                     edgeDistance: 5,
            //                     lineHeight: 15,
            //                     rich: {
            //                         name: {
            //                             fontSize: 14,
            //                             color: '#666'
            //                         }
            //                     }
            //                 },
            //                 labelLine: {
            //                     length: 15,
            //                     maxSurfaceAngle: 80
            //                 },
            //                 emphasis: {
            //                     label: {
            //                         show: true,
            //                         fontSize: '40',
            //                         fontWeight: 'bold'
            //                     }
            //                 },
            //                 data: [
            //                     { value: 1048, name: '整改中' },
            //                     { value: 735, name: '待验收' },
            //                     { value: 580, name: '延期整改' },
            //                     { value: 484, name: '超期未整改' },
            //                     { value: 300, name: '已验收' }
            //                 ],
            //                 center: ['50%','40%']
            //             }
            //         ]
            //     };
            //
            //     if (option && typeof option === 'object') {
            //         myChart.setOption(option);
            //     }
            //
            //     window.addEventListener('resize', myChart.resize);
            // }

            return {
                router,
                props,
                screenTheme,
                openDialog,
                closeInfo,
                changeTheme,
                onScreenfullClick,
                jumpPage,
                goBack,
                ...toRefs(state)
            };
        }
    };
    });
</script>

<style scoped lang="scss">
    $homeNavLengh: 8;

    @media screen and (min-width: 1366px) {

    .hide{
        display: none;
    }

    @media screen and (min-width: 1024px) and (max-width: 1366px){

    .showup{
        display: block;
    }

    @media screen and (max-width: 1024px) {

    }
    .container {
    .dark {
        width: 100%;
        height: 100%;
        display: flex;
@@ -245,11 +402,102 @@
        background-size: 100% 100%;
        color: #11FEEE;

        .warn-dialog{
            position: absolute;
            z-index: 999999;
            top: 25%;
            left: 50%;
            width: 50%;
            height: 50%;
            transform: translateX(-50%);
            border-radius: 8px;
            transition: .3s;
            box-shadow: 0 15px 30px rgba(0,0,0,.2);
            border: 1px solid rgba(17,254,238,.4);
            padding: 1.5rem;
            background: rgba(0,16,32,.8);

            div{
                font-size: 1.5rem;
                text-align: center;
            }

            p{
                margin-top: 20px;
                font-size: 1.125rem;
                line-height: 28px;
                text-align: left
            }

            span{
                position: inherit;
                right: 20px;
                top: 20px;
                font-size: 1rem;
                cursor: pointer;
            }
        }

        .info-panel{
            position: absolute;
            width: 20%;
            right: 50px;
            bottom: 50px;
            z-index: 9999999;
            font-size: 1rem;
            padding: 0 10px;
            border-radius: 4px;
            cursor: pointer;
            box-shadow: 0 15px 30px rgba(0,0,0,.2);
            border: 1px solid rgba(17,254,238,.4);
            background: rgba(0,16,32,.8);

            .info-tit{
                display: flex;
                align-items: center;
                padding: 10px;
                border-bottom: 1px solid rgba(17,254,238,.4);
                justify-content: space-between;

                &>div{
                    display: flex;
                    align-items: center;

                    img{
                        width: 18px;
                        height: 18px;
                        margin-right: 10px;
                    }
                }
            }

            .info-desc{
                padding: 15px 10px;
                white-space: nowrap;
                text-overflow: ellipsis;
                overflow: hidden;
            }
            .info-num{
                position: inherit;
                width: 24px;
                height: 24px;
                line-height: 24px;
                text-align: center;
                left: -12px;
                top: -12px;
                color: #fff;
                z-index: 999999999;
                border-radius: 50%;
                border: 1px solid #ff0000;
                background: #ff0000;
            }
        }

        .header-content {
            width: 100%;
            height: 80px;
            height: 7.8%;
            padding: 0 20px;
            font-size: 20px;
            font-size: 1.25rem;
            display: flex;
            align-items: center;
            justify-content: space-around;
@@ -261,15 +509,15 @@
                align-items: center;
                justify-content: center;
                img {
                    height: 35px;
                    width: 128px;
                    width: 10rem;
                    height: auto;
                }
            }
            .title {
                width: 46%;
                font-size: 26px;
                font-size: 2rem;
                font-weight: bolder;
                line-height: 80px;
                line-height: 7.8%;
                text-align: center;
                letter-spacing: 2px;
            }
@@ -280,11 +528,12 @@
                display: flex;
                align-items: center;
                justify-content: space-around;
                font-size: 15px;
                font-size: 1rem;
                padding-left: 30px;

                .datetime {
                    color: #11FEEE;
                    font-size: 0.9rem;
                }
                .btns{
                    display: flex;
@@ -293,104 +542,491 @@
                    &>div{
                        display: flex;
                        align-items: center;
                        align-items: center;
                        font-size: 15px;
                        font-size: 1rem;
                        margin-right: 20px;

                        img{
                            width: 16px;
                            height: auto;
                            width: 1rem;
                            height: 1rem;
                        }
                        div{
                            margin-left: 6px;
                            margin-left: 0.4rem;
                            font-size: 0.9rem;
                        }
                    }
                    .themeBtn{
                        img{
                            width: 1.25rem;
                            height: 1.25rem;
                        }
                        cursor: pointer;
                    }
                    .fullBtn{
                        cursor: pointer;
                    }
                    .backBtn{
                        cursor: pointer;
                    }
                }
            }
        }
        .main-content{
            width: 100%;
            height: 100%;
            padding: 20px;
            height: calc(100vh - 7.8%);
            padding: 0.4rem 1.5rem 2rem;
            display: flex;
            align-items: center;
            justify-content: space-between;

            .main-left{
                width: calc(25% - 10px);
            &>div{
                height: 100%;
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                align-items: flex-start;
                &>div{
                    padding: 20px 15px 10px;
                    box-sizing: border-box;
                    position: relative;
                    .box-bg{
                        position: absolute;
                        width: 100%;
                        height: 100%;
                        left: 0;
                        top: 0;
                        right: 0;
                        bottom: 0;
                        margin: auto;
                        color: #11feee;
                        font-weight: bolder;
                    }

                .left-top{
                    width: 100%;
                    height: calc((100%/3) - (40px/3));
                    .dv-border-box-11{
                        ::v-deep(.dv-border-svg-container){
                            .dv-border-box-11-title{
                                font-size: 1.5rem;
                                fill: #11feee !important;
                            }
                        }
                    }
                    .part-tit{
                        position: absolute;
                        top: 20px;
                        left: 0;
                        height: 20px;
                        width: 100%;
                        padding: 0 15px;
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                        z-index: 9999;

                        span{
                            font-size: 1.25rem;
                            font-weight: bolder;
                            color: #11feee;
                        }

                        img{
                            width: 1.2rem;
                            height: 1.2rem;
                            cursor: pointer;
                        }
                    }
                    .chart-box{
                        position: absolute;
                        top: 40px;
                        bottom: 0;
                        left: 0;
                        right: 0;
                        width: 100%;
                        height: calc(100% - 50px);
                        z-index: 99999;
                        .train-tip{
                            display: block;
                            font-size: 0.8rem;
                            margin-top: 2%;
                            margin-left: 5%;
                            color: #fff;
                            height: 1rem;
                        }

                        .train-chart{
                            width: 100%;
                            height: calc(100% - 1rem);
                        }
                    }
                }
                .left-mid{
            }

            .main-left{
                width: calc(25% - 5px);
                &>div{
                    width: 100%;
                    height: calc((100%/3) - (40px/3));
                }
                .left-bottom{
                    width: 100%;
                    height: calc((100%/3) - (40px/3));
                    height: calc((100%/3) - (20px/3));
                }
            }
            .main-middle{
                width: calc(50% - 20px);
                height: 100%;
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                align-items: flex-start;
                width: calc(50% - 10px);

                .mid-top{
                    width: 100%;
                    height: calc((200%/3) - (80px/3) + 20px);
                    height: calc((200% - 40px)/3 + 10px);
                }

                .mid-bottom{
                    display: flex;
                    width: 100%;
                    height: calc(100% - (200%/3) + (80px/3) - 40px);
                    height: calc((100%/3) - (20px/3));
                    justify-content: space-between;
                    padding: 0;
                    background: none;
                    border-radius: 0;

                    &>div {
                        position: relative;
                        width: calc((100% - 40px)/3);
                        width: calc((100% - 20px)/3);
                        border-radius: 8px;
                        overflow: hidden;

                        .chart-tit {
                            position: absolute;
                            left: 20px;
                            top: 20px;
                            font-weight: 700;
                            z-index: 3;
                        }
                        padding: 10px 15px;
                        box-sizing: border-box;
                    }
                }
            }
            .main-right{
                width: calc(25% - 10px);
                width: calc(25% - 5px);
                &>div{
                    width: 100%;
                    height: calc((100%/3) - (20px/3));
                }
            }
        }
    }
    .light {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        background: url('../../../assets/warningScreen/riskprocast-light.jpg') no-repeat center;
        background-size: 100% 100%;
        color: #000;

        .warn-dialog{
            position: absolute;
            z-index: 999999;
            top: 25%;
            left: 50%;
            width: 50%;
            height: 50%;
            transform: translateX(-50%);
            border-radius: 8px;
            transition: .3s;
            box-shadow: 0 15px 30px rgba(0,0,0,.2);
            border: 1px solid #ccc;
            padding: 1.5rem;
            background: #fff;

            div{
                font-size: 1.5rem;
                text-align: center;
            }

            p{
                margin-top: 20px;
                font-size: 1.125rem;
                line-height: 28px;
                text-align: left
            }

            span{
                position: inherit;
                right: 20px;
                top: 20px;
                font-size: 1rem;
                cursor: pointer;
            }
        }

        .info-panel{
            position: absolute;
            width: 20%;
            right: 50px;
            bottom: 50px;
            z-index: 9999999;
            font-size: 1rem;
            color: #333;
            padding: 0 10px;
            border-radius: 4px;
            cursor: pointer;
            box-shadow: 0 15px 30px rgba(0,0,0,.2);
            border: 1px solid #ccc;
            background: #fff;

            .info-tit{
                display: flex;
                align-items: center;
                padding: 10px;
                border-bottom: 1px solid #ccc;
                justify-content: space-between;

                &>div{
                    display: flex;
                    align-items: center;

                    img{
                        width: 18px;
                        height: 18px;
                        margin-right: 10px;
                    }
                }
            }

            .info-desc{
                padding: 15px 10px;
                white-space: nowrap;
                text-overflow: ellipsis;
                overflow: hidden;
            }
            .info-num{
                position: inherit;
                width: 24px;
                height: 24px;
                line-height: 24px;
                text-align: center;
                left: -12px;
                top: -12px;
                color: #fff;
                z-index: 999999999;
                border-radius: 50%;
                border: 1px solid #ff0000;
                background: #ff0000;
            }
        }

        .header-content {
            width: 100%;
            height: 7.8%;
            padding: 0 20px;
            font-size: 1.25rem;
            display: flex;
            align-items: center;
            justify-content: space-around;
            z-index: 9;

            .logo {
                width: 27%;
                display: flex;
                align-items: center;
                justify-content: center;
                img {
                    width: 10rem;
                    height: auto;
                }
            }
            .title {
                width: 46%;
                font-size: 2rem;
                font-weight: bolder;
                line-height: 7.8%;
                text-align: center;
                letter-spacing: 2px;
            }

            .title-right {
                width: 27%;
                height: 90px;
                display: flex;
                align-items: center;
                justify-content: space-around;
                font-size: 1rem;
                padding-left: 30px;

                .datetime {
                    color: #000;
                    font-size: 0.9rem;
                }
                .btns{
                    display: flex;
                    align-items: center;

                    &>div{
                        display: flex;
                        align-items: center;
                        font-size: 1rem;
                        margin-right: 20px;

                        img{
                            width: 1rem;
                            height: 1rem;
                        }
                        div{
                            margin-left: 0.4rem;
                            font-size: 0.9rem;
                        }
                    }
                    .themeBtn{
                        img{
                            width: 1.25rem;
                            height: 1.25rem;
                        }
                        cursor: pointer;
                    }
                    .fullBtn{
                        cursor: pointer;
                    }
                    .backBtn{
                        cursor: pointer;
                    }
                }
            }
        }
        .main-content{
            width: 100%;
            height: calc(100vh - 7.8%);
            padding: 0.4rem 1.5rem 2rem;
            display: flex;
            align-items: center;
            justify-content: space-between;

            &>div{
                height: 100%;
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                align-items: flex-start;
                &>div{
                    padding: 20px 15px 10px;
                    box-sizing: border-box;
                    position: relative;
                    .box-bg{
                        position: absolute;
                        width: 100%;
                        height: 100%;
                        left: 0;
                        top: 0;
                        right: 0;
                        bottom: 0;
                        margin: auto;
                        color: #000;
                        font-weight: bolder;
                    }

                    .dv-border-box-11{
                        :deep(.dv-border-svg-container){
                                .dv-border-box-11-title{
                                    font-size: 1.5rem;
                                    fill: #000 !important;
                                }
                        }
                    }
                    .part-tit{
                        position: absolute;
                        top: 20px;
                        left: 0;
                        height: 20px;
                        width: 100%;
                        padding: 0 15px;
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                        z-index: 9999;
                        span{
                            font-size: 1.25rem;
                            font-weight: bolder;
                            color: #000;
                        }

                        img{
                            width: 1.20rem;
                            height: 1.20rem;
                            cursor: pointer;
                        }
                    }
                    .chart-box{
                        position: absolute;
                        top: 40px;
                        bottom: 0;
                        left: 0;
                        right: 0;
                        width: 100%;
                        height: calc(100% - 50px);
                        z-index: 99999;
                        .train-tip{
                            display: block;
                            font-size: 0.8rem;
                            margin-top: 2%;
                            margin-left: 5%;
                            color: #333;
                            height: 1rem;
                        }

                        .train-chart{
                            width: 100%;
                            height: calc(100% - 1rem);
                        }
                    }
                }
            }

            .main-left{
                width: calc(25% - 5px);

                .left-top{
                    width: 100%;
                    height: calc((100%/3) - (20px/3));

                }
                .left-mid{
                    width: 100%;
                    height: calc((100%/3) - (20px/3));
                }
                .left-bottom{
                    width: 100%;
                    height: calc((100%/3) - (20px/3));
                }
            }
            .main-middle{
                width: calc(50% - 10px);

                .mid-top{
                    width: 100%;
                    height: calc((200% - 40px)/3 + 10px);
                }

                .mid-bottom{
                    display: flex;
                    width: 100%;
                    height: calc((100%/3) - (20px/3));
                    justify-content: space-between;
                    padding: 0;
                    background: none;
                    border-radius: 0;

                    &>div {
                        position: relative;
                        width: calc((100% - 20px)/3);
                        border-radius: 8px;
                        overflow: hidden;
                        padding: 10px 15px;
                        box-sizing: border-box;
                    }
                }
            }
            .main-right{
                width: calc(25% - 5px);

                .right-top{
                    width: 100%;
                    height: calc((100%/3) - (40px/3));
                    height: calc((100%/3) - (20px/3));
                }
                .right-mid{
                    width: 100%;
                    height: calc((100%/3) - (40px/3));
                    height: calc((100%/3) - (20px/3));
                }
                .right-bottom{
                    width: 100%;
                    height: calc((100%/3) - (40px/3));
                    height: calc((100%/3) - (20px/3));
                }
            }
        }