代码拉取完成，页面将自动刷新
<template>
<section class="home-index">
<!-- S 首屏-动画 -->
<div v-show="activeTab === 'top'" class="content-top" @mouseover="handleMouseoverMenuItem">
<div v-show="showSkipAnimationBtn" class="btn-skip-animation" @click="handleSkipAnimation">跳过动画</div>
<!-- /头部导航条 -->
<iframe :src="iframeSrc" class="top-cont" frameborder="0"></iframe>
<!-- /首屏动画区域 -->
<div ref="rTopMenu" class="top-menu">
<div class="menu-content">
<div class="fixed-box" @mouseover="handleMouseoverMenuItem">
<div
ref="rMenuItem"
v-for="item in menuItemList"
:key="item.title"
:class="{ 'menu-item': true, active: item.title === activeMenu.title }"
>
<p class="menu-item-title">{{ isChinese ? item.title : item.subtitle }}</p>
<p class="menu-item-subtitle">{{ !isChinese ? item.title : item.subtitle }}</p>
</div>
</div>
<div ref="rFixedLineTop" class="fixed-line-top"></div>
<div ref="rFixedLineMiddle" class="fixed-line-middle"></div>
<div class="fixed-bottom"></div>
</div>
<!-- <div :class="{ 'menu-toggle': true, active: true }"> -->
<div :class="{ 'menu-toggle': true, active: showMenuToggle }">
<div class="toggle-title">
<span class="title-big">{{ isChinese ? activeMenu.title : activeMenu.subtitle }}</span>
<span class="title-small">{{ !isChinese ? activeMenu.title : activeMenu.subtitle }}</span>
</div>
<div class="toggle-content">
<!-- TUDO-start -->
<div v-show="activeMenu.subtitle === 'Industrial Applications'" class="app-menu">
<div
v-for="(itemType, index) in applicationTypes"
:key="itemType.title"
class="app-menu-wrap"
:style="{ width: isChinese ? '270px' : '370px' }"
>
<div class="menu-type">{{ isChinese ? itemType.title : itemType.subtitle }}</div>
<div class="menu-title-wrap">
<button
v-for="item in filterSUbtypes(index)"
:key="item.id"
:disabled="!item.link"
:title="showItemRouterTooltip(item)"
class="menu-title"
@click="
goToPathRuoYi(
item.link,
item.cookie,
item.subitemName,
item,
'top'
)
"
>
<template v-if="!!item.link && item.linkAuthFlag === 0">
<el-tooltip class="item" effect="dark" :content="accessContent" placement="top">
<span class="my-span-sty">{{ showItemRouterChOrEn(item) }}</span>
</el-tooltip>
</template>
<template v-else>
<span class="my-span-sty">{{ showItemRouterChOrEn(item) }}</span>
</template>
</button>
</div>
</div>
</div>
<!-- TUDO-end -->
<!-- /首屏高级应用 -->
<div v-show="activeMenu.subtitle === 'Data Middle Platform'" class="other-menu">
<!-- :class 'menu-title-diff': item.subitemName === '设备对象构建' -->
<button
v-for="item in linksData"
:key="item.id"
:disabled="!item.link"
:title="showItemRouterTooltip(item)"
:class="{'menu-title': true}"
@click.stop="goToPath(item, 'top')"
>
<template v-if="!!item.link && item.linkAuthFlag === 0">
<el-tooltip class="item" effect="dark" :content="accessContent" placement="top">
<span class="my-span-sty">{{ showItemRouterChOrEn(item) }}</span>
</el-tooltip>
</template>
<template v-else>
<span class="my-span-sty">{{ showItemRouterChOrEn(item) }}</span>
</template>
</button>
</div>
<!-- /首屏数据中台 -->
<div v-show="activeMenu.subtitle === 'Technical Middle Platform'" class="other-menu">
<button
v-for="item in linksTechnology"
:key="item.id"
:disabled="!item.link"
:title="showItemRouterTooltip(item)"
class="menu-title"
@click="goToPath(item, 'top')"
>
<template v-if="!!item.link && item.linkAuthFlag === 0">
<el-tooltip class="item" effect="dark" :content="accessContent" placement="top">
<span class="my-span-sty">{{ showItemRouterChOrEn(item) }}</span>
</el-tooltip>
</template>
<template v-else>
<el-tooltip
v-if="(item.subitemName == 'FMEA配置' || item.subitemName == 'FTA配置') && isChinese"
:content="item.subitemName == 'FMEA配置' ? '失效模式与影响分析（FMEA）配置' : '故障树分析（FTA）配置'"
placement="top"
>
<span class="my-span-sty">{{ showItemRouterChOrEn(item) }}</span>
</el-tooltip>
<span v-else class="my-span-sty">{{ showItemRouterChOrEn(item) }}</span>
</template>
</button>
</div>
<!-- /首屏技术中台 -->
<div v-show="activeMenu.subtitle === 'Business Middle Platform'" class="other-menu">
<button
v-for="item in linksBusiness"
:key="item.id"
:disabled="!item.link"
:title="showItemRouterTooltip(item)"
class="menu-title"
@click="goToPath(item, 'top')"
>
<template v-if="!!item.link && item.linkAuthFlag === 0">
<el-tooltip class="item" effect="dark" :content="accessContent" placement="top">
<span class="my-span-sty">{{ showItemRouterChOrEn(item) }}</span>
</el-tooltip>
</template>
<template v-else>
<el-tooltip
v-if="(item.subitemName == 'FMEA库' || item.subitemName == 'FTA库') && isChinese"
:content="item.subitemName == 'FMEA库' ? '失效模式与影响分析（FMEA）库' : '故障树分析（FTA）库'"
placement="top"
>
<span class="my-span-sty">{{ showItemRouterChOrEn(item) }}</span>
</el-tooltip>
<span v-else class="my-span-sty">{{ showItemRouterChOrEn(item) }}</span>
</template>
</button>
</div>
<!-- /首屏业务中台 -->
<div v-show="activeMenu.subtitle === 'Control Center'" class="other-menu">
<button
v-for="item in linksCloud"
:key="item.id"
:disabled="!item.link"
:title="showItemRouterTooltip(item)"
class="menu-title"
@click="goToPath(item, 'top')"
>
<template v-if="!!item.link && item.linkAuthFlag === 0">
<el-tooltip class="item" effect="dark" :content="accessContent" placement="top">
<span class="my-span-sty">{{ showItemRouterChOrEn(item) }}</span>
</el-tooltip>
</template>
<template v-else>
<span class="my-span-sty">{{ showItemRouterChOrEn(item) }}</span>
</template>
</button>
</div>
<!-- /首屏管控中心 -->
<div v-show="activeMenu.subtitle === 'Resource Application'" class="other-menu">
<button
v-for="item in linksResources"
:key="item.id"
:disabled="!item.link"
:title="showItemRouterTooltip(item)"
class="menu-title"
@click="goToPath(item, 'top')"
>
<template v-if="!!item.link && item.linkAuthFlag === 0">
<el-tooltip class="item" effect="dark" :content="accessContent" placement="top">
<span class="my-span-sty">{{ showItemRouterChOrEn(item) }}</span>
</el-tooltip>
</template>
<template v-else>
<span class="my-span-sty">{{ showItemRouterChOrEn(item) }}</span>
</template>
</button>
</div>
<!-- /首屏资源申请 -->
</div>
</div>
</div>
<!-- /底部导航区域 -->
</div>
<!-- E 首屏-动画 -->
<!-- S 第二屏-分类导航 -->
<div v-show="activeTab === 'bottom'" :class="{'content-bottom': true, 'is-english': !this.isChinese}">
<div class="wrap-sec sec-one">
<div class="sec-title">SaaS</div>
<div class="sec-content">
<p class="item-title">{{ chineseOrEnglishName('高级应用') }}</p>
<div class="item-content">
<div
v-for="(itemType, index) in applicationTypes"
:key="itemType.title"
:class="{'app-type': true, 'is-diff': currentDomainName === '葛洲坝电站'}"
>
<p class="type-title">{{ isChinese ? itemType.title : itemType.subtitle }}</p>
<div class="type-wrap">
<button
v-for="item in filterSUbtypes(index, true)"
:key="item.id"
:disabled="!item.link || hasJurisdiction(item)"
:title="showItemRouterTooltip(item)"
:class="{ 'item-router': true, 'short-btn': filterSUbtypes(index, true).length === 3}"
@click="
goToPathRuoYi(
item.link,
item.cookie,
item.subitemName,
item,
'bottom'
)
"
>
<template v-if="!!item.link && item.linkAuthFlag === 0">
<el-tooltip class="item" effect="dark" :content="accessContent" placement="top">
<span class="my-span-sty">{{ showItemRouterChOrEn(item) }}</span>
</el-tooltip>
</template>
<template v-else>
<span class="my-span-sty">{{ showItemRouterChOrEn(item) }}</span>
</template>
</button>
</div>
</div>
</div>
</div>
</div>
<div class="wrap-sec sec-two">
<div class="sec-title">PaaS</div>
<div class="sec-content">
<div class="two-left-wrap">
<p class="item-title">{{ chineseOrEnglishName('技术中台') }}</p>
<div class="item-content">
<button
v-for="item in linksTechnology"
:key="item.id"
:disabled="!item.link || hasJurisdiction(item)"
:title="showItemRouterTooltip(item)"
class="item-router"
@click="goToPath(item, 'bottom')"
>
<template v-if="!!item.link && item.linkAuthFlag === 0">
<el-tooltip class="item" effect="dark" :content="accessContent" placement="top">
<span class="my-span-sty">{{ showItemRouterChOrEn(item) }}</span>
</el-tooltip>
</template>
<template v-else>
<el-tooltip
v-if="(item.subitemName == 'FMEA配置' || item.subitemName == 'FTA配置') && isChinese"
:content="item.subitemName == 'FMEA配置' ? '失效模式与影响分析（FMEA）配置' : '故障树分析（FTA）配置'"
placement="top"
>
<span class="my-span-sty">{{ showItemRouterChOrEn(item) }}</span>
</el-tooltip>
<span v-else class="my-span-sty">{{ showItemRouterChOrEn(item) }}</span>
</template>
</button>
</div>
</div>
<div class="two-center-wrap">
<div class="center-top-wrap">
<p class="item-title">{{ chineseOrEnglishName('业务中台') }}</p>
<div class="item-content">
<button
v-for="item in linksBusiness"
:key="item.id"
:disabled="!item.link || hasJurisdiction(item)"
:title="showItemRouterTooltip(item)"
class="item-router"
@click="goToPath(item, 'bottom')"
>
<template v-if="!!item.link && item.linkAuthFlag === 0">
<el-tooltip class="item" effect="dark" :content="accessContent" placement="top">
<span class="my-span-sty">{{ showItemRouterChOrEn(item) }}</span>
</el-tooltip>
</template>
<template v-else>
<el-tooltip
v-if="(item.subitemName == 'FMEA库' || item.subitemName == 'FTA库') && isChinese"
:content="item.subitemName == 'FMEA库' ? '失效模式与影响分析（FMEA）库' : '故障树分析（FTA）库'"
placement="top"
>
<span class="my-span-sty">{{ showItemRouterChOrEn(item) }}</span>
</el-tooltip>
<span v-else class="my-span-sty">{{ showItemRouterChOrEn(item) }}</span>
</template>
</button>
</div>
</div>
<div class="center-bottom-wrap">
<p class="item-title">{{ chineseOrEnglishName('数据中台') }}</p>
<div class="item-content">
<button
v-for="item in linksData"
:key="item.id"
:disabled="!item.link || hasJurisdiction(item)"
:title="showItemRouterTooltip(item)"
:class="{ 'item-router': true }"
@click.stop="goToPath(item, 'bottom')"
>
<template v-if="!!item.link && item.linkAuthFlag === 0">
<el-tooltip class="item" effect="dark" :content="accessContent" placement="top">
<span class="my-span-sty">{{ showItemRouterChOrEn(item) }}</span>
</el-tooltip>
</template>
<template v-else>
<span class="my-span-sty">{{ showItemRouterChOrEn(item) }}</span>
</template>
</button>
</div>
</div>
</div>
<div class="two-right-wrap">
<p class="item-title">{{ chineseOrEnglishName('管控中心') }}</p>
<div class="item-content">
<button
v-for="item in linksCloud"
:key="item.id"
:disabled="!item.link || hasJurisdiction(item)"
:title="showItemRouterTooltip(item)"
class="item-router"
@click="goToPath(item, 'bottom')"
>
<template v-if="!!item.link && item.linkAuthFlag === 0">
<el-tooltip class="item" effect="dark" :content="accessContent" placement="top">
<span class="my-span-sty">{{ showItemRouterChOrEn(item) }}</span>
</el-tooltip>
</template>
<template v-else>
<span class="my-span-sty">{{ showItemRouterChOrEn(item) }}</span>
</template>
</button>
</div>
</div>
</div>
</div>
<div class="wrap-sec sec-three">
<div class="sec-title">IaaS</div>
<div class="sec-content">
<p class="item-title">{{ chineseOrEnglishName('资源申请') }}</p>
<div class="item-content resources">
<button
v-for="item in linksResources"
:key="item.id"
:disabled="!item.link || hasJurisdiction(item)"
:title="showItemRouterTooltip(item)"
class="item-router"
@click="goToPath(item, 'bottom')"
>
<template v-if="!!item.link && item.linkAuthFlag === 0">
<el-tooltip class="item" effect="dark" :content="accessContent" placement="top">
<span class="my-span-sty">{{ showItemRouterChOrEn(item) }}</span>
</el-tooltip>
</template>
<template v-else>
<span class="my-span-sty">{{ showItemRouterChOrEn(item) }}</span>
</template>
</button>
</div>
</div>
<!-- /次屏资源申请 -->
</div>
</div>
<!-- E 第二屏-分类导航 -->
<!-- S 切换显示屏 -->
<div ref="rChangeTab" class="change-tab">
<div v-show="activeTab === 'bottom'" class="tab-top" @click="handleChangeTab('top')"></div>
<div class="tab-line"></div>
<div v-show="activeTab === 'top'" class="tab-bottom" @click="handleChangeTab('bottom')"></div>
</div>
<!-- E 切换显示屏 -->
</section>
</template>
<script>
import Cookie from 'js-cookie'
import {
getLinkList,
visitRecord,
userNameEncrypt,
loginCheckSn,
getUserNameFromToken,
judgeAdmin,
getdomains,
getPlatformInfo,
refreshToken
} from '@/api/home/url.js'
import { listData } from '@/api/system/dict/data.js'
import { mapGetters } from 'vuex'
import { getUserName,setUserName } from "@/utils/storage";
import { getDomain } from "@/utils/storage";
const publishPath = process.env.NODE_ENV === 'production' ? '/portal/' : '/'
const animationDir = location.hostname.includes('cypc.com.cn') ? 'animationIndex' : 'animationIndexDev'
export default {
name: 'HomeIndex',
data() {
return {
/** 当前页面是否中文 */
isChinese: !(sessionStorage.getItem('language') === 'English'),
/** 当前屏 */
activeTab: 'top',
/** 用户信息 */
avatarUser: '',
/** 新打开标签页 */
myWindow: null,
/** 显示隐藏目录列表 */
showMenuToggle: false,
/** 目录列表 */
menuItemList: [
{
title: '高级应用',
subtitle: 'Industrial Applications'
},
{
title: '数据中台',
subtitle: 'Data Middle Platform'
},
{
title: '技术中台',
subtitle: 'Technical Middle Platform'
},
{
title: '业务中台',
subtitle: 'Business Middle Platform'
},
{
title: '管控中心',
subtitle: 'Control Center'
},
{
title: '资源申请',
subtitle: 'Resource Application'
}
],
applicationTypes: [
{
title: '智能运维',
subtitle: 'Intelligent Operation'
},
{
title: '智能检修',
subtitle: 'Intelligent Maintenance'
},
{
title: '智慧调度',
subtitle: 'Intelligent Dispatching'
},
{
title: '智能决策',
subtitle: 'Intelligent Decision'
},
// {
// title: '测试type1',
// subtitle: 'Intelligent Decision1'
// }
],
/** 当前首屏下部展开菜单 */
activeMenu: {},
/** 个人工作台链接数据 */
linksWorkbench: [],
/** 高级应用链接数据 */
linksApplications: [],
/** 技术中台链接数据 */
linksTechnology: [],
/** 业务中台链接数据 */
linksBusiness: [],
/** 数据中台链接数据 */
linksData: [
{
link: '',
cookie: '',
subitemName: ''
}
],
/** 云管控链接数据 */
linksCloud: [],
/** 资源申请链接数据 */
linksResources: [],
/** 显示跳过动画按钮 */
showSkipAnimationBtn: false,
/** 当前页面选中的电站 */
currentDomainName: '公司',
/** 公司厂站域名列表 */
domainNameList: {},
loginTimer:null
}
},
computed: {
...mapGetters(['stationName']),
accessContent() {
return this.isChinese ? '没有访问权限' : 'No access'
},
iframeSrc() {
if (!!sessionStorage.getItem('animationPlayed')) {
return `${window.location.protocol}//${window.location.host}${publishPath}${animationDir}/YMH_3_DG.html`
}
return `${window.location.protocol}//${window.location.host}${publishPath}${animationDir}/YMH_3.html`
}
},
beforeCreate() {
this.$EventBus.$emit('onIndexChangeTab', true)
},
mounted() {
if (!location.hostname.includes('cypc.com.cn')) {
this.handleSkipAnimation()
}
this.getDomainNameList()
this.$EventBus.$on('onChangeLanguage', isChinese => {
this.isChinese = isChinese
})
this.$EventBus.$on('onChangeStation', val => {
this.currentDomainName = val !== '长江电力' ? val + '电站' : '公司'
this.handleChangeTab('bottom')
})
window.addEventListener('message', this.handleMessage)
if (!!sessionStorage.getItem('animationPlayed')) {
this.menuImmediatelyShow()
}
this.loginTimer = setInterval(()=>{
refreshToken()
}, 1000 * 60 * 10)
},
beforeDestroy() {
this.$EventBus.$off('onChangeLanguage')
this.$EventBus.$off('onChangeStation')
window.removeEventListener('message', this.handleMessage)
clearInterval(this.loginTimer);
},
methods: {
/** 处理动画传入的事件 */
handleMessage(e) {
if (e.data.type === 'changeStation') {
if (e.data.data === this.stationName || this.stationName === '公司') {
this.currentDomainName = e.data.data
this.handleChangeTab('bottom')
} else {
this.$message.warning('没有权限')
}
} else {
this.menuDelayShow()
}
},
/**
* 切换显示屏
* @param {string} tab top-动画屏；bottom-菜单屏
*/
handleChangeTab(tab) {
if (tab === 'top') {
this.currentDomainName = '公司'
}
this.activeTab = tab
this.$EventBus.$emit('onIndexChangeTab', tab === 'top')
const sendVal =
this.currentDomainName === '公司' ? '长江电力' : this.currentDomainName.replace('电站', '')
this.$EventBus.$emit('onChangeActiveSubmenu', sendVal)
},
/** 鼠标移入展开首屏下部菜单 */
handleMouseoverMenuItem(e) {
if (e.target.className === 'menu-item' || e.target.className === 'menu-item active') {
if (this.isChinese) {
this.activeMenu = {
title: e.target.childNodes[0].innerHTML,
subtitle: e.target.childNodes[1].innerHTML
}
} else {
this.activeMenu = {
title: e.target.childNodes[1].innerHTML,
subtitle: e.target.childNodes[0].innerHTML
}
}
this.showMenuToggle = true
} else if (e.target.className === 'menu-item-title') {
if (this.isChinese) {
this.activeMenu = this.menuItemList.find(item => item.title === e.target.innerHTML)
} else {
this.activeMenu = this.menuItemList.find(item => item.subtitle === e.target.innerHTML)
}
this.showMenuToggle = true
} else if (e.target.className === 'menu-item-subtitle') {
if (this.isChinese) {
this.activeMenu = this.menuItemList.find(item => item.subtitle === e.target.innerHTML)
} else {
this.activeMenu = this.menuItemList.find(item => item.title === e.target.innerHTML)
}
this.showMenuToggle = true
} else if (
e.target.className === 'top-cont' ||
e.target.className === 'fixed-bottom' ||
e.target.className === 'menu-content'
) {
this.activeMenu = {}
this.showMenuToggle = false
}
},
/** 获取链接列表 */
handleGetLinkList() {
getLinkList().then(res => {
if (res.code === 200) {
this.linksWorkbench = []
this.linksApplications = []
this.linksTechnology = []
this.linksBusiness = []
this.linksData = []
this.linksCloud = []
this.linksResources = []
this.$store.commit('SET_AUTH_LIST',res.data)
res.data.forEach(item => {
switch (item.menuName) {
case '个人工作台':
this.linksWorkbench.push(item)
break
case '高级应用':
this.linksApplications.push(item)
break
case '技术中台':
this.linksTechnology.push(item)
break
case '业务中台':
this.linksBusiness.push(item)
break
case '数据中台':
this.linksData.push(item)
break
case '管控中心':
this.linksCloud.push(item)
break
case '资源申请':
this.linksResources.push(item)
break
default:
break
}
})
} else {
this.$message.error('获取连接列表失败！')
}
})
},
/** 开始动画 */
startAnimation(time) {
setTimeout(() => {
// 通知顶部navBar开始动画
this.$EventBus.$emit('onStartAnimation')
// 执行过一次动画后设置标记
sessionStorage.setItem('animationPlayed', 'animationPlayed')
// 首屏底部菜单外框
this.$refs.rTopMenu.style.height = '112px'
// 首屏底部菜单顶线
setTimeout(() => {
this.$refs.rFixedLineTop.style.width = '98%'
}, 1000)
// 首屏底部菜单中间线
setTimeout(() => {
this.$refs.rFixedLineMiddle.style.width = '98%'
}, 1200)
// 首屏底部菜单分类项
this.$refs.rMenuItem.forEach((item, index) => {
setTimeout(() => {
item.style.opacity = 1
}, 1000 + index * 1000 * 0.2)
})
/** 右侧切换上下屏线条 */
setTimeout(() => {
this.$refs.rChangeTab.style.opacity = 1
}, 1200)
/** 动画结束隐藏跳过动画按钮 */
setTimeout(() => {
this.showSkipAnimationBtn = false
}, 20000)
}, time)
},
/** 跳过动画操作 */
handleSkipAnimation() {
const iframeUrl = `${window.location.protocol}//${window.location.host}${publishPath}${animationDir}/YMH_3_DG.html`
document.getElementsByClassName('top-cont')[0].src = iframeUrl
this.startAnimation(0)
this.showSkipAnimationBtn = false
},
/** 完整展示动画时菜单延迟显示 */
menuDelayShow() {
this.showSkipAnimationBtn = true
this.startAnimation(7500)
},
/** 不展示动画时菜单直接显示 */
menuImmediatelyShow() {
this.startAnimation(0)
},
/** 跳转到高级应用 */
async goToPathRuoYi(link, cookieString, subitemName, item, position) {
if (item.linkAuthFlag === 0) {
return
}
await this.changeVisitRecord(subitemName)
const key = cookieString.split(':')[0]
const value = cookieString.split(':')[1]
Cookie.remove(key, { domain: getDomain() })
Cookie.set(key, value, { domain: getDomain() })
Cookie.set('isFirst', 1, { domain: getDomain() })
if (link.indexOf('http') != -1) {
this.myWindow = window.open(link, link)
} else {
let url = ''
if (Object.keys(this.domainNameList).length > 0) {
this.domainNameList['公司'] = window.location.host
if (position === 'bottom') {
url =
window.location.protocol + '//' + this.domainNameList[this.currentDomainName] + link
} else {
url = window.location.protocol + '//' + this.domainNameList['公司'] + link
}
this.myWindow = window.open(url, link)
} else {
this.$message.warning('域名列表数据获取失败，请重新操作')
this.getDomainNameList()
}
}
this.activeMenu = {}
this.showMenuToggle = false
},
/** 跳转到非高级应用 */
goToPath(item, position) {
if (!item.link) {
return
}
if (item.linkAuthFlag === 0) {
return
}
// this.removeCookie()
if (!!item.cookie) {
var key = item.cookie.split(':')[0]
var value = item.cookie.split(':')[1]
Cookie.remove(key, { domain: getDomain() })
if(value && value != 'undefined') {
Cookie.set(key, value, { domain: getDomain() })
}
}
this.activeMenu = {}
this.showMenuToggle = false
this.loginCheckSnAndSetCookies(item, position)
},
/** 切换当前应用 */
changeVisitRecord(subitemName) {
const userName = getUserName()
this.$EventBus.$emit('changeVisitApp', subitemName)
return new Promise(async(resolve,reject)=>{
await visitRecord(userName, subitemName)
resolve()
})
},
newLoginCheckSnAndSetCookies() {
this.domainNameList['公司'] = window.location.host
const baseURL = `${window.location.protocol}//${this.domainNameList[this.currentDomainName]}${
process.env.VUE_APP_AVATAR_APII
}`
console.log(this.avatarUser,'this.avatarUserthis.avatarUser')
loginCheckSn(this.avatarUser, baseURL).then(res => {
console.log(res,'zzzzzzzzzzzzzzz')
if (res.statusCode == 0) {
// this.changeVisitRecord(subitemName)
Cookie.set('indexStyle', 'choose_new', { domain: getDomain() })
Cookie.set('havaDataCollaboration', 'true', { domain: getDomain() })
getUserNameFromToken().then(res => {
if (res.statusCode == 0) {
Cookie.set('avatarUserId', res.data.userId, { domain: getDomain() })
setUserName(res.data.userName)
Cookie.set('fullName', res.data.userFullName, { domain: getDomain() })
// Cookie.set('avatarToken', Cookie.get('authorization'), {
// domain: Cookie.get('cookieDomain')
// })
}
})
// judgeAdmin().then(res => {
// if (res.statusCode == 0) {
// Cookie.set('isAdmin', res.data, { domain: Cookie.get('cookieDomain') })
// }
// })
getdomains().then(res => {
if (res.statusCode == 0) {
Cookie.set('domainid', res.data[0].domainid, { domain: getDomain() })
// Cookie.set('domainname', res.data[0].domainname, {
// domain: Cookie.get('cookieDomain')
// })
localStorage.setItem('workspaceList', JSON.stringify(res.data)) // 本地存储
}
})
getPlatformInfo().then(res => {
if (res.statusCode == 0) {
Cookie.set('platform', res.data, { domain: getDomain() })
}
})
} else {
alert('登录失败')
}
})
},
/** 获取加密用户名 */
getUserNameEncrypt() {
const userName = getUserName()
userNameEncrypt(userName).then(res => {
if (res.code === 200) {
this.avatarUser = res.msg
this.newLoginCheckSnAndSetCookies()
} else {
this.$message.error('获取加密用户名失败')
}
})
},
/** 登录验证 */
loginCheckSnAndSetCookies(item, position) {
this.domainNameList['公司'] = window.location.host
let link = item.link
// 业务中台厂站侧时去掉标题栏
if(item.menuName === '业务中台' && this.currentDomainName !== '公司') {
link = item.cookie ? item.cookie : item.link;
}
const subitemName = item.subitemName
const baseURL = `${window.location.protocol}//${this.domainNameList[this.currentDomainName]}${
process.env.VUE_APP_AVATAR_APII
}`
// 跳转其它平台模块正常登出注释这里
// loginCheckSn(this.avatarUser, baseURL).then(res => {
// if (res.statusCode == 0) {
this.changeVisitRecord(subitemName)
Cookie.set('indexStyle', 'choose_new', { domain: getDomain() })
Cookie.set('havaDataCollaboration', 'true', { domain: getDomain() })
getUserNameFromToken().then(res => {
if (res.statusCode == 0) {
Cookie.set('avatarUserId', res.data.userId, { domain: getDomain() })
setUserName(res.data.userName)
Cookie.set('fullName', res.data.userFullName, { domain: getDomain() })
// Cookie.set('avatarToken', Cookie.get('authorization'), {
// domain: Cookie.get('cookieDomain')
// })
}
})
// judgeAdmin().then(res => {
// if (res.statusCode == 0) {
// Cookie.set('isAdmin', res.data, { domain: Cookie.get('cookieDomain') })
// }
// })
getdomains().then(res => {
if (res.statusCode == 0) {
Cookie.set('domainid', res.data[0].domainid, { domain: getDomain() })
// Cookie.set('domainname', res.data[0].domainname, {
// domain: Cookie.get('cookieDomain')
// })
localStorage.setItem('workspaceList', JSON.stringify(res.data)) // 本地存储
}
})
getPlatformInfo().then(res => {
if (res.statusCode == 0) {
Cookie.set('platform', res.data, { domain: getDomain() })
}
})
if (link.indexOf('http') != -1) {
window.open(link, '_blank')
} else {
const target = !!item.cookie ? '高级应用' : '_blank'
let url = ''
if (Object.keys(this.domainNameList).length > 0) {
this.domainNameList['公司'] = window.location.host
if (position === 'bottom') {
const onlyTab = (item.menuName === '业务中台' && this.currentDomainName !== '公司') ? '?onlyTab=true' : ''
url =
window.location.protocol +
'//' +
this.domainNameList[this.currentDomainName] +
link + onlyTab
} else {
url = window.location.protocol + '//' + this.domainNameList['公司'] + link
}
window.open(url, target)
} else {
this.$message.warning('域名获取错误，请重新操作')
this.getDomainNameList()
}
}
// } else {
// alert('登录失败')
// }
// })
},
/** 清除cookie */
removeCookie() {
Cookie.remove('authorization', { domain: getDomain() })
},
/** 各个模块提示英文全称 */
showItemRouterTooltip(item) {
if (!this.isChinese && item.enSubitemName !== item.abbrEnSubitemName) {
return item.enSubitemName
} else {
return ''
}
},
/**
* 各模块跳转按钮显示中文还是英文名
* @param {object} item 各模块信息
*/
showItemRouterChOrEn(item) {
return this.isChinese ? item.subitemName : item.abbrEnSubitemName
},
/**
* 第二屏模块类型中英文名称
* @param {string} name 模块中文名
*/
chineseOrEnglishName(name) {
if (name === '个人工作台') {
return this.isChinese ? name : 'Individual Workbench'
}
return this.isChinese ? name : this.menuItemList.find(item => item.title === name).subtitle
},
/** 获取公司电站域名列表 */
getDomainNameList() {
const queryParams = {
pageNum: 1,
pageSize: 10,
dictName: '门户跳转电站域名',
dictType: 'ymh_jump_ps_dns'
}
listData(queryParams).then(res => {
if (res.code === 200) {
res.rows.forEach(item => {
this.domainNameList[item.dictLabel] = item.dictValue
})
this.handleGetLinkList()
this.getUserNameEncrypt()
} else {
this.$message.error('获取公司电站域名列表失败')
}
})
},
/** 判断是否有模块权限 */
hasJurisdiction(item) {
if (this.currentDomainName === '公司') {
return false
}
const stationList = !item.adscriptionPowerStation
? []
: item.adscriptionPowerStation.split(',')
return !stationList.includes(this.currentDomainName)
},
/** 筛选高级应用的分类数据 */
filterSUbtypes(index, isStation = false) {
const applicationSubtypes = [
['状态监视', '智能预警'],
['状态评估', '检修决策','检修决策(新版)'],
['故障诊断', '运行决策'],
['经济运行', '辅助考核'],
]
if (this.currentDomainName === '葛洲坝电站' && isStation) {
applicationSubtypes[3] = ['经济运行', '经济运行（建新）', '辅助考核']
}
// const linksApplications = this.linksApplications.filter(item=> item.subitemName !== '检修决策(新版)')
const linksApplications = this.linksApplications
// console.log('linksApplications',linksApplications);
const list = linksApplications.filter(item =>
applicationSubtypes[index].includes(item.subitemName)
)
// 模拟数据
// let JSON_data1
// if(list.length > 0){
// JSON_data1 = JSON.parse(JSON.stringify(list[list.length - 1] ))
// JSON_data1.subitemName = '测试title1111111'
// JSON_data1.id = Math.random()
// list.push(JSON_data1)
// }
// let JSON_data2
// if(list.length > 0){
// JSON_data2 = JSON.parse(JSON.stringify(list[list.length - 1] ))
// JSON_data2.subitemName = '测试title2'
// JSON_data2.id = Math.random()
// list.push(JSON_data2)
// }
// console.log('list',list);
return list
}
}
}
</script>
<style lang="scss" scoped>
.home-index {
position: relative;
font-family: '微软雅黑', 'Microsoft YaHei', 'Segoe UI', -apple-system, BlinkMacSystemFont, Roboto,
'SF Pro SC', 'SF Pro Display', 'SF Pro Icons', 'PingFang SC', Oxygen-Sans, Ubuntu, Cantarell,
'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
.my-span-sty {
display: inline-block;
width: 100%;
}
.content-top {
position: relative;
height: 100vh;
margin-top: -122px;
overflow: hidden;
.btn-skip-animation {
position: absolute;
right: 20px;
bottom: 132px;
padding: 0 14px;
width: 110px;
height: 30px;
line-height: 30px;
background: url('~@/assets/images/home/skip_btn.png') no-repeat 80px center, #000;
border-radius: 5px;
font-size: 14px;
font-family: Alibaba PuHuiTi;
font-weight: 500;
color: #fff;
opacity: 0.5;
cursor: pointer;
&:hover {
opacity: 1;
}
}
.top-cont {
width: 100%;
height: 100%;
background: #7bc6ff;
overflow: hidden;
}
.top-menu {
position: absolute;
bottom: 0;
width: 100%;
height: 0;
transition: 1s all;
.menu-content {
position: relative;
background: linear-gradient(180deg, #2732ad, #13138a);
z-index: 1;
.fixed-box {
display: flex;
justify-content: space-around;
align-items: center;
margin: 0 80px;
height: 78px;
transition: 1s all;
.menu-item {
display: flex;
flex-direction: column;
justify-content: space-around;
padding-left: 52px;
height: 50px;
opacity: 0;
transition: 0.5s all;
cursor: pointer;
.menu-item-title {
position: relative;
font-size: 20px;
font-weight: bold;
color: #00f2fe;
}
.menu-item-subtitle {
position: relative;
font-size: 12px;
font-weight: 300;
color: #3f64cc;
}
&:nth-of-type(1) {
background: url('~@/assets/images/home/app_default.png') no-repeat left center;
}
&:nth-of-type(2) {
background: url('~@/assets/images/home/data_default.png') no-repeat left center;
}
&:nth-of-type(3) {
background: url('~@/assets/images/home/technology_default.png') no-repeat left center;
}
&:nth-of-type(4) {
background: url('~@/assets/images/home/business_default.png') no-repeat left center;
}
&:nth-of-type(5) {
background: url('~@/assets/images/home/cloud_default.png') no-repeat left center;
}
&:nth-of-type(6) {
background: url('~@/assets/images/home/resources_default.png') no-repeat left center;
}
&.active {
.menu-item-title,
.menu-item-subtitle {
color: #fff;
}
&:nth-of-type(1) {
background: url('~@/assets/images/home/app_active.png') no-repeat left center;
}
&:nth-of-type(2) {
background: url('~@/assets/images/home/data_active.png') no-repeat left center;
}
&:nth-of-type(3) {
background: url('~@/assets/images/home/technology_active.png') no-repeat left center;
}
&:nth-of-type(4) {
background: url('~@/assets/images/home/business_active.png') no-repeat left center;
}
&:nth-of-type(5) {
background: url('~@/assets/images/home/cloud_active.png') no-repeat left center;
}
&:nth-of-type(6) {
background: url('~@/assets/images/home/resources_active.png') no-repeat left center;
}
}
}
}
.fixed-line-top,
.fixed-line-middle {
position: absolute;
left: 1%;
width: 0;
height: 4px;
transition: 1.2s all;
}
}
.fixed-line-top {
top: 0;
background: linear-gradient(-90deg, rgba(32, 141, 225, 0), #7bc6ff, rgba(32, 141, 225, 0));
box-shadow: 0px -5px 16px 0px rgba(8, 11, 34, 0.8);
}
.fixed-line-middle {
top: 74px;
background: linear-gradient(
-90deg,
rgba(32, 141, 225, 0),
rgba(123, 198, 255, 0.6),
rgba(32, 141, 225, 0)
);
}
.fixed-bottom {
margin: 0 auto;
width: 98%;
height: 34px;
background: linear-gradient(-90deg, rgba(19, 25, 70, 0), #0c0f2c, rgba(19, 25, 70, 0));
}
.menu-toggle {
position: absolute;
bottom: 100px;
left: 7.5%;
width: 85%;
// height: 0;
border: none;
border-radius: 20px 20px 0 0;
overflow: hidden;
transition: 0.5s height;
display: none;
&.active {
display: block;
min-height: 200px;
border: 2px solid #daf5ff;
}
.toggle-title {
height: 50px;
line-height: 50px;
background: linear-gradient(0deg, #09bbfe 0%, #5fd3ff 100%);
color: #1c3e93;
.title-big {
margin-left: 38px;
font-size: 20px;
font-weight: bold;
}
.title-small {
margin-left: 17px;
font-size: 16px;
}
}
.toggle-content {
padding: 0 20px;
min-height: 150px;
background: linear-gradient(180deg, #099ffe 0%, #1d54d6 100%);
.app-menu {
display: flex;
// justify-content: space-around;
justify-content: flex-start;
// justify-content: center;
flex-wrap: wrap;
padding-bottom:20px ;
// background: linear-gradient(180deg, #099ffe 0%, #1d54d6 100%);
.app-menu-wrap {
width: 25% !important;
padding: 0 20px;
.menu-type {
padding: 0 20px;
margin-top: 21px;
margin-bottom: 11px;
width: 100%;
height: 37px;
line-height: 37px;
background: #1e52e0;
border-radius: 19px;
font-size: 20px;
font-family: Alibaba PuHuiTi;
font-weight: 500;
color: #ffffff;
text-align: center;
}
.menu-title-wrap {
display: flex;
// justify-content: space-between;
justify-content: center;
flex-wrap: wrap;
.menu-title{
// width: 33.33%;
box-sizing: border-box;
}
}
}
}
.other-menu {
display: flex;
align-items: center;
flex-wrap: wrap;
padding: 20px;
height: 80%;
.menu-title {
margin: 4px 20px;
min-width: 100px;
}
.menu-title-diff {
padding: 10px 20px 10px 33px;
background: #004892;
&::before {
top: 22px;
left: 20px;
}
}
}
.menu-title {
position: relative;
padding-left: 20px;
font-size: 20px;
font-family: Alibaba PuHuiTi;
font-weight: 500;
text-align: left;
color: #ffffff;
background: transparent;
border: none;
border-radius: 20px;
cursor: pointer;
&::before {
content: '';
position: absolute;
top: 50%;
left: 7px;
width: 6px;
height: 6px;
background-color: #fea71d;
transform: translateY(-50%);
}
&:hover {
color: #b9f1ff;
}
&:disabled {
color: #666;
cursor: no-drop;
&::before {
background-color: #666;
}
}
}
}
}
}
}
.content-bottom {
position: absolute;
top: -122px;
display: flex;
flex-direction: column;
justify-content: space-between;
// height: calc(100vh - 122px);
height: 100vh;
padding: 122px 60px 20px;
background: #FFF;
.wrap-sec {
display: flex;
// box-shadow: 4px 4px 13px 0px rgba(0, 0, 0, 0.6);
border-radius: 30px;
.sec-title {
display: flex;
text-align: center;
width: 60px;
padding: 0 24px;
// background-color: #2155ba; // 深色
// color: #b8d3ed; // 深色
// border: solid 2px #263d9a; // 深色
background-color: #d8f0fc; // 浅色
color: #fff; // 浅色
border: solid 2px #d8f0fc; // 浅色
align-items: center;
border-radius: 30px 0px 0px 30px;
font-size: 24px;
line-height: 28px;
word-break: break-all;
}
.sec-content {
padding: 18px 30px;
width: 100%;
// background-color: rgba($color: #000, $alpha: 0.5); // 深色
// border: solid 2px #263d9a; // 深色
background-color: #eaf7fd; // 浅色
border: solid 2px #eaf7fd; // 浅色
border-left: none;
border-radius: 0px 30px 30px 0px;
.item-title {
position: relative;
height: 40px;
padding-left: 40px;
border-radius: 10px 10px 0px 0px;
// background-image: linear-gradient(0deg, #003489 0%, #0055b4 100%),
// linear-gradient(#3f9dfd, #3f9dfd); // 深色
background-image: linear-gradient(0deg, #0c569d 0%, #72c4f3 100%),
linear-gradient(#3f9dfd, #3f9dfd); // 浅色
color: #fff;
font-size: 20px;
line-height: 40px;
&::before {
content: '';
position: absolute;
left: 20px;
top: 11px;
width: 10px;
height: 20px;
// background-color: #0d0f66; // 深色
background-color: #d8f0fc; // 浅色
border-radius: 6px;
}
}
.item-content {
display: flex;
justify-content: space-between;
padding: 20px;
// background-color: rgba($color: #000, $alpha: 0.5); // 深色
// box-shadow: 4px 4px 13px 0px rgba(0, 0, 0, 0.6); // 深色
// border: solid 2px #155392; // 深色
background-color: #eaf7fc; // 浅色
box-shadow: 4px 4px 13px 0px rgba(0, 0, 0, 0.2); // 浅色
border: solid 1px #8abcdc; // 浅色
border-top: none;
border-radius: 0px 0px 10px 10px;
}
.item-router {
display: block;
width: 100%;
height: 30px;
// background-image: linear-gradient(0deg, #005ebe 0%, #137dea 100%),
// linear-gradient(#0069d5, #0069d5); // 深色
// box-shadow: 4px 4px 5px 0px rgba(0, 0, 0, 0.41); // 深色
// border: solid 2px #1677dc; // 深色
// color: #b3fcff; // 深色
background-image: linear-gradient(0deg, #b6d4ee 0%, #fcfdff 100%),
linear-gradient(#0069d5, #0069d5); // 浅色
box-shadow: 4px 4px 5px 0px rgba(0, 0, 0, 0.2);; // 浅色
border: solid 1px #4a7b8c; // 浅色
color: #333; // 浅色
border-radius: 10px;
font-size: 18px;
cursor: pointer;
&:hover {
border-color: #0c9fbe;
}
}
button:disabled.item-router {
// background-image: linear-gradient(0deg, #013482 0%, #044bb8 100%),
// linear-gradient(#0069d5, #0069d5); // 深色
// border: solid 2px #004e9d; // 深色
// color: #1b68db; // 深色
background-image: linear-gradient(0deg, #b6d4ee 0%, #fcfdff 100%),
linear-gradient(#0069d5, #0069d5); // 浅色
border: solid 1px #4a7b8c; // 浅色
color: #999; // 浅色
cursor: no-drop;
}
}
}
.sec-one {
.item-content{
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.app-type {
// flex: 1;
width: 24.5%;
padding: 10px 10px 20px;
margin: 5px 0px;
// margin: 10px;
box-sizing: border-box;
// background-color: #090e5b; // 深色
// border: solid 1px #1a2189; // 深色
background-color: rgba($color: #bee1f5, $alpha: .6); // 浅色
border: solid 1px #eef3f7; // 浅色
border-radius: 10px;
&:nth-child(2n+1){
margin-right: 0px;
}
.type-title {
text-align: center;
font-size: 20px;
// color: #fff; // 深色
color: #333; // 浅色
}
.type-wrap {
display: flex;
margin-top: 10px;
// background-color: red;
flex-wrap: wrap;
justify-content: center;
// justify-content: flex-start;
// box-sizing: border-box;
}
.item-router {
width: 44%;
height: 40px;
font-size: 20px;
box-sizing: border-box;
margin: 10px;
&:not(:first-child) {
margin-left: 10px;
}
}
// &:first-child {
// margin-left: -10px;
// }
// &:last-child {
// margin-right: -10px;
// }
// &.is-diff:last-child {
// flex: 1.8;
// }
}
}
.sec-two {
margin: 1vh 0;
.sec-content {
display: flex;
justify-content: space-between;
}
.two-left-wrap {
flex: 4.65;
.item-content {
flex-wrap: wrap;
.item-router {
width: calc(50% - 5px);
margin-bottom: 13px;
&:nth-child(2n) {
margin-left: 10px;
}
&:last-child {
width: 100%;
margin-bottom: 0;
}
}
}
}
.two-center-wrap {
flex: 9.06;
display: flex;
flex-direction: column;
justify-content: space-between;
margin: 0 20px;
.center-top-wrap {
.item-content {
flex-wrap: wrap;
justify-content: flex-start;
.item-router {
width: calc(25% - 7.5px);
margin-bottom: 30px;
&:not(:nth-child(4n)) {
margin-right: 10px;
}
&:nth-last-child(1),
&:nth-last-child(2) {
margin-bottom: 0;
}
}
}
}
.center-bottom-wrap {
.item-router {
&:not(:nth-last-child(1)) {
margin-right: 10px;
}
}
}
}
.two-right-wrap {
flex: 2.65;
.item-content {
flex-wrap: wrap;
align-content: space-between;
height: calc(100% - 40px);
}
}
}
.sec-three {
.item-router + .item-router {
margin-left: 20px;
}
}
&.is-english {
.wrap-sec .item-router {
font-size: 14px;
}
}
}
.change-tab {
position: absolute;
top: 200px;
right: 20px;
display: flex;
flex-direction: column;
align-items: center;
opacity: 0;
.tab-line {
width: 2px;
height: 430px;
background-color: rgba(177, 177, 177, 0.25);
}
.tab-top {
position: relative;
width: 26px;
height: 50px;
cursor: pointer;
background: url('~@/assets/images/home/arrow_top.png') no-repeat center top;
&::after {
content: '';
position: absolute;
top: 296px;
left: 12px;
width: 2px;
height: 204px;
background-color: rgba(177, 177, 177, 1);
}
}
.tab-bottom {
position: relative;
width: 26px;
height: 50px;
cursor: pointer;
background: url('~@/assets/images/home/arrow_bottom.png') no-repeat center bottom;
&::before {
content: '';
position: absolute;
bottom: 296px;
left: 12px;
width: 2px;
height: 204px;
background-color: rgba(177, 177, 177, 1);
}
}
}
}
</style>
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。
马建仓 AI 助手