修改告警灯点击事件

whychdw

2021-08-03 1a4cb2f08a5b92573b328dd2030959503dd04c59

 src/components/PageHeader.vue

@@ -1,35 +1,102 @@
<template>
    <div class="pageHeader">
        <div class="headTitle">FMDS | 电机试验集中测控平台</div>
        <div class="headTitle">电机试验集中测控平台</div>
        <div class="headInfoCon">
            <div class="info">网络状态:正常<div class="tai"
                    style="background:#82e866;width:12px;height:12px;border-radius:50%;margin-left:4px;">
                </div>
            </div>
            <div class="scrollCon">
                <div :class="{'active':isaralm}" :style="{'marginLeft':nomargin?'0':'100%'}"><i
                        class="el-icon-message-solid" @click="showAlarm"></i><span v-html="notice" v-if="alarmTextFlag"></span>
                </div>
            </div>
        </div>
        <div class="headToolsCon">
            <div class="avatar">
                <span class="avatar-icon">
                    <i class="el-icon-s-home"></i>
                </span>
                <span class="avatar-text">退出登录</span>
                <span class="avatar-text" @click="logout">退出登录</span>
            </div>
            <div class="avatar">
                <span class="avatar-icon">
                    <i class="el-icon-user-solid"></i>
                </span>
                <span class="avatar-text">
                    {{username}}<i class="el-icon-arrow-down el-icon--right"></i>
                </span>
                <el-dropdown @command="commandClick">
                    <span class="avatar-text">
                        {{username}}<i class="el-icon-arrow-down el-icon--right"></i>
                    </span>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item command="passwordChange">密码修改</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
            </div>

        </div>

        <!-- 密码修改 -->
        <el-dialog title="密码修改" width="400px" :visible.sync="pwd.show" :close-on-click-modal="false" top="0"
            class="dialog-center" :modal-append-to-body="false">
            <pwd-change v-if="pwd.show" :visible.sync="pwd.show"></pwd-change>
        </el-dialog>
    </div>
</template>

<script>
    import PwdChange from "@/components/PwdChange";
    export default {
        components: {
            PwdChange,
        },
        data() {
            return {
                username: 'superUser'
                username: this.$store.state.user.username,
                pwd: {
                    show: false,
                },
                notice: '直流主配电柜A排电压过高报警',
                isaralm: true,
                nomargin: false,
                alarmTextFlag: true,
            }
        },
        mounted() {
            setTimeout(() => {
                this.isaralm = false;
                this.nomargin = true;
                this.alarmTextFlag = false;
            }, 8000)
        },
        methods: {
            logout() {
                this.$store.dispatch('setLogin');
                this.$router.push({
                    path: '/login'
                });
            },
            passwordChange() {
                this.pwd.show = true;
            },
            commandClick(name) {
                switch (name) {
                    case "passwordChange":
                        this.passwordChange();
                        break;
                    default:
                        this.$layer.msg('该功能暂未开放！');
                        break;
                }
            },
            showAlarm() {
                // 不为true点击有效
                if(!this.alarmTextFlag) {
                    this.alarmTextFlag = true;
                    setTimeout(()=>{
                        this.alarmTextFlag = false;
                    }, 4000);
                }

            }
        }
    }
</script>
@@ -53,7 +120,18 @@
    }

    .headToolsCon {
        width: 100%;
        height: 40px;
        position: absolute;
        right: 0;
        bottom: 0;
        z-index: 2;
        display: flex;
        align-items: center;
        flex-direction: row-reverse;
        padding-right: 40px;
    }

    .headInfoCon {
        height: 40px;
        position: absolute;
        left: 0;
@@ -61,8 +139,54 @@
        z-index: 2;
        display: flex;
        align-items: center;
        flex-direction: row-reverse;
        padding-right: 40px;
        ;
        padding-left: 40px;
    }

    .headInfoCon .info {
        font-size: 16px;
        display: flex;
        align-items: center;
        border-right: 1px solid #ffffff;
        padding-right: 8px;
        margin-right: 8px;
    }

    .headInfoCon .scrollCon {
        font-size: 16px;
        width: 290px;
        overflow: hidden;
        color: #f78989;
    }

    .headInfoCon .scrollCon>div {
        margin-left: 100%;
        width: 290px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        display: flex;
        align-items: center;
    }

    .headInfoCon .scrollCon>div.active {
        animation: myMove 6s linear 1;
        animation-fill-mode: forwards;
    }

    .headInfoCon .scrollCon>div i {
        font-size: 20px;
    }

    /*文字无缝滚动*/
    @keyframes myMove {
        0% {
            transform: translateX(0);
        }

        100% {
            transform: translateX(-290px);
        }
    }

    .avatar {