cgp-sso/sso-ui/sso-ui-admin-vue3/src/views/Home/Index2.vue

<template>
  <div class="login">
    <div class="content">
      <div class="title"></div>
      <div class="logout_bg">
        <el-image style="width:40px;height:40px;margin-right: 40px" :src="manager" fit="cover"  @click="toProfile"  v-if="roles.includes('super_admin') || roles.includes('sys_admin')"/>
        <el-image style="width:40px;height:40px;margin-right: 20px" :src="logouticon" fit="cover" @click="loginOut"/>
      </div>
      <div class="main">
        <div class="col">
          <div class="row2" style="background-color: #30CA79;">
            <img class="image2" :src="img1" alt />
            <div class="text2"><el-link style="font-size: 30px;color: #fff; font-weight: 500" @click="handlerLink(44)">社区居家养老管理系统</el-link></div>
          </div>
          <div class="row2" style="background-color: #32B19E;">
            <img class="image2" :src="img2" alt />
            <div class="text2"><a class="aaa" href="http://web.poteviohealth.com/boss/" target="_blank">智慧养老IOT物联网平台</a></div>
          </div>
        </div>
        <div class="col col3" style="background-color: #00734D;">
          <div class="text0"><el-link style="font-size: 30px;color: #fff; font-weight: 500" @click="handlerLink(45)">康养大数据平台</el-link></div>
        </div>
        <div class="col">
          <div class="row2" style="background-color: #4C4B6B;">
            <img class="image2" :src="img5" alt />
            <div class="text2"><a class="aaa" href="http://106.37.165.111:9080/pc/PCLGO001Action_001.action" target="_blank">机构养老运营管理系统</a></div>
          </div>
          <div class="row2" style="background-color: #4A8EE2;">
            <img class="image2" :src="img6" alt />
            <div class="text2"><a class="aaa" href="http://223.71.228.205:9080/qtels-cloud/login/login.do" target="_blank">旅居养老运营管理系统</a></div>
          </div>
        </div>
        <div class="col">
          <div class="row2" style="background-color: #F3B144;">
            <img class="image2" :src="img7" alt/>
            <div class="text2"><el-link style="font-size: 30px;color: #fff; font-weight: 500" @click="handlerLink(46)">运营数据分析平台</el-link></div>
          </div>
          <div class="row2" style="background-color: #AACC05;">
            <img class="image2" :src="img8" alt />
            <div class="text2">建设中</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
  import { ElMessageBox } from 'element-plus'
  import { useUserStore } from '@/store/modules/user'
  import { useTagsViewStore } from '@/store/modules/tagsView'
  import { CACHE_KEY, useCache } from '@/hooks/web/useCache'
  import * as UserApi from '@/api/system/user'
   import img1 from '@/assets/imgs/main/icon1.png';
   import img2 from '@/assets/imgs/main/icon2.png';
   import img3 from '@/assets/imgs/main/icon3.png';
   import img5 from '@/assets/imgs/main/icon5.png';
   import img6 from '@/assets/imgs/main/icon6.png';
   import img7 from '@/assets/imgs/main/icon7.png';
   import img8 from '@/assets/imgs/main/icon8.png';
   import logouticon from '@/assets/imgs/main/logout.png'
   import manager from '@/assets/imgs/main/manager.png'

  import * as authUtil from '@/utils/auth'

  const userStore = useUserStore()
  const tagsViewStore = useTagsViewStore()
  const { t } = useI18n()
  //
  const { push, replace } = useRouter()

  const { wsCache } = useCache()
  // console.log("################",wsCache.get(CACHE_KEY.LoginForm).username)
  // console.log("################2",authUtil.getLoginForm().username)
  // console.log("################3",authUtil.getRefreshToken())
  // console.log("################4",authUtil.getAccessToken())
  //
  // console.log("***************",JSON.stringify(wsCache.get(CACHE_KEY.LoginForm)))

  const loginOut = async () => {
    try {
      await ElMessageBox.confirm(t('common.loginOutMessage'), t('common.reminder'), {
        confirmButtonText: t('common.ok'),
        cancelButtonText: t('common.cancel'),
        type: 'warning'
      })
      await userStore.loginOut()
      tagsViewStore.delAllViews()
      replace('/login?redirect=/Navicate')
    } catch {}
  }
  const toProfile = async () => {
    push('/system/user')
  }

  const handlerLink = async (id) =>{
     try {
       const linkUrl = await UserApi.getLinkInfo(id, authUtil.getAccessToken())
       console.log(linkUrl)
       if (linkUrl != "") {
         window.open(linkUrl);
       }
     }catch (error) {
       console.log(error);
     }

       // window.open("http://web.poteviohealth.com/boss/");
  }
  const roles = wsCache.get(CACHE_KEY.USER).roles
  console.log("######################",roles)
  // const checkRoles = (value)=>{
  //   const permissionRoles = value
  //   const roles = wsCache.get(CACHE_KEY.USER).roles
  //   const hasRole = roles.some((role) => {
  //     return super_admin === role || permissionRoles.includes(role)
  //   })
  //   return hasRole;
  // }

</script>
<style lang="scss" scoped>
  .login {

    width: 100%;
    height: 100%;
    background-image: url("/src/assets/imgs/main/bg.png");
    /* 背景图垂直、水平均居中 */
    background-position: center center;
    /* 背景图不平铺 */
    background-repeat: no-repeat;
    /* 让背景图基于容器大小伸缩 */
    background-size: cover;
    display: flex;
    justify-content: center;

    .content{
      width: 1660px;
      height: 777px;
    }
    .title{
      width: 655px;
      height: 62px;
      // position: absolute;
      // top:63px;
      // left:113px;
      margin-top: 63px;
      background-image: url("/src/assets/imgs/main/logo.png");
      background-repeat: no-repeat;
    }

    .main{
      width: 1680px;
      height: 600px;
      margin-top: 115px;
      // margin-left: 130px;
      // position: absolute;
      // top:240px;
      // left:130px;
      display: flex;
      color: #fff;
      font-size: 32px;
    }

    .col{
      width: 400px;
      height: 600px;
      margin-right: 10px;
      text-decoration: none;
    }

    .col3{
      background-image: url("/src/assets/imgs/main/icon0.png");
    }


    .row3{
      width: 400px;
      height: 190px;
      margin-bottom: 15px;
      display: flex;
    }
    .image3{
      margin: 61px 24px 61px 40px;
    }
    .text3{
      margin-top: 51px;
    }
    .row2{
      width: 400px;
      height: 290px;
      margin-bottom: 20px;
    }
    .text0{
      text-align: center;
      margin-top: 110px;
    }
    .image2{
      margin: 69px 160px 20px 160px;
    }
    .text2{
      text-align: center;
      width: 100%;
    }
    .aaa{
      color: #fff;
    }

    .logout_bg {
      position: absolute;
      top: 80px;
      right: 60px;
      width: 200px;
      height: 50px;
      cursor: pointer;
    }
  }

  .el-link.el-link--default:after,
  .el-link.el-link--primary.is-underline:hover:after,
  .el-link.el-link--primary:after {
    border-color: #fff !important;
  }
</style>