Default Changelist

马宇豪

2023-05-22 d0bec404f2c22ca04e8592f1a2ba0b39eab0be2f

 src/views/newHome/index.vue

@@ -14,14 +14,14 @@
                <span></span>
                <div class="avator">
                    <img src="../../assets/menu/admin.png" />
                    <div>admin</div>
                    <div>{{userName}}</div>
                </div>
            </div>
        </div>
        <div class="leftCont"></div>
        <div class="topCont">
            <div class="topInfo">
                <div class="topTit">新疆国泰新华<br />安全风险预警监测系统</div>
                <div class="topTit">新疆国泰新华<br />安全风险预警监测系统（试运行）</div>
                <div class="topTime">
                    <div class="time">
                        {{ time }}
@@ -45,19 +45,19 @@
                        <div>
                            <img class="iconImg" src="../../assets/newMenu/icon1.png" />
                            <div>
                                <div class="itemTit1">安全风险综合预警<br />预报平台</div>
                                <div class="enTit1">Security risk comprehensive early warning and forecast platform</div>
                                <div class="itemTit1">智能安全风险综合预警<br />预报平台</div>
                                <div class="enTit1">Intelligent Security Risk Comprehensive Forewarning and Forecasting Platform</div>
                            </div>
                        </div>
                    </div>
                    <img class="bgImg1" src="../../assets/newMenu/card-1.png" />
                </div>
                <div class="grid-content cont-bg-1" v-throttle @click="render('2')">
                <div class="grid-content cont-bg-1" v-throttle @click="toDoublePrevent">
                    <div class="toplayer">
                        <img class="iconImg" src="../../assets/newMenu/icon2.png" />
                        <div>
                            <div class="itemTit">双重预防系统</div>
                            <div class="enTit">Double prevention</div>
                            <div class="itemTit">智能安全双重预防系统</div>
                            <div class="enTit">Intelligent Security Dual Prevention System</div>
                        </div>
                    </div>
                    <img class="bgImg" src="../../assets/newMenu/card-4.png" />
@@ -66,8 +66,8 @@
                    <div class="toplayer">
                        <img class="iconImg" src="../../assets/newMenu/icon3.png" />
                        <div>
                            <div class="itemTit">智能巡检系统</div>
                            <div class="enTit">Intelligent inspection system</div>
                            <div class="itemTit">智能安全巡检系统</div>
                            <div class="enTit">Intelligent Security Patrol System</div>
                        </div>
                    </div>
                    <img class="bgImg" src="../../assets/newMenu/card-8.png" />
@@ -76,18 +76,28 @@
                    <div class="toplayer">
                        <img class="iconImg" src="../../assets/newMenu/icon4.png" />
                        <div>
                            <div class="itemTit">特殊作业系统</div>
                            <div class="enTit">special work</div>
                            <div class="itemTit">智能安全特殊作业系统</div>
                            <div class="enTit">Intelligent Security Special Operating System</div>
                        </div>
                    </div>
                    <img class="bgImg" src="../../assets/newMenu/card-7.png" />
                </div>
                <div class="grid-content cont-bg-1" v-throttle @click="render('7')">
                <div class="grid-content cont-bg-1" v-throttle @click="toManLocation">
                  <div class="toplayer">
                    <img class="iconImg" src="../../assets/newMenu/icon12.png" />
                    <div>
                      <div class="itemTit">人员定位系统</div>
                      <div class="enTit">Personnel Positioning System</div>
                    </div>
                  </div>
                  <img class="bgImg" src="../../assets/newMenu/card-12.png" />
                </div>
                <div class="grid-content cont-bg-2" v-throttle @click="render('7')">
                    <div class="toplayer">
                        <img class="iconImg" src="../../assets/newMenu/icon5.png" />
                        <div>
                            <div class="itemTit">目标责任管理系统</div>
                            <div class="enTit">Target Responsibility Management</div>
                            <div class="itemTit">安全目标责任管理系统</div>
                            <div class="enTit">Security Target Responsibility Management System</div>
                        </div>
                    </div>
                    <img class="bgImg" src="../../assets/newMenu/card-2.png" />
@@ -97,7 +107,7 @@
                        <img class="iconImg" src="../../assets/newMenu/icon6.png" />
                        <div>
                            <div class="itemTit">安全知识图谱系统</div>
                            <div class="enTit">Security Knowledge Graph</div>
                            <div class="enTit">Security Knowledge Graph System</div>
                        </div>
                    </div>
                    <img class="bgImg" src="../../assets/newMenu/card-3.png" />
