629 lines
16 KiB
Vue
629 lines
16 KiB
Vue
<template>
|
|
<div
|
|
class="home-header"
|
|
:class="[
|
|
select !== 'home' || scrollTop > 500 ? 'white' : '',
|
|
props.showView === 'algorithm-details' ? '' : '',
|
|
]"
|
|
>
|
|
<div class="name" @click="goToHome">
|
|
<div class="name-bg" v-if="!itShowXiHaiAn"></div>
|
|
<div class="name-bg-xihaian" v-else></div>
|
|
<div class="name-content">
|
|
<p>城市云脑通用能力服务平台</p>
|
|
<p>(United Capacity System)</p>
|
|
</div>
|
|
</div>
|
|
<div
|
|
v-for="item in navList"
|
|
:key="item.key"
|
|
@click="jumpPage(item)"
|
|
class="nav"
|
|
:class="item.key == select ? 'select' : ''"
|
|
>
|
|
{{ item.name }}
|
|
</div>
|
|
<!-- 购物车 -->
|
|
<a-badge :count="sgcNum">
|
|
<svg
|
|
t="1650455446850"
|
|
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
|
|
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'"
|
|
p-id="2070"
|
|
></path>
|
|
</svg>
|
|
</a-badge>
|
|
<a-badge :count="mynoticeNum" style="margin-left: 0.2rem">
|
|
<!-- 消息提醒 -->
|
|
<svg
|
|
t="1654051054113"
|
|
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
|
|
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'"
|
|
p-id="2188"
|
|
></path>
|
|
</svg>
|
|
<!-- <a-avatar shape="square" size="large" /> -->
|
|
</a-badge>
|
|
<div class="mynotice" v-show="mynoticeFlag">
|
|
<a-list item-layout="horizontal" :data-source="mynoticeData">
|
|
<template #renderItem="{ item }">
|
|
<a-tooltip placement="left">
|
|
<template #title>
|
|
<span>{{ item.content }}</span>
|
|
</template>
|
|
<a-list-item>
|
|
<a-list-item-meta :description="item.senderDate">
|
|
<template #title>
|
|
<a>{{ item.content }}</a>
|
|
</template>
|
|
</a-list-item-meta>
|
|
</a-list-item>
|
|
</a-tooltip>
|
|
</template>
|
|
</a-list>
|
|
<div class="bottom" @click="goToView()">查看更多</div>
|
|
</div>
|
|
<div class="info">
|
|
<i class="img"></i>
|
|
<a-tooltip placement="bottom">
|
|
<template #title>
|
|
<span>{{ user.realName }}</span>
|
|
</template>
|
|
<span
|
|
class="name"
|
|
@click="jumpPage({ name: '个人中心', key: 'personalCenter' })"
|
|
>
|
|
{{ user.realName }}
|
|
</span>
|
|
</a-tooltip>
|
|
<span @click="logout" class="out">退出</span>
|
|
<i
|
|
@click="jumpPage({ name: '后台管理', key: 'houtaiguanli' })"
|
|
class="iconTo"
|
|
v-show="backFlag"
|
|
></i>
|
|
<!-- <i class="img1" @click="jumpWaibu"></i> -->
|
|
</div>
|
|
<div class="info1">
|
|
<i class="img1" @click="jumpWaibu"></i>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script setup>
|
|
import { ref, onMounted, onBeforeUnmount, defineProps } from 'vue'
|
|
import { getUserInfo, getRole } from '@/api/user'
|
|
import { recordRoute } from '@/config'
|
|
import { useRoute, useRouter } from 'vue-router'
|
|
import { mynotice } from '@/api/home'
|
|
import { useStore } from 'vuex'
|
|
import { getSgcTotal } from '@/api/home'
|
|
import Cookies from 'js-cookie'
|
|
import mybus from '@/myplugins/mybus'
|
|
import { DETAIL_PAGE_CONTENT_DEFAULT_TAB } from '@/global/GlobalConfig.js'
|
|
import { message } from 'ant-design-vue'
|
|
|
|
const store = useStore()
|
|
const router = useRouter()
|
|
const route = useRoute()
|
|
const itShowXiHaiAn = ref(whoShow.itShowXiHaiAn)
|
|
|
|
// 用户信息
|
|
const user = ref({
|
|
username: store.getters['user/username'],
|
|
realName: store.getters['user/realName'],
|
|
})
|
|
const select = ref(router.currentRoute.value.name)
|
|
const mynoticeFlag = ref(false)
|
|
const mynoticeData = ref([])
|
|
const navList = ref(navListManagement.navList)
|
|
const backFlag = ref(false)
|
|
getUserInfo().then((res) => {
|
|
res.data.data.roleIdList.map((val) => {
|
|
getRole(val).then((role) => {
|
|
if (role.data.data.name === '后台管理员') {
|
|
backFlag.value = true
|
|
}
|
|
})
|
|
})
|
|
})
|
|
console.log('navList------------>', navList)
|
|
|
|
const props = defineProps({
|
|
showView: { type: String, default: '' },
|
|
})
|
|
|
|
// 退出登录
|
|
const logout = async () => {
|
|
await store.dispatch('user/logout')
|
|
window.sessionStorage.setItem('visits', JSON.stringify([]))
|
|
// 西海岸不返回登录页
|
|
if (!itShowXiHaiAn.value) {
|
|
if (recordRoute) {
|
|
const fullPath = route.fullPath
|
|
router.push(`/login?redirect=${fullPath}`)
|
|
} else {
|
|
router.push('/login')
|
|
}
|
|
}
|
|
}
|
|
// 返回首页
|
|
const goToHome = () => {
|
|
// 西海岸
|
|
if (itShowXiHaiAn.value) {
|
|
if (!xhaHasPermissionUser.list.includes(user.value.username)) {
|
|
return message.warn('暂无权限')
|
|
}
|
|
}
|
|
router.push({
|
|
path: '/home',
|
|
})
|
|
}
|
|
const jumpWaibu = () => {
|
|
window.open('http://15.72.177.175:18460/analystrunner/tonglan', '_blank')
|
|
}
|
|
// 跳转页面
|
|
const jumpPage = (item) => {
|
|
// 西海岸
|
|
if (itShowXiHaiAn.value) {
|
|
let _arr = ['共享门户', '能力云图', '能力统计', '需求中心', '赋能案例']
|
|
if (
|
|
_arr.includes(item.name) &&
|
|
!xhaHasPermissionUser.list.includes(user.value.username)
|
|
) {
|
|
return message.warn('暂无权限')
|
|
}
|
|
}
|
|
select.value = item.key
|
|
switch (item.name) {
|
|
case '个人中心':
|
|
window.sessionStorage.setItem('type', JSON.stringify('PurchaseVehicle'))
|
|
router.push({
|
|
path: '/personalCenter',
|
|
})
|
|
break
|
|
case '能力统计':
|
|
router.push({
|
|
path: '/abilityStatistics',
|
|
})
|
|
break
|
|
case '能力集市':
|
|
router.push({
|
|
path: '/DetailsPageconetent',
|
|
query: {
|
|
select: DETAIL_PAGE_CONTENT_DEFAULT_TAB,
|
|
},
|
|
})
|
|
break
|
|
case '能力云图':
|
|
router.push({
|
|
path: '/capabilityCloud',
|
|
})
|
|
break
|
|
// case '技术文档':
|
|
// router.push({
|
|
// path: '/developmentGuide',
|
|
// })
|
|
// break
|
|
case '新手指南':
|
|
router.push({
|
|
path: '/instructionManual',
|
|
})
|
|
break
|
|
case '需求中心':
|
|
router.push({
|
|
path: '/demandCenter',
|
|
})
|
|
break
|
|
case '区市站点':
|
|
router.push({
|
|
path: '/mapTest',
|
|
})
|
|
break
|
|
case '后台管理':
|
|
Cookies.remove('JSESSIONID')
|
|
window.open(window.SITE_CONFIG.backUrl + '/#/workBench-workBench')
|
|
// window.reload('http://15.2.21.238:9797')
|
|
break
|
|
case '赋能案例':
|
|
router.push({
|
|
path: '/assignCase',
|
|
})
|
|
break
|
|
case '典型赋能案例':
|
|
router.push({
|
|
path: '/assignCase',
|
|
})
|
|
break
|
|
case '融合服务':
|
|
router.push({
|
|
path: '/integrationServices',
|
|
})
|
|
break
|
|
case 'CIM专区':
|
|
router.push({
|
|
path: '/cimSpecialArea',
|
|
})
|
|
break
|
|
default:
|
|
router.push('/home')
|
|
break
|
|
}
|
|
}
|
|
const scrollTop = ref(0)
|
|
window.onscroll = function () {
|
|
//为了保证兼容性，这里取两个值，哪个有值取哪一个
|
|
//scrollTop就是触发滚轮事件时滚轮的高度
|
|
scrollTop.value =
|
|
document.documentElement.scrollTop || document.body.scrollTop
|
|
// console.log('滚动距离' + scrollTop.value)
|
|
}
|
|
mybus.on('getSgcNum', () => {
|
|
getSgcTotal().then((res) => {
|
|
sgcNum.value = res.data.data.count
|
|
// console.log('申购车总数========================>', res.data.data.count)
|
|
})
|
|
})
|
|
|
|
const sgcNum = ref(0)
|
|
const goToSgc = () => {
|
|
window.sessionStorage.setItem('type', JSON.stringify('PurchaseVehicle'))
|
|
router.push('/personalCenter')
|
|
}
|
|
const mynoticeNum = ref(0)
|
|
// 我的消息
|
|
const getMynotice = () => {
|
|
mynotice({ page: 1, limit: 3, readStatus: 0 }).then((res) => {
|
|
// console.log('我的消息', res.data.data)
|
|
mynoticeNum.value = res.data.data.total
|
|
mynoticeData.value = res.data.data.list
|
|
})
|
|
}
|
|
const goToView = () => {
|
|
router.push({
|
|
path: '/mynoticeView',
|
|
})
|
|
}
|
|
// const read = (item) => {
|
|
// mynoticeRead(item.id).then((res) => {
|
|
// console.log('已读', res)
|
|
// getMynotice()
|
|
// })
|
|
// }
|
|
// 建立链接 -- 携带cookie参数
|
|
|
|
onMounted(() => {
|
|
getSgcTotal().then((res) => {
|
|
// console.log('初始化========================>', res.data.data.count)
|
|
sgcNum.value = res.data.data.count
|
|
})
|
|
getMynotice()
|
|
// 解决
|
|
const mynoticeDom = document.querySelector('.icon2')
|
|
const mynotice = document.querySelector('.mynotice')
|
|
if (mynoticeDom) {
|
|
mynoticeDom.addEventListener('mouseover', () => {
|
|
mynoticeFlag.value = true
|
|
})
|
|
mynoticeDom.addEventListener('mouseout', () => {
|
|
mynoticeFlag.value = false
|
|
})
|
|
}
|
|
if (mynotice) {
|
|
mynotice.addEventListener('mouseover', () => {
|
|
mynoticeFlag.value = true
|
|
})
|
|
mynotice.addEventListener('mouseout', () => {
|
|
mynoticeFlag.value = false
|
|
})
|
|
}
|
|
mybus.on('getSgcNum', () => {
|
|
getSgcTotal().then((res) => {
|
|
sgcNum.value = res.data.data.count
|
|
// console.log('申购车总数========================>', res.data.data.count)
|
|
})
|
|
})
|
|
mybus.on('getMynotice', () => {
|
|
getMynotice()
|
|
})
|
|
})
|
|
onBeforeUnmount(() => {
|
|
mybus.off('getSgcNum')
|
|
mybus.off('getMynotice')
|
|
})
|
|
</script>
|
|
<style lang="less" scoped>
|
|
@font-face {
|
|
font-family: 'header-typeface';
|
|
src: url('~@/assets/newHome/font/header-typeface.ttf');
|
|
}
|
|
|
|
.home-header {
|
|
height: 0.64rem;
|
|
width: 100%;
|
|
max-width: 1920px;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
// padding: 0 1rem;
|
|
background-color: rgba(0, 0, 25, 0.7);
|
|
position: fixed;
|
|
z-index: 1000;
|
|
top: 0;
|
|
|
|
div {
|
|
color: #fff;
|
|
font-size: 0.16rem;
|
|
}
|
|
|
|
.name {
|
|
cursor: pointer;
|
|
font-size: 0.22rem;
|
|
font-family: header-typeface;
|
|
margin-right: 0.2rem;
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
.name-bg {
|
|
height: 0.6rem;
|
|
width: 0.6rem;
|
|
background: url('~@/assets/newHome/ucs-2.png') no-repeat;
|
|
background-size: 100%;
|
|
margin-right: 0.15rem;
|
|
}
|
|
|
|
.name-bg-xihaian {
|
|
height: 0.6rem;
|
|
width: 0.6rem;
|
|
background: url('~@/assets/newHome/newHome-title-bg-xihaian.png')
|
|
no-repeat;
|
|
background-size: 100%;
|
|
margin-right: 0.15rem;
|
|
}
|
|
|
|
.name-content {
|
|
padding-top: 0.14rem;
|
|
|
|
p {
|
|
font-size: 0.2rem;
|
|
margin-bottom: 0;
|
|
|
|
&:nth-of-type(2) {
|
|
font-size: 0.12rem;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.nav {
|
|
width: 1.2rem;
|
|
height: 0.64rem;
|
|
line-height: 0.64rem;
|
|
text-align: center;
|
|
}
|
|
|
|
.nav:hover {
|
|
background: #0058e1;
|
|
color: #fff;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.select {
|
|
background: #0058e1;
|
|
color: #fff !important;
|
|
}
|
|
.info1 {
|
|
margin-left: 0.1rem;
|
|
display: flex;
|
|
.img1 {
|
|
height: 0.3rem;
|
|
width: 1.4rem;
|
|
margin-left: 0.1rem;
|
|
background: url('~@/assets/newHome/yiwang.png') no-repeat;
|
|
}
|
|
}
|
|
|
|
.info {
|
|
// width: 2rem;
|
|
margin-left: 0.2rem;
|
|
display: flex;
|
|
justify-content: center;
|
|
|
|
.img {
|
|
width: 0.3rem;
|
|
height: 0.3rem;
|
|
border-radius: 0.1rem;
|
|
background: url('~@/assets/newHome/user.png') no-repeat;
|
|
background-size: 100%;
|
|
}
|
|
.img1 {
|
|
margin-left: 0.08rem;
|
|
height: 0.3rem;
|
|
width: 0.8rem;
|
|
border-radius: 0.1rem;
|
|
background: url('~@/assets/newHome/yiwang.png') no-repeat;
|
|
background-size: 100%;
|
|
}
|
|
|
|
span {
|
|
height: 0.3rem;
|
|
line-height: 0.3rem;
|
|
margin-left: 0.08rem;
|
|
margin-right: 0.06rem;
|
|
font-size: 0.16rem;
|
|
}
|
|
|
|
.name {
|
|
max-width: 2.3rem;
|
|
text-overflow: ellipsis;
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 1;
|
|
-webkit-box-orient: vertical;
|
|
overflow: hidden;
|
|
word-break: break-all;
|
|
}
|
|
|
|
.out {
|
|
cursor: pointer;
|
|
// padding: 0 0.16rem;
|
|
padding: 0 0.04rem 0 0.1rem;
|
|
border-left: 0.01rem solid #666;
|
|
}
|
|
|
|
.icon {
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
}
|
|
|
|
.white {
|
|
background-color: #fff;
|
|
box-shadow: 0 0.02rem 0.1rem rgba(0, 0, 0, 0.1);
|
|
|
|
.name {
|
|
color: #0058e1;
|
|
|
|
.name-bg {
|
|
height: 0.6rem;
|
|
width: 0.6rem;
|
|
background: url('~@/assets/newHome/ucs-1.png') no-repeat;
|
|
background-size: 100%;
|
|
margin-right: 0.15rem;
|
|
}
|
|
|
|
p {
|
|
color: #0058e1;
|
|
}
|
|
}
|
|
|
|
.icon {
|
|
cursor: pointer;
|
|
}
|
|
|
|
.nav {
|
|
color: #000;
|
|
}
|
|
|
|
.info {
|
|
span {
|
|
color: #000;
|
|
}
|
|
}
|
|
}
|
|
|
|
.blue {
|
|
position: absolute;
|
|
background: linear-gradient(
|
|
to right,
|
|
rgba(15, 90, 253, 0.8),
|
|
rgba(36, 25, 248, 0.8)
|
|
);
|
|
|
|
.name {
|
|
color: #fff;
|
|
}
|
|
|
|
.nav {
|
|
color: #fff;
|
|
}
|
|
|
|
.nav:hover {
|
|
background: #fff;
|
|
color: #0058e1;
|
|
}
|
|
|
|
.info {
|
|
span {
|
|
color: #fff;
|
|
}
|
|
}
|
|
}
|
|
|
|
.mynotice {
|
|
width: 4rem;
|
|
height: 3rem;
|
|
background: #eee;
|
|
border-radius: 0.05rem;
|
|
position: absolute;
|
|
top: 0.45rem;
|
|
right: 2.4rem;
|
|
overflow-y: scroll;
|
|
|
|
.bottom {
|
|
cursor: pointer;
|
|
width: 100%;
|
|
text-align: center;
|
|
color: #000;
|
|
font-size: 0.16rem;
|
|
}
|
|
}
|
|
|
|
.mynotice::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
|
|
:deep(.ant-list-item) {
|
|
border-bottom: 0.01rem solid #ccc;
|
|
padding: 0.1rem;
|
|
}
|
|
|
|
:deep(.ant-list-item-meta-title) {
|
|
// display: flex;
|
|
// justify-content: space-around;
|
|
// align-items: center;
|
|
// padding: 0 0.05rem;
|
|
a {
|
|
width: 3.8rem;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 2;
|
|
word-break: break-all;
|
|
-webkit-box-orient: vertical;
|
|
}
|
|
|
|
button {
|
|
width: 0.7rem;
|
|
height: 0.25rem;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
|
|
span {
|
|
font-size: 0.1rem;
|
|
}
|
|
}
|
|
}
|
|
|
|
.iconTo {
|
|
display: block;
|
|
width: 0.35rem;
|
|
height: 0.35rem;
|
|
background: url('~@/assets/newHome/iconTo.png') no-repeat;
|
|
cursor: pointer;
|
|
}
|
|
</style>
|
|
<style>
|
|
html::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
</style>
|