wuhongjian
/
hi-ucs
1
0
Fork 0
Code Issues Pull Requests Projects Releases 10 Wiki Activity

西海岸：点击图标进入首页增加权限判断

This commit is contained in:
guoyue 2022-10-18 10:45:40 +08:00
parent 2ebec87514
commit 5f3aad2539
1 changed files with 460 additions and 490 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

240
front/src/views/home/components/header.vue
View File

@ -1,11 +1,8 @@
<template> <template>
<div <div class="home-header" :class="[
class="home-header"
:class="[
select !== 'home' || scrollTop > 500 ? 'white' : '', select !== 'home' || scrollTop > 500 ? 'white' : '',
props.showView === 'algorithm-details' ? '' : '', props.showView === 'algorithm-details' ? '' : '',
]" ]">
>
<div class="name" @click="goToHome"> <div class="name" @click="goToHome">
<div class="name-bg" v-if="!itShowXiHaiAn"></div> <div class="name-bg" v-if="!itShowXiHaiAn"></div>
<div class="name-bg-xihaian" v-else></div> <div class="name-bg-xihaian" v-else></div>
@ -14,52 +11,26 @@
<p>(United Capacity System)</p> <p>(United Capacity System)</p>
</div> </div>
</div> </div>
<div <div v-for="item in navList" :key="item.key" @click="jumpPage(item)" class="nav"
v-for="item in navList" :class="item.key == select ? 'select' : ''">
:key="item.key"
@click="jumpPage(item)"
class="nav"
:class="item.key == select ? 'select' : ''"
>
{{ item.name }} {{ item.name }}
</div> </div>
<!-- 购物车 --> <!-- 购物车 -->
<a-badge :count="sgcNum"> <a-badge :count="sgcNum">
<svg <svg t="1650455446850" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
t="1650455446850" p-id="2069" width="0.4rem" height="0.4rem" @click="goToSgc">
class="icon"
viewBox="0 0 1024 1024"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
p-id="2069"
width="0.4rem"
height="0.4rem"
@click="goToSgc"
>
<path <path
d="M384 832v85.333333h-85.333333v-85.333333h85.333333z m405.333333 0v85.333333h-85.333333v-85.333333h85.333333zM240.32 185.002667l24.149333 140.928h633.173334L835.285333 746.666667h-563.626666l-85.333334-497.685334H94.485333v-64h145.834667z m583.104 204.928H275.434667L325.632 682.666667h454.464l43.328-292.736z" d="M384 832v85.333333h-85.333333v-85.333333h85.333333z m405.333333 0v85.333333h-85.333333v-85.333333h85.333333zM240.32 185.002667l24.149333 140.928h633.173334L835.285333 746.666667h-563.626666l-85.333334-497.685334H94.485333v-64h145.834667z m583.104 204.928H275.434667L325.632 682.666667h454.464l43.328-292.736z"
:fill="props.showView === 'algorithm-details' ? '#1296db' : '#1296db'" :fill="props.showView === 'algorithm-details' ? '#1296db' : '#1296db'" p-id="2070"></path>
p-id="2070"
></path>
</svg> </svg>
</a-badge> </a-badge>
<a-badge :count="mynoticeNum" style="margin-left: 0.2rem"> <a-badge :count="mynoticeNum" style="margin-left: 0.2rem">
<!-- 消息提醒 --> <!-- 消息提醒 -->
<svg <svg t="1654051054113" class="icon2" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
t="1654051054113" p-id="2187" width="0.35rem" height="0.35rem">
class="icon2"
viewBox="0 0 1024 1024"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
p-id="2187"
width="0.35rem"
height="0.35rem"
>
<path <path
d="M544 161.536a330.666667 330.666667 0 0 1 298.666667 329.130667h-0.341334c0.213333 1.493333 0.341333 2.986667 0.341334 4.565333v219.434667h39.68a32 32 0 0 1 0 64h-212.053334a160 160 0 0 1-316.586666 0H141.909333a32 32 0 1 1 0-64h39.424v-219.434667c0-1.578667 0.128-3.072 0.341334-4.565333H181.333333a330.666667 330.666667 0 0 1 298.666667-329.130667V128a32 32 0 1 1 64 0v33.536z m-298.666667 553.130667h533.333334v-219.434667c0-1.578667 0.128-3.072 0.341333-4.565333h-0.341333a266.666667 266.666667 0 1 0-533.333334 0h-0.341333c0.213333 1.493333 0.341333 2.986667 0.341333 4.565333v219.434667z m359.765334 64H418.901333a96 96 0 0 0 186.197334 0z" d="M544 161.536a330.666667 330.666667 0 0 1 298.666667 329.130667h-0.341334c0.213333 1.493333 0.341333 2.986667 0.341334 4.565333v219.434667h39.68a32 32 0 0 1 0 64h-212.053334a160 160 0 0 1-316.586666 0H141.909333a32 32 0 1 1 0-64h39.424v-219.434667c0-1.578667 0.128-3.072 0.341334-4.565333H181.333333a330.666667 330.666667 0 0 1 298.666667-329.130667V128a32 32 0 1 1 64 0v33.536z m-298.666667 553.130667h533.333334v-219.434667c0-1.578667 0.128-3.072 0.341333-4.565333h-0.341333a266.666667 266.666667 0 1 0-533.333334 0h-0.341333c0.213333 1.493333 0.341333 2.986667 0.341333 4.565333v219.434667z m359.765334 64H418.901333a96 96 0 0 0 186.197334 0z"
:fill="props.showView === 'algorithm-details' ? '#1296db' : '#1296db'" :fill="props.showView === 'algorithm-details' ? '#1296db' : '#1296db'" p-id="2188"></path>
p-id="2188"
></path>
</svg> </svg>
<!-- <a-avatar shape="square" size="large" /> --> <!-- <a-avatar shape="square" size="large" /> -->
</a-badge> </a-badge>
@ -88,10 +59,7 @@
<template #title> <template #title>
<span>{{ user.realName }}</span> <span>{{ user.realName }}</span>
</template> </template>
<span <span class="name" @click="jumpPage({ name: '个人中心', key: 'personalCenter' })">
class="name"
@click="jumpPage({ name: '个人中心', key: 'personalCenter' })"
>
{{ user.realName }} {{ user.realName }}
</span> </span>
</a-tooltip> </a-tooltip>
@ -114,58 +82,54 @@
fill="#bfbfbf" fill="#bfbfbf"
></path> ></path>
</svg> --> </svg> -->
<i <i @click="jumpPage({ name: '后台管理', key: 'houtaiguanli' })" class="iconTo" v-show="backFlag"></i>
@click="jumpPage({ name: '后台管理', key: 'houtaiguanli' })"
class="iconTo"
v-show="backFlag"
></i>
</div> </div>
</div> </div>
</template> </template>
<script setup> <script setup>
import { ref, onMounted, onBeforeUnmount, defineProps } from 'vue' import { ref, onMounted, onBeforeUnmount, defineProps } from 'vue'
import { getUserInfo } from '@/api/user' import { getUserInfo } from '@/api/user'
import { recordRoute } from '@/config' import { recordRoute } from '@/config'
import { useRoute, useRouter } from 'vue-router' import { useRoute, useRouter } from 'vue-router'
import { mynotice } from '@/api/home' import { mynotice } from '@/api/home'
import { useStore } from 'vuex' import { useStore } from 'vuex'
import { getSgcTotal } from '@/api/home' import { getSgcTotal } from '@/api/home'
import Cookies from 'js-cookie' import Cookies from 'js-cookie'
import mybus from '@/myplugins/mybus' import mybus from '@/myplugins/mybus'
import { DETAIL_PAGE_CONTENT_DEFAULT_TAB } from '@/global/GlobalConfig.js' import { DETAIL_PAGE_CONTENT_DEFAULT_TAB } from '@/global/GlobalConfig.js'
import { message } from 'ant-design-vue' import { message } from 'ant-design-vue'
const store = useStore() const store = useStore()
const router = useRouter() const router = useRouter()
const route = useRoute() const route = useRoute()
const itShowXiHaiAn = ref(whoShow.itShowXiHaiAn) const itShowXiHaiAn = ref(whoShow.itShowXiHaiAn)
// 用户信息 // 用户信息
const user = ref({ const user = ref({
username: store.getters['user/username'], username: store.getters['user/username'],
realName: store.getters['user/realName'], realName: store.getters['user/realName'],
}) })
const select = ref(router.currentRoute.value.name) const select = ref(router.currentRoute.value.name)
const mynoticeFlag = ref(false) const mynoticeFlag = ref(false)
const mynoticeData = ref([]) const mynoticeData = ref([])
const navList = ref(navListManagement.navList) const navList = ref(navListManagement.navList)
const backFlag = ref(true) const backFlag = ref(true)
getUserInfo().then((res) => { getUserInfo().then((res) => {
if ( if (
res.data.data.roleIdList.length == 0 && res.data.data.roleIdList.length == 0 &&
res.data.data.superAdmin === 0 res.data.data.superAdmin === 0
) { ) {
backFlag.value = false backFlag.value = false
} }
}) })
console.log('navList------------>', navList) console.log('navList------------>', navList)
const props = defineProps({ const props = defineProps({
showView: { type: String, default: '' }, showView: { type: String, default: '' },
}) })
// 退出登录 // 退出登录
const logout = async () => { const logout = async () => {
await store.dispatch('user/logout') await store.dispatch('user/logout')
window.sessionStorage.setItem('visits', JSON.stringify([])) window.sessionStorage.setItem('visits', JSON.stringify([]))
// 西海岸不返回登录页 // 西海岸不返回登录页
@ -177,15 +141,23 @@
router.push('/login') router.push('/login')
} }
} }
}
// 返回首页
const goToHome = () => {
// 西海岸
if (itShowXiHaiAn.value) {
if (
!xhaHasPermissionUser.list.includes(user.value.username)
) {
return message.warn('暂无权限')
}
} }
// 返回首页
const goToHome = () => {
router.push({ router.push({
path: '/home', path: '/home',
}) })
} }
// 跳转页面 // 跳转页面
const jumpPage = (item) => { const jumpPage = (item) => {
// 西海岸 // 西海岸
if (itShowXiHaiAn.value) { if (itShowXiHaiAn.value) {
let _arr = ['共享门户', '能力云图', '能力统计', '需求中心', '赋能案例'] let _arr = ['共享门户', '能力云图', '能力统计', '需求中心', '赋能案例']
@ -271,50 +243,50 @@
router.push('/home') router.push('/home')
break break
} }
} }
const scrollTop = ref(0) const scrollTop = ref(0)
window.onscroll = function () { window.onscroll = function () {
//为了保证兼容性，这里取两个值，哪个有值取哪一个 //为了保证兼容性，这里取两个值，哪个有值取哪一个
//scrollTop就是触发滚轮事件时滚轮的高度 //scrollTop就是触发滚轮事件时滚轮的高度
scrollTop.value = scrollTop.value =
document.documentElement.scrollTop || document.body.scrollTop document.documentElement.scrollTop || document.body.scrollTop
// console.log('滚动距离' + scrollTop.value) // console.log('滚动距离' + scrollTop.value)
} }
mybus.on('getSgcNum', () => { mybus.on('getSgcNum', () => {
getSgcTotal().then((res) => { getSgcTotal().then((res) => {
sgcNum.value = res.data.data.count sgcNum.value = res.data.data.count
// console.log('申购车总数========================>', res.data.data.count) // console.log('申购车总数========================>', res.data.data.count)
}) })
}) })
const sgcNum = ref(0) const sgcNum = ref(0)
const goToSgc = () => { const goToSgc = () => {
window.sessionStorage.setItem('type', JSON.stringify('PurchaseVehicle')) window.sessionStorage.setItem('type', JSON.stringify('PurchaseVehicle'))
router.push('/personalCenter') router.push('/personalCenter')
} }
const mynoticeNum = ref(0) const mynoticeNum = ref(0)
// 我的消息 // 我的消息
const getMynotice = () => { const getMynotice = () => {
mynotice({ page: 1, limit: 3, readStatus: 0 }).then((res) => { mynotice({ page: 1, limit: 3, readStatus: 0 }).then((res) => {
// console.log('我的消息', res.data.data) // console.log('我的消息', res.data.data)
mynoticeNum.value = res.data.data.total mynoticeNum.value = res.data.data.total
mynoticeData.value = res.data.data.list mynoticeData.value = res.data.data.list
}) })
} }
const goToView = () => { const goToView = () => {
router.push({ router.push({
path: '/mynoticeView', path: '/mynoticeView',
}) })
} }
// const read = (item) => { // const read = (item) => {
// mynoticeRead(item.id).then((res) => { // mynoticeRead(item.id).then((res) => {
// console.log('已读', res) // console.log('已读', res)
// getMynotice() // getMynotice()
// }) // })
// } // }
// 建立链接 -- 携带cookie参数 // 建立链接 -- 携带cookie参数
onMounted(() => { onMounted(() => {
getSgcTotal().then((res) => { getSgcTotal().then((res) => {
// console.log('初始化========================>', res.data.data.count) // console.log('初始化========================>', res.data.data.count)
sgcNum.value = res.data.data.count sgcNum.value = res.data.data.count
@ -348,19 +320,19 @@
mybus.on('getMynotice', () => { mybus.on('getMynotice', () => {
getMynotice() getMynotice()
}) })
}) })
onBeforeUnmount(() => { onBeforeUnmount(() => {
mybus.off('getSgcNum') mybus.off('getSgcNum')
mybus.off('getMynotice') mybus.off('getMynotice')
}) })
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
@font-face { @font-face {
font-family: 'header-typeface'; font-family: 'header-typeface';
src: url('~@/assets/newHome/font/header-typeface.ttf'); src: url('~@/assets/newHome/font/header-typeface.ttf');
} }
.home-header { .home-header {
height: 0.64rem; height: 0.64rem;
width: 100%; width: 100%;
max-width: 1920px; max-width: 1920px;
@ -397,8 +369,7 @@
.name-bg-xihaian { .name-bg-xihaian {
height: 0.6rem; height: 0.6rem;
width: 0.6rem; width: 0.6rem;
background: url('~@/assets/newHome/newHome-title-bg-xihaian.png') background: url('~@/assets/newHome/newHome-title-bg-xihaian.png') no-repeat;
no-repeat;
background-size: 100%; background-size: 100%;
margin-right: 0.15rem; margin-right: 0.15rem;
} }
@ -478,9 +449,9 @@
cursor: pointer; cursor: pointer;
} }
} }
} }
.white { .white {
background-color: #fff; background-color: #fff;
box-shadow: 0 0.02rem 0.1rem rgba(0, 0, 0, 0.1); box-shadow: 0 0.02rem 0.1rem rgba(0, 0, 0, 0.1);
@ -513,15 +484,13 @@
color: #000; color: #000;
} }
} }
} }
.blue { .blue {
position: absolute; position: absolute;
background: linear-gradient( background: linear-gradient(to right,
to right,
rgba(15, 90, 253, 0.8), rgba(15, 90, 253, 0.8),
rgba(36, 25, 248, 0.8) rgba(36, 25, 248, 0.8));
);
.name { .name {
color: #fff; color: #fff;
@ -541,9 +510,9 @@
color: #fff; color: #fff;
} }
} }
} }
.mynotice { .mynotice {
width: 4rem; width: 4rem;
height: 3rem; height: 3rem;
background: #eee; background: #eee;
@ -560,18 +529,19 @@
color: #000; color: #000;
font-size: 0.16rem; font-size: 0.16rem;
} }
} }
.mynotice::-webkit-scrollbar { .mynotice::-webkit-scrollbar {
display: none; display: none;
} }
:deep(.ant-list-item) { :deep(.ant-list-item) {
border-bottom: 0.01rem solid #ccc; border-bottom: 0.01rem solid #ccc;
padding: 0.1rem; padding: 0.1rem;
} }
:deep(.ant-list-item-meta-title) {
:deep(.ant-list-item-meta-title) {
// display: flex; // display: flex;
// justify-content: space-around; // justify-content: space-around;
// align-items: center; // align-items: center;
@ -597,18 +567,18 @@
font-size: 0.1rem; font-size: 0.1rem;
} }
} }
} }
.iconTo { .iconTo {
display: block; display: block;
width: 0.35rem; width: 0.35rem;
height: 0.35rem; height: 0.35rem;
background: url('~@/assets/newHome/iconTo.png') no-repeat; background: url('~@/assets/newHome/iconTo.png') no-repeat;
cursor: pointer; cursor: pointer;
} }
</style> </style>
<style> <style>
html::-webkit-scrollbar { html::-webkit-scrollbar {
display: none; display: none;
} }
</style> </style>