删除无用页面

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,93 +51,79 @@
        <div class="main-content">
            <div class="main-left">
                <div class="left-top">
                    <dv-border-box-13 backgroundColor="rgba(8, 109, 209, 0.2)" class="box-bg"></dv-border-box-13>
                    <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">
<!--                        <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"></accident>
                        <accident :size="1" :theme="screenTheme.isDark"></accident>
                    </div>
                </div>
                <div class="left-mid">
                    <dv-border-box-13 backgroundColor="rgba(8, 109, 209, 0.2)" class="box-bg"></dv-border-box-13>
                    <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">
<!--                        <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 :size="1"></training>
                        <training class="train-chart" :size="1"></training>
                    </div>
                </div>
                <div class="left-bottom">
                    <dv-border-box-13 backgroundColor="rgba(8, 109, 209, 0.2)" class="box-bg"></dv-border-box-13>
                    <dv-border-box-13 :backgroundColor="boxBg" :color="boxColor" class="box-bg"></dv-border-box-13>
                    <div class="part-tit">
                        <span>| 隐患等级数量分布</span>
                        <div>
                            <el-select class="selector" v-model="month" placeholder="Select" :teleported="false" size="default">
                                <el-option
                                        v-for="item in optionList"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value"
                                />
                            </el-select>
                            <img @click="jumpPage(3)" src="../../../assets/warningScreen/small-full.png">
                        </div>

                        <Switch style="width: 1.2rem;height: 1.2rem;cursor: pointer" @click="jumpPage(3)"/>
                    </div>
                    <div class="chart-box">
                        <risk :size="1" :month="month"></risk>
                        <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="rgba(8, 109, 209, 0.2)" class="box-bg"></dv-border-box-11>
                    <div class="part-tit" style="position: absolute;top: 12%;padding: 0 4%">
                        <el-cascader
                                class="spiSe"
                                :teleported="false"
                                v-model="spiValue"
                                :options="spiOptions"
                                :props="props"
                                @change="handleChange"
                        />
<!--                        <span>SPI数据分析</span>-->
                        <img @click="jumpPage(4)" src="../../../assets/warningScreen/small-full.png">
                    <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">
                        <spi :size="1" :dep="spiValue"></spi>
                    <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="rgba(8, 109, 209, 0.2)" class="box-bg"></dv-border-box-13>
                        <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">
<!--                            <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="rgba(8, 109, 209, 0.2)" class="box-bg"></dv-border-box-13>
                        <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">
<!--                            <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"></danger>
                            <danger :size="1" :theme="screenTheme.isDark"></danger>
                        </div>
                    </div>
                    <div class="mid-bot-r">
                        <dv-border-box-13 backgroundColor="rgba(8, 109, 209, 0.2)" class="box-bg"></dv-border-box-13>
                        <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">
<!--                            <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>
@@ -121,30 +133,32 @@
            </div>
            <div class="main-right">
                <div class="right-top">
                    <dv-border-box-13 backgroundColor="rgba(8, 109, 209, 0.2)" class="box-bg"></dv-border-box-13>
                    <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">
<!--                        <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"></message>
                        <message :size="1" :theme="screenTheme.isDark"></message>
                    </div>
                </div>
                <div class="right-mid">
                    <dv-border-box-13 backgroundColor="rgba(8, 109, 209, 0.2)" class="box-bg"></dv-border-box-13>
                    <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">
<!--                        <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="rgba(8, 109, 209, 0.2)" class="box-bg"></dv-border-box-13>
                    <dv-border-box-13 :backgroundColor="boxBg" :color="boxColor" class="box-bg"></dv-border-box-13>
                    <div class="part-tit">
                        <span>| 风险应急物资储备</span>
                        <img @click="jumpPage(10)" src="../../../assets/warningScreen/small-full.png">
                        <Switch style="width: 1.2rem;height: 1.2rem;cursor: pointer" @click="jumpPage(10)"/>
                    </div>
                    <div class="chart-box">
                        <stock :size="1"></stock>
