450 lines
11 KiB
Vue
Executable File
450 lines
11 KiB
Vue
Executable File
<script setup lang="ts">
|
|
import { RouterView } from 'vue-router'
|
|
import { useTitle } from '@vueuse/core'
|
|
import { getImg } from '@/assets/images'
|
|
import { NModal, NPopover } from 'naive-ui'
|
|
import { useUserStore } from '@/stores/modules/user'
|
|
import Searchs from '@/components/search.vue'
|
|
import { report, treeDbList } from '@/api/daikin/base'
|
|
useTitle('大金中国调达本部 HOMEPAGE')
|
|
const { push } = useRouter()
|
|
const store = useUserStore()
|
|
|
|
const { toggle } = inject<any>('fullscreen')
|
|
|
|
const activeMenuKey = ref('Home')
|
|
let idx = ref(0)
|
|
const Menus = ref([
|
|
// 首页 集团部门方针 年度活动日程表 其他链接…
|
|
{
|
|
key: 'Home',
|
|
name: '首页',
|
|
icon: getImg('home.png'),
|
|
icon1: getImg('home1.png'),
|
|
link: '',
|
|
path: '/Home',
|
|
other: 'Top Page'
|
|
},
|
|
{
|
|
key: 'Group',
|
|
name: '集团部门方针',
|
|
icon: getImg('company.png'),
|
|
icon1: getImg('company1.png'),
|
|
link: '',
|
|
path: '/Home/group'
|
|
// children: [
|
|
// { key: 'Group', name: '-集团方针' },
|
|
// { key: 'Company', name: '-公司方针' },
|
|
// { key: 'HeadQuarters', name: '-调达本部方针' }
|
|
// ]
|
|
},
|
|
// { key: 'company', name: '本部长通达', icon: getImg('icon-company.svg') },
|
|
{
|
|
key: 'User',
|
|
name: '年度活动日程表',
|
|
icon: getImg('book.png'),
|
|
icon1: getImg('book1.png'),
|
|
link: '',
|
|
path: '/Home/User'
|
|
// children: [
|
|
// { key: '', name: '调达Database' },
|
|
// ]
|
|
},
|
|
// { key: 'database', name: '调达Database', icon: getImg('shuju.png'),icon1: getImg('shuju1.png'),link:'https://procurement.daikin.net.cn/scripts/cbgrn/grn.exe/' },
|
|
{
|
|
key: 'DataBase',
|
|
name: '调达Database',
|
|
icon: getImg('shuju.png'),
|
|
icon1: getImg('shuju1.png'),
|
|
link: ''
|
|
},
|
|
{
|
|
key: 'link',
|
|
name: '其他链接',
|
|
icon: getImg('link.png'),
|
|
icon1: getImg('link1.png'),
|
|
link: '',
|
|
other: 'Other Links',
|
|
children: [
|
|
{
|
|
key: 'YCWZ',
|
|
name: '调达本部才望子',
|
|
link: 'http://172.31.119.37/scripts/cbgrn/grn.exe/portal/index'
|
|
},
|
|
{
|
|
key: 'GCDB',
|
|
name: 'GCDB全球比价系统',
|
|
link: 'http://10.219.11.13/gcdb/'
|
|
},
|
|
{
|
|
key: 'DJ',
|
|
name: '大金空调官方网站',
|
|
link: 'https://www.daikin-china.com.cn'
|
|
},
|
|
{ key: 'CODE', name: '大金空调中国相关' }
|
|
]
|
|
},
|
|
{
|
|
key: 'phone',
|
|
name: '紧急联络体制表',
|
|
icon: getImg('phone.png'),
|
|
icon1: getImg('phone1.png'),
|
|
link: '',
|
|
path: '/Home/phone'
|
|
// children: [
|
|
// { key: 'inv', name: '邀请' },
|
|
// { key: 'visit', name: '拜访' },
|
|
// ]
|
|
}
|
|
])
|
|
|
|
async function getDbTree() {
|
|
const { data = [] } = await treeDbList({})
|
|
Menus.value[3].children = data.map((item: any) => {
|
|
return {
|
|
key: 'DataBase',
|
|
name: item.name,
|
|
params: { id: item.id }
|
|
}
|
|
})
|
|
}
|
|
|
|
getDbTree()
|
|
let flag = false
|
|
function menuHandler(menu: any, index: number) {
|
|
activeMenuKey.value = menu.key
|
|
console.log(menu, index)
|
|
if (menu.key === 'DataBase' && idx.value === index) {
|
|
report({ moduleCode: 'App_Database' })
|
|
push({ name: menu.key })
|
|
return
|
|
}
|
|
idx.value = index
|
|
console.log(menu.key, 'key')
|
|
if (!menu.key) return
|
|
// if (menu.key === 'DataBase') {
|
|
// if (flag) {
|
|
// push({ name: menu.key })
|
|
// flag = false
|
|
// return
|
|
// }
|
|
// flag = true
|
|
// setTimeout(() => {
|
|
// flag = false
|
|
// }, 300)
|
|
// }
|
|
if (menu.children) return
|
|
if (menu.key === 'DataBase') {
|
|
report({ moduleCode: 'App_Database' })
|
|
}
|
|
push({ name: menu.key })
|
|
}
|
|
const shorm = ref(false)
|
|
|
|
const { path } = useRoute()
|
|
watchEffect(() => {
|
|
setTimeout(() => {
|
|
const index = Menus.value.findIndex((item: any) => item.path === path)
|
|
if (index > -1 && idx.value !== index) {
|
|
const menu = Menus.value[index]
|
|
menuHandler(menu, index)
|
|
}
|
|
}, 0)
|
|
})
|
|
function goChild(menu: any) {
|
|
activeItem = menu.key
|
|
if (menu.key === 'CODE') {
|
|
shorm.value = true
|
|
return
|
|
}
|
|
if (menu.link) {
|
|
} else {
|
|
push({ name: menu.key, query: menu.params || {} })
|
|
}
|
|
}
|
|
var activeItem = 0
|
|
</script>
|
|
|
|
<template>
|
|
<div class="page w-1920px h-1080px p30px flex">
|
|
<div class="w300px -mr-1px flex flex-col shrink-0 overflow-auto">
|
|
<!-- @dblclick="toggle" -->
|
|
<img src="@/assets/images/logo.png" class="w197px h44px mt14px" />
|
|
<div class="text-20px text-#fff font-600 mt6px">
|
|
大金中国调达本部 HOMEPAGE
|
|
</div>
|
|
|
|
<div
|
|
class="mt34px w270px min-h80px rd-35px b-4px bg-#fff/16 b-4px b-solid b-#fff/23 overflow-hidden relative"
|
|
>
|
|
<Searchs></Searchs>
|
|
</div>
|
|
<div class="pt10px pb10px flex-1 max-h-636px">
|
|
<div
|
|
class="nav pl36px pr16px py24px m10px mr0 rd-32px rd-r-0 flex flex-col text-#fff cursor-pointer hover:underline"
|
|
v-for="(m, index) in Menus"
|
|
:key="m.key"
|
|
:class="
|
|
activeMenuKey === m.key ? (m.children ? 'actives' : 'active') : ''
|
|
"
|
|
@click="() => menuHandler(m, index)"
|
|
>
|
|
<div :class="activeMenuKey === m.key && 'onActive'">
|
|
<img
|
|
v-if="activeMenuKey === m.key"
|
|
:src="m.icon1"
|
|
class="w22px h22px mr16px mt--5px"
|
|
/>
|
|
<img v-else :src="m.icon" class="w22px h22px mr16px mt--5px" />
|
|
<span
|
|
class="text-22px font-900 leading-22px"
|
|
:class="
|
|
(m.key === 'link' || m.key === 'DataBase') &&
|
|
'underline border-b-0px border-b-solid'
|
|
"
|
|
>
|
|
<a v-if="m.link" class="no-underline text-#fff" :href="m.link">
|
|
{{ m.name }}</a
|
|
>
|
|
<span v-else>
|
|
<a
|
|
v-if="m.key === 'link' || m.key === 'DataBase'"
|
|
class="text-#fff"
|
|
>
|
|
{{ m.name }}</a
|
|
>
|
|
<span v-else>{{ m.name }}</span>
|
|
</span>
|
|
<span class="text-18px italic font-500" v-if="m.other">{{
|
|
m.other
|
|
}}</span>
|
|
</span>
|
|
</div>
|
|
|
|
<div v-if="m.children && idx == index" class="pl40px">
|
|
<div
|
|
class="my16px pl30px text-#fff activeChildren text-20px"
|
|
v-for="(item, ind) in m.children"
|
|
:key="item.key"
|
|
@click.stop="goChild(item)"
|
|
@click="activeItem = ind"
|
|
>
|
|
<a
|
|
v-if="item.link"
|
|
class="no-underline !text-#fff flex"
|
|
:href="item.link"
|
|
><span
|
|
class="w7px h7px rd-7px bg-#fff block mr-8px mt4px"
|
|
></span
|
|
>{{ item.name }}</a
|
|
>
|
|
<span v-else class="flex"
|
|
><span
|
|
class="w7px h7px rd-7px bg-#fff block mr-8px mt4px"
|
|
></span
|
|
>{{ item.name }}</span
|
|
>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="w270px py14px my20px px24px flex rd-20px bg-#003cb7 hover:underline hover:cursor-pointer"
|
|
style="box-shadow: 0 2rpx 14rpx 0 #00000069"
|
|
>
|
|
<div
|
|
class="flex items-center text-18px"
|
|
@click="push({ name: 'DataBase', query: { id: 267 } })"
|
|
>
|
|
<img
|
|
src="@/assets/images/dianhhh@2x.png"
|
|
class="w22px h22px mr10px"
|
|
/>
|
|
公司内线
|
|
</div>
|
|
</div>
|
|
<n-popover
|
|
v-if="false"
|
|
trigger="hover"
|
|
placement="top"
|
|
:style="{ '--n-border-radius': '8px' }"
|
|
>
|
|
<template #trigger> </template>
|
|
<div
|
|
class="text-14px text-#285FE9 flex items-center hover:underline cursor-pointer"
|
|
>
|
|
<img
|
|
src="@/assets/images/wjqq@2x.png"
|
|
class="w14px h18px mr4px object-contain"
|
|
/>
|
|
<span>{{ '公司内线公司内线公司内线' }}</span>
|
|
</div>
|
|
</n-popover>
|
|
<div
|
|
class="p20px w270px rd-20px b-4px bg-#fff/4 b-4px b-solid b-#fff/23 text-14px relative"
|
|
>
|
|
<a
|
|
href="http://172.31.119.37/scripts/cbgrn/grn.exe/portal/index"
|
|
target="_blank"
|
|
class="no-underline text-#fff"
|
|
>
|
|
<div class="flex items-center text-18px hover:underline">
|
|
<img
|
|
src="@/assets/images/icon-book.svg"
|
|
class="w22px h22px mr10px"
|
|
/>
|
|
个人日程
|
|
</div>
|
|
<!-- <div class="mt18px">9:00-10:00</div>
|
|
<div class="mt8px">召集部门成员召开项目启动会</div>
|
|
<div class="mt16px">10:01-11:00</div>
|
|
<div class="mt8px">召集部门成员召开项目启动会</div> -->
|
|
<img
|
|
src="@/assets/images/zhulj@2x.png"
|
|
class="absolute w22px h22px mr10px top--15px right--20px"
|
|
/>
|
|
</a>
|
|
<div
|
|
class="mt10px ml-30px opacity-70"
|
|
@click="(e) => e.stopPropagation()"
|
|
>
|
|
请点击上方链接登录cybouzu
|
|
</div>
|
|
</div>
|
|
|
|
<!-- <div class="p20px w270px rd-20px b-4px bg-#fff/16 b-4px b-solid b-#fff/23 text-14px mt22px">
|
|
<div class="flex items-center text-18px">
|
|
<img src="@/assets/images/icon-memo.svg" class="w22px h22px mr10px" />
|
|
memo
|
|
</div>
|
|
<div class="mt18px lh-24px">新年方针:领先时代的变化开创崭新的 未来</div>
|
|
</div> -->
|
|
</div>
|
|
|
|
<div class="main flex-1 rd-32px p30px pb15px pt0px mt62px relative">
|
|
<!-- <Home /> -->
|
|
<RouterView />
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="fixed bottom-4px text-#fff text-12px ml38px"
|
|
style="margin: 0; width: 100%; text-align: center"
|
|
>
|
|
今日访问人数：{{
|
|
store.user.appLoginToDayCount
|
|
}} 累计访问人数：{{ store.user.appLoginCount }}
|
|
</div>
|
|
<NModal v-model:show="shorm" :mask-closable="false">
|
|
<div class="w700px h430px bg-#fff rd-15px">
|
|
<div
|
|
class="py5px px15px"
|
|
style="
|
|
border-bottom: 1px solid #dadada;
|
|
font-weight: bold;
|
|
color: #494a63;
|
|
"
|
|
>
|
|
大金空调中国相关
|
|
<img
|
|
@click="shorm = false"
|
|
src="@/assets/images/chac@2x.png"
|
|
class="w15px float-right mt5px mr5px"
|
|
/>
|
|
</div>
|
|
<div class="flex mt70px text-center">
|
|
<div class="w-full text-center">
|
|
<img src="@/assets/images/ewm1@2x.png" class="w200px" />
|
|
<div
|
|
class="py10px bg-#377CFF text-#fff w200px rd-20px mt35px mx-auto"
|
|
>
|
|
大金空调中国视频号
|
|
</div>
|
|
</div>
|
|
<div class="w-full">
|
|
<img src="@/assets/images/ewm2@2x.png" class="w200px" />
|
|
<div
|
|
class="py10px bg-#377CFF text-#fff w200px rd-20px mt35px mx-auto"
|
|
>
|
|
大金空调抖音号
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</NModal>
|
|
</template>
|
|
|
|
<style scoped lang="less">
|
|
.page {
|
|
font-family: 'PingFang SC';
|
|
user-select: none;
|
|
|
|
// background-image: url('@/assets/images/bg.jpg');
|
|
// background-color: #000;
|
|
background-position: 0 0;
|
|
background-repeat: no-repeat;
|
|
background-size: cover;
|
|
color: #fff;
|
|
|
|
line-height: 1;
|
|
}
|
|
|
|
.nav {
|
|
position: relative;
|
|
|
|
&::before {
|
|
top: -48px;
|
|
}
|
|
.activeChildren:hover {
|
|
a,
|
|
span {
|
|
text-decoration: underline;
|
|
}
|
|
}
|
|
&::after {
|
|
bottom: -49px;
|
|
transform: rotate(-90deg);
|
|
}
|
|
|
|
&.active {
|
|
color: #002fa7;
|
|
background-color: #fff;
|
|
a {
|
|
color: #002fa7;
|
|
}
|
|
&::before,
|
|
&::after {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
&.actives {
|
|
padding: 0px !important;
|
|
color: #002fa7;
|
|
background-color: rgba(255, 255, 255, 0.3);
|
|
a {
|
|
color: #002fa7;
|
|
}
|
|
&::before,
|
|
&::after {
|
|
opacity: 1;
|
|
}
|
|
.onActive {
|
|
background-color: #fff;
|
|
border-radius: 32px 0 0 32px;
|
|
|
|
padding: 24px 16px 24px 36px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.main {
|
|
background-image: url('@/assets/images/bg-rs-main.svg');
|
|
background-position: 0 0;
|
|
background-repeat: repeat-x;
|
|
background-size: auto;
|
|
}
|
|
&::-webkit-scrollbar {
|
|
display: none;
|
|
scrollbar-width: none;
|
|
}
|
|
</style>
|