删除无用页面

Admin

2022-09-21 999cab6fb3fc6d2a288d365da991351c5a396bf0

 src/views/riskWarningSys/warningBigScreen/index.vue

@@ -1,5 +1,25 @@
<template>
    <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 v-if="screenTheme.isDark" src="../../../assets/warningScreen/logo_dark.png" alt="" />
@@ -50,51 +70,29 @@
                    </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="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">-->
                            <Switch style="width: 1.2rem;height: 1.2rem;cursor: pointer" @click="jumpPage(3)"/>
                        </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="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"
                                :teleported="false"
                                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">-->
                    <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"></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">
@@ -191,10 +189,10 @@
        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',
@@ -224,54 +222,9 @@
                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,
@@ -374,6 +327,18 @@
                });
            };

            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',
@@ -406,6 +371,8 @@
                router,
                props,
                screenTheme,
                openDialog,
                closeInfo,
                changeTheme,
                onScreenfullClick,
                jumpPage,
@@ -418,6 +385,13 @@

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

    .showup{
        display: block;
    }
    .dark {
        width: 100%;
        height: 100%;
@@ -427,6 +401,97 @@
        background: url('../../../assets/warningScreen/riskprocast.jpg') no-repeat center;
        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%;
@@ -555,94 +620,11 @@
                        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;
                                }
                            }
                        }

                        img{
@@ -652,24 +634,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%;
                            margin-top: 2%;
                            margin-left: 5%;
                            color: #fff;
                        }
                        accident{
                            width: 100%;
                            height: 100%;
                            height: 1rem;
                        }

                        training{
                        .train-chart{
                            width: 100%;
                            height: 100%;
                            height: calc(100% - 1rem);
                        }
                    }
                }
@@ -727,6 +711,98 @@
        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%;
@@ -855,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: #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{
@@ -952,24 +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%;
                            margin-top: 2%;
                            margin-left: 5%;
                            color: #333;
                        }
                        accident{
                            width: 100%;
                            height: 100%;
                            height: 1rem;
                        }

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