@@ -165,15 +179,20 @@
    import {hiddenReportApi} from "/@/api/doublePreventSystem/report";
    import { productionDeviceApi } from '/@/api/doublePreventSystem/productionDevice/index.ts';
    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;
        month: number;
        spiValue: number;
        optionList: Array<any>;
        spiOptions: Array<any>
        spiOptions: Array<any>;
        dialogShow: string;
        dialogHide: string
    }
    export default defineComponent({
        name: 'warningScreen',
@@ -190,61 +209,22 @@
            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: '',
                month: 0,
                spiValue: 0,
                optionList: [
                    {
                        label: '年度',
                        value: 0
                    },
                    {
                        label: '一月',
                        value: 1
                    },
                    {
                        label: '二月',
                        value: 2
                    },
                    {
                        label: '三月',
                        value: 3
                    },
                    {
                        label: '四月',
                        value: 4
                    },
                    {
                        label: '五月',
                        value: 5
                    },
                    {
                        label: '六月',
                        value: 6
                    },
                    {
                        label: '七月',
                        value: 7
                    },
                    {
                        label: '八月',
                        value: 8
                    },
                    {
                        label: '九月',
                        value: 9
                    },
                    {
                        label: '十月',
                        value: 10
                    }
                ],
                dialogShow: 'hide',
                dialogHide: 'showup',
                spiOptions: [
                    {
                        value: 0,
@@ -292,6 +272,7 @@
            // 页面载入时执行方法
            onMounted(() => {
                getTime()
                getTheme()
            });

            const getTime =()=>{
@@ -299,6 +280,37 @@
                    state.currentTime = new Date().toLocaleString();
                }, 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 = () => {
                if (!screenfull.isEnabled) {
@@ -313,6 +325,18 @@
                        state.isScreenfull = false;
                    }
                });
            };

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

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

            const jumpPage = (num) =>{
@@ -346,6 +370,10 @@
            return {
                router,
                props,
                screenTheme,
                openDialog,
                closeInfo,
                changeTheme,
                onScreenfullClick,
                jumpPage,
                goBack,
@@ -357,8 +385,14 @@

<style scoped lang="scss">
    $homeNavLengh: 8;
    .hide{
        display: none;
    }

    .container {
    .showup{
        display: block;
    }
    .dark {
        width: 100%;
        height: 100%;
        display: flex;
@@ -368,9 +402,100 @@
        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: 72px;
            height: 7.8%;
            padding: 0 20px;
            font-size: 1.25rem;
            display: flex;
@@ -384,15 +509,15 @@
                align-items: center;
                justify-content: center;
                img {
                    height: 35px;
                    width: 128px;
                    width: 10rem;
                    height: auto;
                }
            }
            .title {
                width: 46%;
                font-size: 2rem;
                font-weight: bolder;
                line-height: 72px;
                line-height: 7.8%;
                text-align: center;
                letter-spacing: 2px;
            }
@@ -408,6 +533,7 @@

                .datetime {
                    color: #11FEEE;
                    font-size: 0.9rem;
                }
                .btns{
                    display: flex;
@@ -420,14 +546,22 @@
                        margin-right: 20px;

                        img{
                            width: 16px;
                            height: auto;
                            width: 1rem;
                            height: 1rem;
                        }
                        div{
                            margin-left: 6px;
                            margin-left: 0.4rem;
                            font-size: 0.9rem;
                        }
                    }
                    .fullbtn{
                    .themeBtn{
                        img{
                            width: 1.25rem;
                            height: 1.25rem;
                        }
                        cursor: pointer;
                    }
                    .fullBtn{
                        cursor: pointer;
                    }
                    .backBtn{
@@ -438,8 +572,8 @@
        }
        .main-content{
            width: 100%;
            height: 100%;
            padding: 0 25px 25px;
            height: calc(100vh - 7.8%);
            padding: 0.4rem 1.5rem 2rem;
            display: flex;
            align-items: center;
            justify-content: space-between;
@@ -468,10 +602,321 @@
                    }

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

            .main-left{
                width: calc(25% - 5px);
                &>div{
                    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);
                &>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: #11feee !important;
                                    fill: #000 !important;
                                }
                        }
                    }
@@ -486,94 +931,10 @@
                        justify-content: space-between;
                        align-items: center;
                        z-index: 9999;
                        div{
                            width: 40%;
                            display: flex;
                            align-items: center;
                            justify-content: end;
                        }
                        span{
                            font-size: 1.25rem;
                            font-weight: bolder;
                            color: #11feee;
                        }
                        ::v-deep(.el-cascader){
                            width: 25% !important;
                        }
                        ::v-deep(.el-popper){
                            background-color: rgba(10,31,92,1);
                            border: 1px solid rgba(17,254,238,.4);
                            color: #11FEEE;
                            .el-cascader-node__label{
                                color: #11FEEE;
                            }
                            .el-icon{
                                color: #11FEEE;
                            }
                            .el-cascader-node{
                                &:hover{
                                    background: #0049af;
                                }
                            }
                        }
                        ::v-deep(.el-popper__arrow){
                            &::before{
                                background-color: rgba(10,31,92,.6) !important;
                                border: 1px solid rgba(17,254,238,.4);
                            }
                        }
                        ::v-deep(.el-input__wrapper){
                            width: 20%;
                            box-shadow: none;
                            border: 1px solid rgba(17,254,238,.2);
                            background: rgba(10,31,92,.6) !important;
                            height: 2.5rem;
                            color: #11FEEE;

                            input{
                                font-size: 1.25rem;
                                color: #11FEEE;
                            }
                            .el-icon{
                                color: #11FEEE;
                            }
                        }
                        .selector{
                            width: calc(100% - 1.25rem);
                            margin-right: 0.8rem;

                            ::v-deep(.el-popper){
                                background-color: rgba(10,31,92,1);
                                border: 1px solid rgba(17,254,238,.4);
                                color: #11FEEE;
                                .el-select-dropdown__item{
                                    color: #11FEEE;
                                }
                                .el-select-dropdown__item.hover{
                                    background: #0049af;
                                }
                            }
                            ::v-deep(.el-popper__arrow){
                                &::before{
                                    background-color: rgba(10,31,92,.6) !important;
                                    border: 1px solid rgba(17,254,238,.4);
                                }
                            }
                            ::v-deep(.el-input__wrapper){
                                box-shadow: none;
                                border: 1px solid rgba(17,254,238,.2);
                                background: rgba(10,31,92,.6) !important;
                                height: 1.5rem;
                                color: #11FEEE;

                                input{
                                    font-size: 0.8rem;
                                    color: #11FEEE;
                                }
                                .el-icon{
                                    color: #11FEEE;
                                }
                            }
                            color: #000;
                        }

                        img{
@@ -583,23 +944,26 @@
                        }
                    }
                    .chart-box{
                        position: absolute;
                        top: 40px;
                        bottom: 0;
                        left: 0;
                        right: 0;
                        width: 100%;
                        height: calc(100% - 20px);
                        margin-top: 20px;
                        height: calc(100% - 50px);
                        z-index: 99999;
                        .train-tip{
                            display: block;
                            font-size: 0.8rem;
                            margin-top: 5%;
                            margin-left: 2%;
                        }
                        accident{
                            width: 100%;
                            height: 100%;
                            margin-top: 2%;
                            margin-left: 5%;
                            color: #333;
                            height: 1rem;
                        }

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