@@ -107,7 +117,7 @@
                        <img class="iconImg" src="../../assets/newMenu/icon7.png" />
                        <div>
                            <div class="itemTit">设备综合管控系统</div>
                            <div class="enTit">Comprehensive equipment control</div>
                            <div class="enTit">Equipment Integrated Management and Control System</div>
                        </div>
                    </div>
                    <img class="bgImg" src="../../assets/newMenu/card-9.png" />
@@ -117,7 +127,7 @@
                        <img class="iconImg" src="../../assets/newMenu/icon8.png" />
                        <div>
                            <div class="itemTit">应急管理系统</div>
                            <div class="enTit">Emergency management</div>
                            <div class="enTit">Emergency Management System</div>
                        </div>
                    </div>
                    <img class="bgImg" src="../../assets/newMenu/card-5.png" />
@@ -126,8 +136,8 @@
                    <div class="toplayer">
                        <img class="iconImg" src="../../assets/newMenu/icon9.png" />
                        <div>
                            <div class="itemTit">危险化学品全生命周期安全管理系统</div>
                            <div class="enTit">Full life cycle of hazardous chemicals</div>
                            <div class="itemTit">智能安全危险化学品全生命周期管控系统</div>
                            <div class="enTit">Intelligent Security Hazardous Chemicals Life Cycle Safety Management System </div>
                        </div>
                    </div>
                    <img class="bgImg" src="../../assets/newMenu/card-10.png" />
@@ -136,18 +146,28 @@
                    <div class="toplayer">
                        <img class="iconImg" src="../../assets/newMenu/icon10.png" />
                        <div>
                            <div class="itemTit">事故管理系统</div>
                            <div class="enTit">Incident Management</div>
                            <div class="itemTit">安全事故管理系统</div>
                            <div class="enTit">Security Incident Management System</div>
                        </div>
                    </div>
                    <img class="bgImg" src="../../assets/newMenu/card-6.png" />
                </div>
                <div class="grid-content cont-bg-2" v-throttle @click="toSmartFactory">
                  <div class="toplayer">
                    <img class="iconImg" src="../../assets/newMenu/icon13.png" />
                    <div>
                      <div class="itemTit">智能工厂系统</div>
                      <div class="enTit">Intelligent Factory System</div>
                    </div>
                  </div>
                  <img class="bgImg" src="../../assets/newMenu/card-13.png" />
                </div>
                <div class="grid-content cont-bg-2" @click="render('1')">
                    <div class="toplayer">
                        <img class="iconImg" src="../../assets/newMenu/icon11.png" />
                        <div>
                            <div class="itemTit">安全基础信息系统</div>
                            <div class="enTit">Basic data permissions</div>
                            <div class="enTit">Basic Security Information System</div>
                        </div>
                    </div>
                    <img class="bgImg" src="../../assets/newMenu/card-11.png" />
