pbl_admin_table/src/views/kanBan/index.vue

<template>
    <div class="KanBan">
        <div class="top">
          <div class="topCon">
            <div class="title">
              <span v-if="userinfo.orgName">{{userinfo.orgName}}</span >
              <span style="color: #0663FE;font-weight: 600;">{{ userinfo.schoolName }}</span>
              <span style="color: #0663FE;cursor: pointer;font-weight: 600;" v-if="isIndex2 == 2" @click="gotoli">返回校区</span>

            </div>
            <div class="person">
              <div class="person_name">
                <img
                 @click="openData()"
                style="width: 40px;height: 40px;object-fit: cover;border-radius: 50%; cursor: pointer;" 
                :src="userinfo.headportrait ? userinfo.headportrait : require('../../assets/img/toux2.png')" alt="">
                <div class="personInfo">
                  <div class="personInfoTit">
                    {{  userinfo.username }}
                  </div>
                  <div class="personInfoBri">
                    {{ userSuffix(userinfo.accountNumber) }}
                  </div>
                </div>
              </div>
              <el-button type="text" @click="handleLogout" style="margin-left: 20px">退出</el-button>
            </div>
          </div>
        </div>
        <div class="midBlo">
            <div class="buttonArea">
                <div :style="{width: '500px',display: 'flex',justifyContent : userinfo.role == 1 && userinfo.rrole == 1 && userinfo.type ==1? 'space-between' : 'center'}">
                    <div class="btnDiv"  :class="{ active: isActive === 1 }" >
                        <div v-if="userinfo.role == 1 && userinfo.rrole == 1 && userinfo.type ==1" @click="setActive(1)">
                            数据看板
                        </div>
                    </div>
                    <div class="btnDiv" :class="{ active: isActive === 2 }" @click="setActive(2)">校区特色</div>
                    <div class="btnDiv" :class="{ active: isActive === 3 }" >
                        <div v-if="userinfo.role == 1 && userinfo.rrole == 1 && userinfo.type ==1"  @click="setActive(3)">
                            校区入口
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="mainArea">
                <div v-if="(isActive === 1 || isActive === 2) && fromL.admin.school.list.length">
                    <schoolArea :schId="schId" :schOrg="schOrg" @cutSch="cutSch"/>
                </div>

                <div class="right_content">
                    <div class="Con" v-if="isActive === 1">
                        <!-- <AdataKanban></AdataKanban> -->
                         <dataBoardNew :oid="schId" :org="schOrg" :userid="userinfo.userid"/>
                    </div>
                    <div class="Con" v-if="isActive === 2">
                        <AschoolFeature :schId="schId" :schOrg="schOrg"></AschoolFeature>
                    </div>
                    <div class="Con" v-if="isActive === 3">
                        <AquickEntrance :key="isActive"></AquickEntrance>
                    </div>
                </div>
            </div>
        </div>
        
    </div>
</template>
<script>
import schoolArea from '../../components/schoolArea.vue';
// import AdataKanban from './components/AdataKanban';
import dataBoardNew from './components/dataBoardNew';

import AquickEntrance from './components/AquickEntrance';
import AschoolFeature from './components/AschoolFeature';
import { mapGetters, mapActions } from 'vuex';
import { loginOut } from '@/api/user';
import store from '../../store'

