SmartCommunity/commandCenter/src/components/common/Header.vue

<template>
    <div class="v-header">
        <div class="v-header-left">
            <div class="left-img inlineBlock"></div>
            <div class="system-title">
                <div class="zh">智慧社区指挥调度中心</div>
                <div class="en">Smart Community Space Management System</div>
            </div>
            <div class="left-img rights inlineBlock"></div>
        </div>
        <div class="v-header-center">
            <div
                class="tabSelect"
                v-for="(item, index) in tagTableArr"
                :key="index"
                :class="tagTabIndex == index ? 'active' : ''"
                @click="selectTab(index)"
            >
                {{ item }}
            </div>
        </div>
        <div class="v-header-right">
            <div class="right-imgs"></div>
            <div>
                <span class="selectIocn"></span>
                <el-select
                    v-model="communityId"
                    placeholder="所有社区"
                    clearable
                    class="saveColumn-select"
                    @change="$store.commit('setHomeCommunityAll', communityId)"
                >
                    <el-option v-for="(item, index) in communityList" :label="item.communityName" :value="item.id" :key="index"></el-option>
                </el-select>
            </div>

            <div class="time">
                <div class="date">{{ time.date }}</div>
                <div class="dates">
                    <div class="thisTime">{{ time.thisTime }}</div>
                    <div class="week">{{ time.week }}</div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import envConfig from '@/config';
export default {
    name: 'vheader',
    data() {
        return {
            name: '',
            envConfig: envConfig,
            tagTableArr: ['指挥调度', '社区资产', '产业招商', '运营服务', '财务分析', '视频监控'],
            tagTabIndex: 0,
            time: {
                thisTime: '2000/01/01',
                week: '星期一',
                date: '00:00:00'
            },
            communityList: [],
            communityId: ''
        };
    },
    computed: {
        cruUserInfo() {
            return this.$store.getters['getCruUserInfo'];
        }
    },
    methods: {
        getUserInfo() {
            this.$http.postForm('/sc-user-center/user/findLoginUserById').then(({ status, data, msg }) => {
                if (status === 0) {
                    this.$store.commit('setcCruUserInfo', data);
                } else {
                    this.$message.error('获取用户信息失败');
                }
            });
        },
        // 退出登录
        logOut() {
            var access_token = localStorage.getItem('SC_token');
            this.$http.postForm('/sc-user-auth/user/logout', { access_token: access_token }).then(({ status, data, msg }) => {
                if (0 === status) {
                    this.$message({
                        type: 'success',
                        message: '您已退出登录'
                    });
                    localStorage.removeItem('SC_token');
                    sessionStorage.removeItem('SC_listMuen');
                    this.$store.commit('setloginInfo', '');
                    this.$store.dispatch('tags', []);

                    sessionStorage.removeItem('tabs');
                    window.location.href = this.envConfig.loginUrl;
                } else {
                    this.$message.error(msg);
                }
            });
        },
        getTime() {
            this.time.date = this.$moment().format('HH:mm:ss');
            this.time.week = this.$moment().format('dddd');
            this.time.thisTime = this.$moment().format('YYYY/MM/DD');
        },
        communityNameList() {
            this.$http.get('/sc-community/assets/community/list').then(({ data, msg, status }) => {
                if (status == 0) {
                    this.communityList = data;
                    this.$store.commit('setAreaSelect', data);
                }
            });
        },
        selectTab(index) {
            this.tagTabIndex = index;
        }
    },
    mounted() {},
    created() {
        setInterval(() => {
            this.getTime();
        }, 1000);
        this.getUserInfo();
        this.communityNameList();
    }
};
</script>
<style lang='scss' scoped>
@import '@assets/css/public-style.scss';
$name: v-header;
$colorOption: rgba(250, 250, 250, 0.6);
.inlineBlock {
    display: inline-block;
}
.#{$name} {
    width: 100%;
    height: 110px;
    position: absolute;
    top: 0;
    z-index: 10;
    display: flex;
    justify-content: space-between;
    background-image: url('~@/assets/img/homeTop/bg_top.png');
    background-size: cover;
    padding-top: 15px;
    &-left {
        width: 530px;
        display: flex;
        color: #fff;
        .left-img {
            width: 50px;
            height: 18px;
            background-image: url('~@/assets/img/homeTop/top_big.png');
            background-size: cover;
            margin: 20px;
        }
        .system-title {
            .zh {
                font-size: 30px;
                line-height: 42px;
                letter-spacing: 5px;
                text-shadow: 0px 4px 8px rgba(7, 80, 92, 0.5);
            }
            .en {
                font-size: 12px;
                letter-spacing: 2px;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }
        }
    }
    &-center {
        display: flex;
        column-gap: 20px;
        font-size: 20px;
        height: 32px;
        color: $colorOption;
        .tabSelect {
            border: 1px solid $colorOption;
            cursor: pointer;
            box-sizing: border-box;
            width: 100px;
            line-height: 30px;
            text-align: center;
            border-radius: 5px;
            &.active {
                border-color: #01b1fe;
                background: #01b1fe;
                color: rgb(250, 250, 250);
            }
        }
    }
    &-right {
        margin-right: 20px;
        display: flex;
        .right-imgs {
            width: 98px;
            height: 2px;
            background-image: url('~@/assets/img/homeTop/yuansu2@2x.png');
            background-size: cover;
            margin-top: 20px;
            margin-right: 60px;
        }
        .saveColumn-select {
            width: 125px;
        }
        .selectIocn {
            display: inline-block;
            width: 26px;
            height: 24px;
            background-image: url('~@/assets/img/homeTop/icon_shequ@2x.png');
            background-size: cover;
            margin-top: 5px;
        }
        .time {
            display: flex;
            .date {
                line-height: 40px;
                font-size: 24px;
                color: #fff;
            }
            .dates {
                color: #01b1fe;
                text-align: center;
                line-height: 20px;
                margin-left: 10px;
            }
        }
    }
}
.saveColumn-select {
    /deep/ .el-input__inner {
        background: transparent;
        color: white;
        border: none;
        font-size: 20px;
    }
}
</style>