@@ -232,6 +252,10 @@
            dayTime: '',
            isScreenfull: false
        });

        const userName = computed(() =>{
            return userInfos.value.userName
        })
        // 获取布局配置信息
        const getThemeConfig = computed(() => {
            return themeConfig.value;
@@ -324,10 +348,20 @@
        // 去风险大屏
        const toRiskPlatform = () => {
            // router.push({
            //     name: "bigDataScreen"
            //     name: "warningScreen"
            // });
            window.open('http://39.104.85.193:8585/');
        };

        const toDoublePrevent = () => {
           window.open('http://121.239.169.27:6801');
        };
        const toSmartFactory = () =>{
          window.open('http://10.211.134.139:5522/#/login');
        }
        const toManLocation = () =>{
          window.open('http://10.211.134.138:8081/GUOTAI');
        }
        const throttle = (renderMenu: any, delay: number) => {
            let flag = true;
            let count = 0;
@@ -395,11 +429,15 @@
        });
        return {
            render,
            userName,
            logoMini,
            onLoginOut,
            getDateTime,
            renderToNew,
            toRiskPlatform,
            toDoublePrevent,
            toSmartFactory,
            toManLocation,
            onScreenfullClick,
            loginIconTwo,
            getThemeConfig,
@@ -410,13 +448,45 @@
</script>

<style scoped lang="scss">
@media screen and (min-width: 1400px) {
    @keyframes showDown {
        100% {
            position: absolute;
            top: 60px;
        }
    }
    @keyframes moveDown {
        100% {
            position: absolute;
            top: 0;
        }
    }
    @keyframes moveRight {
        100% {
            position: absolute;
            left: 0;
        }
    }
    @keyframes upDown {
        50% {
            -webkit-transform: translateY(-8px);
            -ms-transform: translateY(-8px);
            -o-transform: translateY(-8px);
            transform: translateY(-8px);
        }
        100% {
            -webkit-transform: translateY(0);
            -ms-transform: translateY(0);
            -o-transform: translateY(0);
            transform: translateY(0);
        }
    }
@media screen and (min-width: 1600px) {
    .gridCont {
        width: 100%;
        height: 100%;
        display: grid;
        grid-gap: 20px;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(5, 200px);
        grid-auto-flow: row;
        justify-content: center;
        .toplayer {
@@ -433,11 +503,12 @@
            .itemTit {
                font-size: 28px;
                line-height: 34px;
                margin-bottom: 2px;
                height: 40%;
                color: #072270;
            }
            .enTit {
                font-size: 18px;
                font-size: 16px;
                line-height: 20px;
                color: #072270;
            }
@@ -477,7 +548,7 @@
            }

            .itemTit1 {
                font-size: 34px;
                font-size: 32px;
                line-height: 42px;
                height: 40%;
                letter-spacing: 1px;
@@ -485,7 +556,7 @@
                margin-bottom: 12px;
            }
            .enTit1 {
                font-size: 22px;
                font-size: 18px;
                line-height: 24px;
                color: #072270;
            }
@@ -505,10 +576,9 @@
    }
}

@media screen and (min-width: 1200px) and (max-width: 1400px) {
@media screen and (min-width: 1200px) and (max-width: 1600px) {
    .gridCont {
        width: 100%;
        height: 100%;
        display: grid;
        grid-gap: 15px;
        grid-template-columns: repeat(3, 1fr);
@@ -527,14 +597,14 @@
            z-index: 99;

            .itemTit {
                font-size: 26px;
                font-size: 22px;
                line-height: 30px;
                height: 40%;
                color: #072270;
                margin-bottom: 2px;
            }
            .enTit {
                font-size: 14px;
                font-size: 12px;
                color: #072270;
            }

@@ -547,98 +617,6 @@
        .bgImg {
            position: absolute;
            width: 30%;
            height: auto;
            right: -10px;
            top: 15px;
        }
    }

    .grid-content-1 {
        grid-row-start: 1;
        grid-row-end: 3;

        .toplayer {
            width: 100%;
            height: 100%;
            position: absolute;
            left: 0;
            top: 0;
            display: flex;
            align-items: center;
            z-index: 99;

            & > div {
                display: flex;
                align-items: flex-start;
            }

            .itemTit1 {
                font-size: 28px;
                line-height: 36px;
                height: 40%;
                letter-spacing: 1px;
                color: #072270;
                margin-bottom: 12px;
            }
            .enTit1 {
                font-size: 16px;
                color: #072270;
            }
        }
        .bgImg1 {
            position: absolute;
            width: 45%;
            height: auto;
            right: -20px;
            top: 30%;
        }
    }
    .bot-rights {
        font-size: 15px;
        color: #333;
    }
}
@media screen and (max-width: 1200px) {
    .gridCont {
        width: 100%;
        height: 100%;
        display: grid;
        grid-gap: 10px;
        grid-template-columns: repeat(3, 1fr);
        grid-auto-flow: row;
        justify-content: center;

        .toplayer {
            width: 100%;
            height: 100%;
            position: absolute;
            left: 0;
            top: 0;
            display: flex;
            align-items: center;
            padding: 0 15px;
            z-index: 99;

            .itemTit {
                font-size: 18px;
                line-height: 22px;
                color: #072270;
            }
            .enTit {
                font-size: 12px;
                line-height: 14px;
                color: #072270;
            }

            .iconImg {
                width: 32px;
                height: 32px;
                margin-right: 10px;
            }
        }
        .bgImg {
            position: absolute;
            width: 45%;
            height: auto;
            right: -10px;
            top: 15px;
@@ -686,6 +664,97 @@
        }
    }
    .bot-rights {
        font-size: 15px;
        color: #333;
    }
}
@media screen and (max-width: 1200px) {
    .gridCont {
        width: 100%;
        display: grid;
        grid-gap: 10px;
        grid-template-columns: repeat(3, 1fr);
        grid-auto-flow: row;
        justify-content: center;

        .toplayer {
            width: 100%;
            height: 100%;
            position: absolute;
            left: 0;
            top: 0;
            display: flex;
            align-items: center;
            padding: 0 15px;
            z-index: 99;

            .itemTit {
                font-size: 14px;
                line-height: 22px;
                color: #072270;
            }
            .enTit {
                font-size: 10px;
                line-height: 14px;
                color: #072270;
            }

            .iconImg {
                width: 32px;
                height: 32px;
                margin-right: 10px;
            }
        }
        .bgImg {
            position: absolute;
            width: 45%;
            height: auto;
            right: -10px;
            top: 15px;
        }
    }

    .grid-content-1 {
        grid-row-start: 1;
        grid-row-end: 3;

        .toplayer {
            width: 100%;
            height: 100%;
            position: absolute;
            left: 0;
            top: 0;
            display: flex;
            align-items: center;
            z-index: 99;

            & > div {
                display: flex;
                align-items: flex-start;
            }

            .itemTit1 {
                font-size: 16px;
                line-height: 36px;
                height: 40%;
                letter-spacing: 1px;
                color: #072270;
                margin-bottom: 12px;
            }
            .enTit1 {
                font-size: 12px;
                color: #072270;
            }
        }
        .bgImg1 {
            position: absolute;
            width: 45%;
            height: auto;
            right: -20px;
            top: 30%;
        }
    }
    .bot-rights {
        font-size: 12px;
        color: #333;
    }
@@ -703,35 +772,29 @@
        display: flex;
        justify-content: center;
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
        animation: showDown 0.6s 1 ease forwards;

        @keyframes showDown {
            100% {
                position: absolute;
                top: 0;
            }
        }
    }
    .topPanelBg {
        position: absolute;
        width: 100%;
        height: 60px;
        top: 0;
        top: -60px;
        left: 0;
        background: rgba(255, 255, 255, 0.8);
        z-index: 9;
        animation: moveDown 0.6s 1 ease forwards;
    }
    .topPanelCont {
        position: absolute;
        width: 100%;
        height: 60px;
        padding: 0 50px;
        top: 0;
        top: -60px;
        left: 0;
        display: flex;
        align-items: center;
        justify-content: space-between;
        z-index: 999;
        animation: moveDown 0.6s 1 ease forwards;

        .topLogo {
            display: flex;
@@ -783,26 +846,29 @@
    }
    .leftCont {
        position: absolute;
        left: 0;
        left: -100px;
        top: 0;
        width: 240px;
        width: 220px;
        height: 100%;
        z-index: 99;
        background: url('../../assets/newMenu/leftbg.png') no-repeat center;
        background-size: 100% 100%;
        animation: moveRight .8s 1 ease forwards;
    }
    .topCont {
        position: absolute;
        width: 100%;
        height: 200px;
        left: 0;
        top: 60px;
        top: 30px;
        padding: 0 40px 0 120px;
        z-index: 99999;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        animation: showDown 0.6s 1 ease forwards;

        .topInfo {
            width: 100%;
            display: flex;
@@ -812,7 +878,6 @@

            .topTit {
                font-size: 44px;
                font-family: 'PingFang SC';
                font-weight: bolder;
                text-align: left;
                color: #fff;
@@ -862,12 +927,14 @@
        }
    }
    .menuGrid {
        width: calc(100vw - 240px);
        width: calc(100vw - 220px);
        height: calc(100vh - 320px);
        padding: 20px 20px 0;
        position: absolute;
        top: 260px;
        left: 240px;
        left: 220px;
      overflow: hidden;
      overflow-y: scroll;
        .gridCont {
            .grid-content {
                border-radius: 16px;
@@ -875,11 +942,18 @@
                overflow: hidden;
                cursor: pointer;
                transition: 0.3s;
                border: none;
                border: 2px solid rgba(255,255,255,0);

                &:hover {
                    border-radius: 16px;
                    background-image: radial-gradient(ellipse farthest-side at 50% 100%, #48a3ff 0%, #fff 120%);
                    box-shadow: 8px 8px 24px rgba(20, 97, 234, 0.2), -8px -8px 24px #fafafa;
                    box-shadow: -8px -8px 24px rgba(20, 97, 234, 0.2), 8px 8px 24px rgba(20, 97, 234, 0.2);
                    border: 2px solid #fff;

                    .iconImg{
                        animation: upDown 0.3s 1 ease-in-out forwards;
                        filter: drop-shadow(0 0 12px rgba(20, 97, 234, 0.4));
                    }
                }
            }
            .cont-bg-1 {