forked from JointCloud/JCC-RIP
资源管理 分页功能实现 多余代码去除
This commit is contained in:
parent
f3dbbc7266
commit
9c20e7a164
|
|
@ -2,54 +2,21 @@
|
|||
<div v-if="jcceTheme === 'jcceDark'">
|
||||
<Navbar />
|
||||
<div id="menuChoose">
|
||||
<a class="change-box-left" @click="selectMonitor('/cluster/clusterMapViews')">
|
||||
<a v-show="filteredDarkTab.length > 6" class="darkLeft" @click="changePage('left')">
|
||||
<svg-icon icon-class="zuojiantou" />
|
||||
</a>
|
||||
<div id="drag-container">
|
||||
<div id="spin-container">
|
||||
<div class="box" style="transform: rotateY(57deg) translateZ(-800px);">
|
||||
<a @click="selectMonitor('/cluster/clusterMapViews')">
|
||||
<div v-for="item in filteredDarkTab.slice((pageNum - 1) * pageSize, pageNum * pageSize)" :key="item.id" class="box" :style="{ 'transform': 'rotateY('+item.Y+'deg) translateZ(-800px)' }">
|
||||
<a @click="selectMonitor(item.path)">
|
||||
<div class="inner-box">
|
||||
<svg-icon icon-class="rongqiguanli" /> 容器管理
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div class="box" style="transform: rotateY(34deg) translateZ(-800px);">
|
||||
<a @click="selectMonitor('/virtual/overview')">
|
||||
<div class="inner-box">
|
||||
<svg-icon icon-class="xunijiguanlimokuai" /> 虚拟机管理
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div class="box" style="transform:rotateY(11deg) translateZ(-800px)">
|
||||
<a @click="selectMonitor('/functions/overview')">
|
||||
<div class="inner-box">
|
||||
<svg-icon icon-class="gongzuofuzai" /> 函数管理
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div class="box" style="transform: rotateY(-12deg) translateZ(-800px)">
|
||||
<a @click="selectMonitor('/blockChain/blockChainBrowser')">
|
||||
<div class="inner-box">
|
||||
<svg-icon icon-class="yunjijizhang" /> 云际记账
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div class="box" style="transform: rotateY(-35deg) translateZ(-800px)">
|
||||
<div class="inner-box">
|
||||
<svg-icon icon-class="xunijiguanli-juan" /> 存储管理
|
||||
</div>
|
||||
</div>
|
||||
<div class="box" style="transform: rotateY(-58deg) translateZ(-800px)">
|
||||
<a @click="selectMonitor('/monitorManagement/warnList')">
|
||||
<div class="inner-box">
|
||||
<svg-icon icon-class="yunweijiankongmokuai" /> 运维监控
|
||||
<svg-icon :icon-class="item.icon" /> {{ item.title }}
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<a class="change-box-right">
|
||||
<a v-show="filteredDarkTab.length > 6" class="darkRight" @click="changePage('right')">
|
||||
<svg-icon icon-class="youjiantou" />
|
||||
</a>
|
||||
</div>
|
||||
|
|
@ -57,32 +24,25 @@
|
|||
<div v-else class="monitor-select">
|
||||
<Navbar />
|
||||
<el-row>
|
||||
<a v-show="filteredLightTab.length > 6" class="lightLeft" @click="changePage('left')">
|
||||
<svg-icon icon-class="zuojiantou" />
|
||||
</a>
|
||||
<div class="div-block">
|
||||
<div v-for="item in filteredTab" :key="item.id">
|
||||
<div v-for="item in filteredLightTab.slice((pageNum - 1) * pageSize, pageNum * pageSize)" :key="item.id">
|
||||
<a class="monitorSelectDiv" @click.prevent="selectMonitor(item.path)">
|
||||
<div class="monitorSelectBtn">
|
||||
<svg-icon :style="{'margin-top': filteredTab.length <6 ? '33vh' : '40vh'}" :icon-class="item.icon" />
|
||||
<svg-icon :style="{'margin-top': filteredLightTab.length <6 ? '33vh' : '40vh'}" :icon-class="item.icon" />
|
||||
<div>
|
||||
<div class="selectTitle">{{ item.title }}</div>
|
||||
<span v-if="filteredTab.length < 6">{{ item.description }}</span>
|
||||
<span v-if="filteredLightTab.length < 6">{{ item.description }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <template v-for="item in filteredTab">
|
||||
<el-col :key="item.id" :span="24/filteredTab.length === 4.8 ? '4-8' : 24/filteredTab.length">
|
||||
<a class="monitorSelectDiv" @click.prevent="selectMonitor(item.path)">
|
||||
<div class="monitorSelectBtn">
|
||||
<svg-icon :icon-class="item.icon" />
|
||||
<div>
|
||||
<div class="selectTitle">{{ item.title }}</div>
|
||||
<span>{{ item.description }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</el-col>
|
||||
</template> -->
|
||||
<a v-show="filteredLightTab.length > 6" class="lightRight" @click="changePage('right')">
|
||||
<svg-icon icon-class="youjiantou" />
|
||||
</a>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -95,7 +55,60 @@ export default {
|
|||
components: { Navbar },
|
||||
data() {
|
||||
return {
|
||||
tabList: [
|
||||
pageSize: 6,
|
||||
pageNum: 1,
|
||||
tabDarkList: [
|
||||
{
|
||||
id: 'cluster',
|
||||
Y: 57,
|
||||
title: '容器管理',
|
||||
icon: 'rongqiguanli',
|
||||
path: '/cluster/clusterMapViews'
|
||||
},
|
||||
{
|
||||
id: 'virtual',
|
||||
Y: 34,
|
||||
title: '虚拟机管理',
|
||||
icon: 'xunijiguanlimokuai',
|
||||
path: '/virtual/overview'
|
||||
},
|
||||
{
|
||||
id: 'functions',
|
||||
Y: 11,
|
||||
title: '函数管理',
|
||||
icon: 'gongzuofuzai',
|
||||
path: '/functions/overview'
|
||||
},
|
||||
{
|
||||
id: 'blockChain',
|
||||
Y: -12,
|
||||
title: '云际记账',
|
||||
icon: 'yunjijizhang',
|
||||
path: '/blockChain/blockChainBrowser'
|
||||
},
|
||||
{
|
||||
id: 'disk',
|
||||
Y: -35,
|
||||
title: '存储管理',
|
||||
icon: 'xunijiguanli-juan',
|
||||
path: '/disk'
|
||||
},
|
||||
{
|
||||
id: 'monitorManagement',
|
||||
Y: -58,
|
||||
title: '运维监控',
|
||||
icon: 'yunweijiankongmokuai',
|
||||
path: '/monitorManagement/warnList'
|
||||
},
|
||||
{
|
||||
id: 'hpc',
|
||||
Y: 57,
|
||||
title: '超算中心',
|
||||
icon: 'fuwu',
|
||||
path: '/hpc/hpcOverview'
|
||||
}
|
||||
],
|
||||
tabLightList: [
|
||||
{
|
||||
id: 'cluster',
|
||||
title: '容器管理',
|
||||
|
|
@ -124,20 +137,20 @@ export default {
|
|||
description: '以广域异构分布式存储服务，提供用户快捷、安全的数据管理。',
|
||||
path: '/disk'
|
||||
},
|
||||
// {
|
||||
// id: 'functions',
|
||||
// title: '函数管理',
|
||||
// icon: 'fuwu',
|
||||
// description: '支持一个服务下对多个函数进行创建、编辑、运行，对函数运行全生命周期进行监控调度。',
|
||||
// path: '/functions/overview'
|
||||
// },
|
||||
// {
|
||||
// id: 'blockChain',
|
||||
// title: '云际记账',
|
||||
// icon: 'yunjijizhang',
|
||||
// description: '基于区块链分布记账机制，以去中心化的方式对云际交易数据进行留痕存证。',
|
||||
// path: '/blockChain/blockChainBrowser'
|
||||
// },
|
||||
{
|
||||
id: 'functions',
|
||||
title: '函数管理',
|
||||
icon: 'fuwu',
|
||||
description: '支持一个服务下对多个函数进行创建、编辑、运行，对函数运行全生命周期进行监控调度。',
|
||||
path: '/functions/overview'
|
||||
},
|
||||
{
|
||||
id: 'blockChain',
|
||||
title: '云际记账',
|
||||
icon: 'yunjijizhang',
|
||||
description: '基于区块链分布记账机制，以去中心化的方式对云际交易数据进行留痕存证。',
|
||||
path: '/blockChain/blockChainBrowser'
|
||||
},
|
||||
{
|
||||
id: 'hpc',
|
||||
title: '超算管理',
|
||||
|
|
@ -153,16 +166,30 @@ export default {
|
|||
'name',
|
||||
'menus'
|
||||
]),
|
||||
filteredTab() {
|
||||
return this.tabList.filter(e => this.menus.includes(e.id))
|
||||
},
|
||||
jcceTheme() {
|
||||
return localStorage.getItem('jcceTheme')
|
||||
},
|
||||
filteredDarkTab() {
|
||||
return this.tabDarkList.filter(e => this.menus.includes(e.id))
|
||||
},
|
||||
filteredLightTab() {
|
||||
return this.tabLightList.filter(e => this.menus.includes(e.id))
|
||||
}
|
||||
},
|
||||
created() {
|
||||
},
|
||||
methods: {
|
||||
changePage(type) {
|
||||
if (type === 'left') {
|
||||
this.pageNum = this.pageNum === 1 ? 1 : this.pageNum - 1
|
||||
} else {
|
||||
if (this.jcceTheme === 'jcceLight') {
|
||||
this.pageNum = this.pageNum < (this.filteredLightTab.length / this.pageSize) ? this.pageNum + 1 : this.pageNum
|
||||
} else {
|
||||
this.pageNum = this.pageNum < (this.filteredDarkTab.length / this.pageSize) ? this.pageNum + 1 : this.pageNum
|
||||
}
|
||||
}
|
||||
},
|
||||
getImg(src) {
|
||||
const srcName = src === 'disk' || src === 'jccSchedule' ? 'blockChain' : src
|
||||
return require('@/assets/img/' + srcName + '.png')
|
||||
|
|
@ -200,6 +227,20 @@ export default {
|
|||
}
|
||||
}
|
||||
|
||||
.lightLeft{
|
||||
font-size: 90px;
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
top: 45%;
|
||||
z-index: 10;
|
||||
}
|
||||
.lightRight{
|
||||
font-size: 90px;
|
||||
position: absolute;
|
||||
right: 0px;
|
||||
top: 45%;
|
||||
z-index: 10;
|
||||
}
|
||||
// display：flex 样式
|
||||
.div-block{
|
||||
display: flex;
|
||||
|
|
@ -248,122 +289,6 @@ export default {
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
// // el-col 样式
|
||||
// .el-col a{
|
||||
// display: block;
|
||||
// width: 100%;
|
||||
// font-size: 24px;
|
||||
// color: #333333;
|
||||
// height: 100vh;
|
||||
// position: relative;
|
||||
// text-align: center;
|
||||
// .svg-icon {
|
||||
// font-size: 100px;
|
||||
// margin: 30vh auto;
|
||||
// margin-bottom: 51px;
|
||||
// }
|
||||
// .selectTitle {
|
||||
// margin-bottom: 35px;
|
||||
// font-size: 30px;
|
||||
// }
|
||||
// span{
|
||||
// display: block;
|
||||
// padding: 0 100px;
|
||||
// font-size: 14px;
|
||||
// line-height: 24px;
|
||||
// }
|
||||
// }
|
||||
// .el-col :hover{
|
||||
// color: #ffffff;
|
||||
// background: #3182CE;
|
||||
// }
|
||||
// .el-col a::after{
|
||||
// content: '';
|
||||
// position: absolute;
|
||||
// width: 1px;
|
||||
// height: 100vh;
|
||||
// background: #CCD9E0;
|
||||
// top: 0;
|
||||
// right: 0;
|
||||
// }
|
||||
// .el-col:last-of-type a::after{
|
||||
// width: 0;
|
||||
// }
|
||||
|
||||
// .el-col-4 a{
|
||||
// .svg-icon{font-size: 120px; margin-top: 40vh;}
|
||||
// // .selectTitle{margin-top: 40px;}
|
||||
// span{display: none;}
|
||||
// }
|
||||
|
||||
// .el-col-24{
|
||||
// width: 30vw;
|
||||
// display: block;
|
||||
// margin: 0 auto;
|
||||
// float: none;
|
||||
// }
|
||||
// .el-col-12{
|
||||
// padding: 0 10vw;
|
||||
// }
|
||||
// .el-col-12 a::after{
|
||||
// right: -10vw;
|
||||
// }
|
||||
// .el-col-4-8 {
|
||||
// width: 20%;
|
||||
// }
|
||||
|
||||
//// 旧样式
|
||||
// .selectDiv{
|
||||
// width: 100%;
|
||||
// padding: 0 8% 0 15%;
|
||||
// position: absolute;
|
||||
// top: 50%;
|
||||
// margin-top: -300px;
|
||||
// .el-col a{
|
||||
// display: block;
|
||||
// padding: 8%;
|
||||
// font-size: 24px;
|
||||
// margin: 4%;
|
||||
// color: white;
|
||||
// height: 280px;
|
||||
// background: linear-gradient(29deg, #454B53, #454B53, #879AB2);
|
||||
// border-radius: 36px;
|
||||
// position: relative;
|
||||
// }
|
||||
// .el-col a:hover{
|
||||
// background: linear-gradient(29deg, #0677E0, #127CDF, #5896EA);
|
||||
// }
|
||||
// .el-col .disabledTab{
|
||||
// background: #999;
|
||||
// pointer-events: none;
|
||||
// }
|
||||
// .el-col .disabledTab:hover{
|
||||
// background: #999;
|
||||
// }
|
||||
// .monitorSelectDiv{
|
||||
// position: relative;
|
||||
// top: 50%;
|
||||
// margin-top: -60px;
|
||||
// .monitorSelectBtn{
|
||||
// display: flex;
|
||||
// align-items: center;
|
||||
// font-size: 14px;
|
||||
// >img{
|
||||
// height: 30%;
|
||||
// margin-right: 20px;
|
||||
// }
|
||||
// .selectTitle{
|
||||
// margin-bottom: 20px;
|
||||
// font-size: 26px;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// .logo{
|
||||
// width: 100%;
|
||||
// padding-top: 30%;
|
||||
// }
|
||||
// }
|
||||
}
|
||||
|
||||
#menuChoose{
|
||||
|
|
@ -375,13 +300,17 @@ export default {
|
|||
position: absolute;
|
||||
top: 50%;
|
||||
margin-top: -10%;
|
||||
.change-box-left{
|
||||
font-size: 120px;
|
||||
padding-top: 5%;
|
||||
.darkLeft{
|
||||
font-size: 90px;
|
||||
position: relative;
|
||||
margin: auto;
|
||||
color: #6ECAFC;
|
||||
}
|
||||
.change-box-right{
|
||||
font-size: 120px;
|
||||
padding-top: 5%;
|
||||
.darkRight{
|
||||
font-size: 90px;
|
||||
position: relative;
|
||||
margin: auto;
|
||||
color: #6ECAFC;
|
||||
}
|
||||
#drag-container {
|
||||
width: 1200px;
|
||||
|
|
|
|||
Loading…
Reference in New Issue