Default Changelist

Admin

2022-09-05 421d5510fa769b99aa41dadfc7dfa59a5939a642

 src/views/riskWarningSys/warningBigScreen/index.vue

@@ -1,22 +1,28 @@
<template>
    <div class="container">
    <div id="container" class="dark">
        <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,20 +31,22 @@
        <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>
@@ -46,7 +54,7 @@
                    </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>
@@ -58,7 +66,8 @@
                                        :value="item.value"
                                />
                            </el-select>
                            <img @click="jumpPage(3)" src="../../../assets/warningScreen/small-full.png">
<!--                            <img @click="jumpPage(3)" src="../../../assets/warningScreen/small-full.png">-->
                            <Switch style="width: 1.2rem;height: 1.2rem;cursor: pointer" @click="jumpPage(3)"/>
                        </div>

                    </div>
@@ -69,7 +78,7 @@
            </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>
                    <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: 12%;padding: 0 4%">
                        <el-cascader
                                class="spiSe"
@@ -77,41 +86,46 @@
                                v-model="spiValue"
                                :options="spiOptions"
                                :props="props"
                                :show-all-levels="false"
                                @change="handleChange"
                        />
<!--                        <span>SPI数据分析</span>-->
                        <img @click="jumpPage(4)" src="../../../assets/warningScreen/small-full.png">
<!--                        <img @click="jumpPage(4)" src="../../../assets/warningScreen/small-full.png">-->
                        <Switch style="width: 1.2rem;height: 1.2rem;cursor: pointer" @click="jumpPage(4)"/>
                    </div>
                    <div class="chart-box">
                        <spi :size="1" :dep="spiValue"></spi>
                        <spi :size="1"></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 +135,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,9 +181,14 @@
    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;
@@ -190,11 +211,17 @@
            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,
@@ -292,6 +319,7 @@
            // 页面载入时执行方法
            onMounted(() => {
                getTime()
                getTheme()
            });

            const getTime =()=>{
@@ -299,6 +327,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 = ['#ccc','#333']
                    state.boxBigColor = ['#666','#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 = ['#ccc','#333']
                    state.boxBigColor = ['#666','#fff']
                }
            }

            // 全屏
            const onScreenfullClick = () => {
                if (!screenfull.isEnabled) {
@@ -346,6 +405,8 @@
            return {
                router,
                props,
                screenTheme,
                changeTheme,
                onScreenfullClick,
                jumpPage,
                goBack,
@@ -357,8 +418,7 @@

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

    .container {
    .dark {
        width: 100%;
        height: 100%;
        display: flex;
@@ -420,14 +480,21 @@
                        margin-right: 20px;

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

                    .dv-border-box-11{
                        :deep(.dv-border-svg-container){
                                .dv-border-box-11-title{
                                    font-size: 1.5rem;
                                    fill: #11feee !important;
                                }
                        ::v-deep(.dv-border-svg-container){
                            .dv-border-box-11-title{
                                font-size: 1.5rem;
                                fill: #11feee !important;
                            }
                        }
                    }
                    .part-tit{
@@ -577,6 +644,304 @@
                        }

                        img{
                            width: 1.2rem;
                            height: 1.2rem;
                            cursor: pointer;
                        }
                    }
                    .chart-box{
                        width: 100%;
                        height: calc(100% - 20px);
                        margin-top: 20px;
                        .train-tip{
                            display: block;
                            font-size: 0.8rem;
                            margin-top: 5%;
                            margin-left: 2%;
                            color: #fff;
                        }
                        accident{
                            width: 100%;
                            height: 100%;
                        }

                        training{
                            width: 100%;
                            height: 100%;
                        }
                    }
                }
            }

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

        .header-content {
            width: 100%;
            height: 72px;
            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 {
                    height: 35px;
                    width: 128px;
                }
            }
            .title {
                width: 46%;
                font-size: 2rem;
                font-weight: bolder;
                line-height: 72px;
                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;
                }
                .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: 6px;
                        }
                    }
                    .themeBtn{
                        img{
                            width: 1.25rem;
                            height: 1.25rem;
                        }
                        cursor: pointer;
                    }
                    .fullBtn{
                        cursor: pointer;
                    }
                    .backBtn{
                        cursor: pointer;
                    }
                }
            }
        }
        .main-content{
            width: 100%;
            height: calc(100vh - 72px);
            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;
                        div{
                            width: 40%;
                            display: flex;
                            align-items: center;
                            justify-content: end;
                        }
                        span{
                            font-size: 1.25rem;
                            font-weight: bolder;
                            color: #000;
                        }
                        ::v-deep(.el-cascader){
                            width: 25% !important;
                        }
                        ::v-deep(.el-popper){
                            background-color: #fff;
                            border: 1px solid #ccc;
                            color: #000;
                            .el-cascader-node__label{
                                color: #000;
                            }
                            .el-icon{
                                color: #000;
                            }
                            .el-cascader-node{
                                &:hover{
                                    background: #ccc;
                                }
                            }
                        }
                        ::v-deep(.el-popper__arrow){
                            &::before{
                                background-color: #fff !important;
                                border: 1px solid #ccc;
                            }
                        }
                        ::v-deep(.el-input__wrapper){
                            width: 20%;
                            box-shadow: none;
                            border: 1px solid #ccc;
                            background: #fff !important;
                            height: 2.5rem;
                            color: #000;

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

                            ::v-deep(.el-popper){
                                background-color: rgba(255,255,255,1);
                                border: 1px solid #ccc;
                                color: #fff;
                                .el-select-dropdown__item{
                                    color: #000;
                                }
                                .el-select-dropdown__item.hover{
                                    background: #ccc;
                                }
                            }
                            ::v-deep(.el-popper__arrow){
                                &::before{
                                    background-color: rgba(255,255,255,.6) !important;
                                    border: 1px solid #ccc;
                                }
                            }
                            ::v-deep(.el-input__wrapper){
                                box-shadow: none;
                                border: 1px solid #ccc;
                                background: #fff !important;
                                height: 1.5rem;
                                color: #fff;

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

                        img{
                            width: 1.20rem;
                            height: 1.20rem;
                            cursor: pointer;
@@ -591,6 +956,7 @@
                            font-size: 0.8rem;
                            margin-top: 5%;
                            margin-left: 2%;
                            color: #333;
                        }
                        accident{
                            width: 100%;