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 menuList"
                :key="index"
                :class="setINdex() == index ? 'active' : ''"
                @click="selectTab(item, index)"
            >
                {{ item.name }}
            </div>
        </div>
        <div class="v-header-right">
            <div class="right-imgs"></div>
            <div>
                <span class="selectIocn"></span>
                <el-cascader
                    class="saveColumn-select"
                    ref="multipleValue"
                    :options="scOptions"
                    :props="{ checkStrictly: true, label: 'name' }"
                    collapse-tags
                    :show-all-levels="false"
                    clearable
                    @change="selectChange"
                    v-model="communityValue"
                ></el-cascader>
            </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';
import { mapState } from 'vuex';
export default {
    name: 'vheader',
    data() {
        return {
            name: '',
            envConfig: envConfig,
            tagTableArr: [
                {
                    name: '指挥调度',
                    path: '/homeIndex'
                },
                {
                    name: '社区资产',
                    path: '/communityAssets'
                },
                {
                    name: '产业招商',
                    path: '/industrialInvestment'
                },
                {
                    name: '运营服务',
                    path: '/operationalServices'
                },
                {
                    name: '财务分析',
                    path: '/financialAnalysis'
                },
                {
                    name: '视频监控',
                    path: '/videoSurveillance'
                }
            ],
            tagTabIndex: 0,
            time: {
                thisTime: '2000/01/01',
                week: '星期一',
                date: '00:00:00'
            },
            communityValue: [],
            scOptions: []
        };
    },
    computed: {
        ...mapState(['globalCommunity']),
        menuList() {
            return this.$store.getters['getMenuList'] || [];
        }
    },
    watch: {
        globalCommunity: {
            handler(newVal, oldVal) {
                console.log(newVal, oldVal);
            },
            deep: true
        }
    },
    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');
        },
        selectChange() {
            let thisValue = this.$refs.multipleValue.getCheckedNodes()[0];
            // 选择是否为公司
            if (!!thisValue && thisValue.data.type == 'org') {
                let arrs = [];
                let ids = [thisValue.value];
                this.fitersValue(arrs, thisValue.data);
                arrs.map((item) => {
                    ids.push(item.value);
                });
                this.$store.commit('setGlobalCommunity', {
                    type: 'org',
                    value: ids
                });
            } else {
                this.$store.commit('setGlobalCommunity', {
                    value: [thisValue.value]
                });
            }
        },
        fitersValue(arrs, value) {
            value.children.map((item) => {
                if (item.type == 'org') {
                    arrs.push(item);
                    if (!!item.children) {
                        this.fitersValue(arrs, item);
                    }
                }
            });
        },
        communityNameList() {
            this.$http.get('/sc-community/assets/tree/community/findCompanyCommunityTree').then(({ data, msg, status }) => {
                if (status == 0) {
                    this.scOptions = data;
                    this.communityValue = [data[0].value];
                    if (data[0].type == 'org') {
                        let arrs = [];
                        let ids = [data[0].value];
                        this.fitersValue(arrs, data[0]);
                        arrs.map((item) => {
                            ids.push(item.value);
                        });
                        this.$store.commit('setGlobalCommunity', {
                            type: 'org',
                            value: ids
                        });
                    } else {
                        this.$store.commit('setGlobalCommunity', {
                            value: [data[0].value]
                        });
                    }
                }
            });
        },
        selectTab(item, index) {
            this.tagTabIndex = index;
            this.$router.push({ name: item.linkPath });
        },

        setINdex() {
            let index = 0;
            this.menuList.map((item, inx) => {
                if (item.linkPath == this.$route.name) {
                    index = inx;
                }
            });
            return 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;
        margin-left: 120px;
        color: $colorOption;
        .tabSelect {
            border: 1px solid $colorOption;
            cursor: pointer;
            box-sizing: border-box;
            background: #18344e;
            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;
            vertical-align: text-bottom;
        }
        .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>