export default {
    name:'kanBan',
    components: {
        schoolArea,
        // AdataKanban,
        dataBoardNew,
        AquickEntrance,
        AschoolFeature
    },
    computed: {
    ...mapGetters(['userinfo','userinfo2','fromL','appSign']),
    // 去除账号后缀
    userSuffix(){
      return function(val) {
        let userName = JSON.parse(JSON.stringify(val))
        const regEmail = new RegExp("^[A-Za-z0-9_-]+@[a-zA-Z0-9_-]+(\\.[a-zA-Z0-9_-]+)+$");
        
        // // 判断用户输入账户带不带后缀
        if (!regEmail.test(userName)) {
          console.log('111');
        } else {
          const parts = userName.split('@');
          userName = parts[0];
        }
        return userName
      }
    },
  },
    data() {
        return {
            isActive: 1,
            isIndex2:'',
            schId:'',
            schOrg:''
        }
    },
    methods: {
        cutSch(val){
            console.log('val',val);
            this.schId = val.oid
            this.schOrg = val.org

        },
        ...mapActions({
            logout: 'user/logout'
        }),
        // 返回首页
        async gotoli(){
            await store.commit('user/SET_AppSIGN', '')

            this.$router.push('/homepageL');
        },
        // 退出登录
        async handleLogout() {
            this.$confirm('确定退出吗', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(async () => {
                loginOut()
                .then(async () => {
                    this.$message({
                    message: '退出成功',
                    type: 'success'
                    });
                    await this.logout();
                    // this.$router.push('/login');
                })
                .catch(err => {
                    console.error(err);
                });
            }).catch(() => {
                // 取消操作
            });
        },
        // 导航栏切换
        setActive(Index) {
            this.isActive = Index; 
        }
    },
    mounted() {
        const index = this.$route.query.index; // 123
        console.log(index);
        if (this.userinfo.role == 1 
        && this.userinfo.rrole == 1 
        && this.userinfo.type ==1 
        && this.fromL.admin.school.list 
        && this.fromL.admin.school.list[0]
        && this.fromL.admin.school.list[0].children
        && this.fromL.admin.school.list[0].children.length) {
            console.log('111');
            this.schId = this.fromL.admin.school.list[0].children[0].schoolid
            this.schOrg = this.fromL.admin.school.list[0].children[0].orgid
        }else{
            console.log('222');
            this.schId = this.userinfo.organizeid
            this.schOrg = this.userinfo.org
        }


        if (index == 2) {
            this.isActive = 2
            this.isIndex2 = 2
        }else if (index == 1) {
            this.isIndex2 = 2
        }
        
        
    }
}
</script>
<style scoped>
.top{
  width: 100%;
  display: flex;
  height: 60px;
  box-sizing: border-box;
  padding-right: 10px;
}
.midBlo{
    height: calc(100% - 60px);
    overflow: hidden;
}
.topCon{
  display: flex;
  width: 100%;
  justify-content: space-between;
  align-items: center;
}
.title{
  font-family: PingFang SC;
  font-weight: 400;
  font-size: 14px;
  line-height: 100%;
  letter-spacing: 0%;
  color: #969BA3;
  display: flex;
  gap: 11px;
  display: flex;
}
.person{
  display: flex;
  align-items: center;
}
.person_name{
  display: flex;
  gap: 9px;
}
.personInfo{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 5px 0 2px;
  box-sizing: border-box;
}
.personInfoTit{
  font-family: PingFang SC;
  font-weight: 500;
  font-size: 14px;
  line-height: 100%;
  color: #000000;
}
.personInfoBri{
  font-family: PingFang SC;
  font-weight: 300;
  font-size: 10px;
  line-height: 100%;
  color: #969BA3;
}
.KanBan {
    background-color: #FAFAFA;
    /* 设置高度为视口高度 */
    height: 100%;
    padding: 0  120px;
    box-sizing: border-box;
    font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

.KanBan_top {
    border-radius: 10px;
    width: 69vw;
    height: 144px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    margin: 0px auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.Con{
    width: 100%;
}
.top_textArea {
    margin-left: 23px;
}

.top_title {
    font-size: 30px;
    font-weight: bold;
    display: flex;
    margin-bottom: 8px;
}

.top_title div {
    color: #0354d7;
    margin: 0 7px;
}

.imgArea {
    margin-right: 23px;
}

.imgArea img {
    width: 96px;
    height: 96px;
}

.buttonArea {
    display: flex;
    justify-content: center;
    padding-top: 20px;
    border-bottom: 1px #e7e7e7 solid;
}

.btnDiv {
    height: 48px;
    width: 72px;
    text-align: center;
    line-height: 48px;
    font-size: 18px;
    /* margin-left: 15px; */
    cursor: pointer;
}


.btnDiv.active {
    font-weight: 600;
    border-bottom: 3px #0663FE solid;
}

.mainArea {
    width: 100%;
    margin-top: 30px;
    display: flex;
    gap: 30px;
    height: 100%;
}
.right_content{
    width: 100%;
    height: calc(100% - 101px);
    overflow: auto;
    overflow: auto;
    padding-right: 10px;
    padding-bottom: 50px;
    box-sizing: border-box;
}


</style>