refactor: sidebar重构
将页面布局重新设置,由各个组件单独控制,国际化参数优化
This commit is contained in:
wanghaoyu
@@ -10,22 +10,10 @@ export default {
|
|||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style>
|
<style scoped>
|
||||||
body,html{
|
#app{
|
||||||
/* font-family: "AlibabaPuHuiTiR"; */
|
height: 100%;
|
||||||
}
|
width: 100%;
|
||||||
.ly-table1 table{
|
overflow: hidden;
|
||||||
/* table-layout: unset; */
|
|
||||||
}
|
|
||||||
::-webkit-scrollbar{
|
|
||||||
width: 10px;
|
|
||||||
height: 10px;
|
|
||||||
}
|
|
||||||
::-webkit-scrollbar-thumb{
|
|
||||||
border-radius: 1em;
|
|
||||||
background-color: rgba(50,50,50,.3);
|
|
||||||
}
|
|
||||||
::-webkit-scrollbar-track{
|
|
||||||
border-radius: 1em;
|
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -4,19 +4,10 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
body {
|
body {
|
||||||
font-family: NotoSansSC-Light;
|
|
||||||
min-width: 1350px;
|
|
||||||
background: #F2F7F8;
|
|
||||||
overflow-x: hidden !important;
|
|
||||||
height: 100%;
|
height: 100%;
|
||||||
box-sizing: border-box;
|
|
||||||
}
|
}
|
||||||
html {
|
html {
|
||||||
overflow: auto;
|
|
||||||
overflow-y: hidden;
|
|
||||||
overflow-x: hidden !important;
|
|
||||||
height: 100%;
|
height: 100%;
|
||||||
box-sizing: border-box;
|
|
||||||
}
|
}
|
||||||
/*侧滑文字*/
|
/*侧滑文字*/
|
||||||
.el-form-item .el-form-item__label{
|
.el-form-item .el-form-item__label{
|
||||||
|
|||||||
@@ -119,6 +119,9 @@ export default {
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
|
.el-menu.el-menu--horizontal{
|
||||||
|
border-bottom:0px
|
||||||
|
}
|
||||||
.el-submenu__title .el-submenu__icon-arrow {
|
.el-submenu__title .el-submenu__icon-arrow {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,8 +1,7 @@
|
|||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<Header></Header>
|
<Header ref="header"></Header>
|
||||||
<sideBar></sideBar>
|
<div class="content-box" >
|
||||||
<div class="content-box">
|
|
||||||
<router-view/>
|
<router-view/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -14,28 +13,11 @@ import Header from "./header";
|
|||||||
import sideBar from "./sideBar";
|
import sideBar from "./sideBar";
|
||||||
export default {
|
export default {
|
||||||
name: "home",
|
name: "home",
|
||||||
components: {Header,sideBar}
|
components: {Header}
|
||||||
}
|
}
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
|
|
||||||
|
|
||||||
.content-box {
|
|
||||||
position: absolute;
|
|
||||||
left: 370px;
|
|
||||||
right: 30px;
|
|
||||||
top: 60px;
|
|
||||||
bottom: 0;
|
|
||||||
-webkit-transition: left .3s ease-in-out;
|
|
||||||
transition: left .3s ease-in-out;
|
|
||||||
background: #ffffff;
|
|
||||||
height: calc(100% - 50px);
|
|
||||||
box-sizing: border-box;
|
|
||||||
transform: translateY(0);
|
|
||||||
padding: 20px
|
|
||||||
}
|
|
||||||
@media screen and (max-width: 1600px) {
|
@media screen and (max-width: 1600px) {
|
||||||
.content-box {
|
.content-box {
|
||||||
background: #a0eea6;
|
background: #a0eea6;
|
||||||
@@ -46,5 +28,4 @@ export default {
|
|||||||
background: #b94b7e;
|
background: #b94b7e;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -17,11 +17,11 @@ const cn = {
|
|||||||
tableTitle: {
|
tableTitle: {
|
||||||
id: 'ID',
|
id: 'ID',
|
||||||
assetType: '资产类型',
|
assetType: '资产类型',
|
||||||
Device: 'Device SN',
|
device: 'Device SN',
|
||||||
IP: 'IP',
|
ip: 'IP',
|
||||||
assetState: '资产状态',
|
assetState: '资产状态',
|
||||||
Module: 'Module',
|
module: 'Module',
|
||||||
Alarm: 'Alarm',
|
alarm: 'Alarm',
|
||||||
dataCenter: '数据中心',
|
dataCenter: '数据中心',
|
||||||
cabinet: '机柜',
|
cabinet: '机柜',
|
||||||
model: '型号',
|
model: '型号',
|
||||||
|
|||||||
@@ -17,11 +17,11 @@ const en = {
|
|||||||
tableTitle: {
|
tableTitle: {
|
||||||
id: 'ID',
|
id: 'ID',
|
||||||
assetType: 'assetType',
|
assetType: 'assetType',
|
||||||
Device: 'Device SN',
|
device: 'Device SN',
|
||||||
IP: 'IP',
|
ip: 'IP',
|
||||||
assetState: 'assetState',
|
assetState: 'assetState',
|
||||||
Module: 'Module',
|
module: 'Module',
|
||||||
Alarm: 'Alarm',
|
alarm: 'Alarm',
|
||||||
dataCenter: 'dataCenter',
|
dataCenter: 'dataCenter',
|
||||||
cabinet: 'cabinet',
|
cabinet: 'cabinet',
|
||||||
model: 'model',
|
model: 'model',
|
||||||
|
|||||||
@@ -1,137 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="sidebar">
|
|
||||||
<div class="sidebar-title">
|
|
||||||
<div>Project</div>
|
|
||||||
<div class="sidebar-info">
|
|
||||||
<div class="sidebar-info-header">ALL</div>
|
|
||||||
<div class="sidebar-info-footer" v-if="sidebarState">
|
|
||||||
<el-checkbox-group v-model="checkList" size="small">
|
|
||||||
<el-checkbox v-for="(item,key) in checkListData" :key="key" border :label=item.id>{{item.name}}
|
|
||||||
<div class="checkbox-edit" @click.prevent="edit(item.id)">编辑</div>
|
|
||||||
</el-checkbox>
|
|
||||||
</el-checkbox-group>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
name: "SiderBar",
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
checkList: [0],
|
|
||||||
checkListData: [],
|
|
||||||
sidebarState:'',
|
|
||||||
pageObj: {
|
|
||||||
pageNo: 1,
|
|
||||||
pageSize: 20,
|
|
||||||
total: 0
|
|
||||||
},
|
|
||||||
}
|
|
||||||
},
|
|
||||||
computed:{
|
|
||||||
getData(){
|
|
||||||
return this.$store.state.assetData
|
|
||||||
}
|
|
||||||
},
|
|
||||||
watch:{
|
|
||||||
getData:{
|
|
||||||
handler(newVal,oldVal){
|
|
||||||
this.checkList.splice(1,1,newVal.selectedData)
|
|
||||||
if(newVal.moduleData=='asset'){
|
|
||||||
this.sidebarState=true
|
|
||||||
}else{
|
|
||||||
this.sidebarState=false
|
|
||||||
this.getAssetData()
|
|
||||||
this.checkListData=[0]
|
|
||||||
}
|
|
||||||
},
|
|
||||||
deep: true,
|
|
||||||
},
|
|
||||||
|
|
||||||
},
|
|
||||||
|
|
||||||
methods: {
|
|
||||||
edit(data) {
|
|
||||||
console.log(data)
|
|
||||||
},
|
|
||||||
getAssetData() {
|
|
||||||
this.$get('idc', this.pageObj).then(response => {
|
|
||||||
if (response.code == 200) {
|
|
||||||
this.checkListData = response.data.list
|
|
||||||
}
|
|
||||||
})
|
|
||||||
}
|
|
||||||
},
|
|
||||||
mounted() {
|
|
||||||
this.getAssetData()
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
.el-checkbox.is-bordered + .el-checkbox.is-bordered {
|
|
||||||
margin-left: 0px;
|
|
||||||
margin-top: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.el-checkbox-group {
|
|
||||||
padding-top: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.el-checkbox {
|
|
||||||
width: 270px;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
.sidebar {
|
|
||||||
display: block;
|
|
||||||
position: absolute;
|
|
||||||
width: 370px;
|
|
||||||
left: 0;
|
|
||||||
top: 60px;
|
|
||||||
bottom: 0;
|
|
||||||
box-shadow: 0 10px 16px #ccc;
|
|
||||||
overflow-y: scroll;
|
|
||||||
background: rgba(242, 242, 242, 0.94);
|
|
||||||
}
|
|
||||||
|
|
||||||
.sidebar-title {
|
|
||||||
padding-left: 30px;
|
|
||||||
padding-top: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sidebar-info {
|
|
||||||
margin-top: 20px;
|
|
||||||
border: 1px solid #acacac;
|
|
||||||
border-radius: 8px;
|
|
||||||
height: calc(90vh - 55px);
|
|
||||||
width: calc(100% - 30px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.sidebar-info-header {
|
|
||||||
background: #acacac;
|
|
||||||
text-align: center;
|
|
||||||
line-height: 50px;
|
|
||||||
border-top-left-radius: 8px;
|
|
||||||
border-top-right-radius: 8px;
|
|
||||||
height: 60px;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sidebar-info-footer {
|
|
||||||
padding-top: 15px;
|
|
||||||
padding-left: 15px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.checkbox-edit {
|
|
||||||
position: absolute;
|
|
||||||
top: 8px;
|
|
||||||
left: 230px;
|
|
||||||
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@@ -1,236 +1,246 @@
|
|||||||
<template>
|
<template>
|
||||||
<div style="height:95%;overflow-y:auto">
|
<div class="asset">
|
||||||
<div>
|
<div class="content-left">
|
||||||
<el-input
|
<div class="sidebar-title">
|
||||||
style="width: 90px;"
|
<div>Project</div>
|
||||||
placeholder="请输入内容"
|
<div class="sidebar-info">
|
||||||
v-model="input"
|
<div class="sidebar-info-header">ALL</div>
|
||||||
clearable>
|
<div class="sidebar-info-footer" v-if="sidebarState">
|
||||||
</el-input>
|
<el-checkbox-group v-model="checkList" size="small">
|
||||||
</div>
|
<el-checkbox v-for="(item,key) in checkListData" :key="key" border :label=item.id>{{item.name}}
|
||||||
<div>
|
<div class="checkbox-edit" @click.prevent="edit(item.id)">编辑</div>
|
||||||
<el-table
|
</el-checkbox>
|
||||||
:data="this.tableData"
|
</el-checkbox-group>
|
||||||
>
|
</div>
|
||||||
<el-table-column
|
|
||||||
v-for="(item, index) in tableTitle"
|
|
||||||
v-if="item.show"
|
|
||||||
min-width="120"
|
|
||||||
:key="`col_${index}`"
|
|
||||||
:label="item.label"
|
|
||||||
>
|
|
||||||
{{item}}
|
|
||||||
<template slot-scope="scope" :column="item">
|
|
||||||
<div v-if="item.prop=='ID'">
|
|
||||||
<p>
|
|
||||||
<span>{{scope.row['id']}}</span>
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<div v-if="item.prop=='IP'">
|
|
||||||
<p>
|
|
||||||
<span>{{scope.row['host']}}</span>
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
<el-table-column
|
|
||||||
fixed="right"
|
|
||||||
label="操作"
|
|
||||||
width="100">
|
|
||||||
<template slot-scope="scope">
|
|
||||||
<el-button type="text" size="small" @click.stop="tagShow('showAdd')">查看</el-button>
|
|
||||||
<el-button type="text" size="small" @click.stop="tagShow('showEdit')">编辑</el-button>
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
</el-table>
|
|
||||||
</div>
|
|
||||||
<Pagination :pageObj="pageObj" @pageNo='pageNo' @pageSize='pageSize' ref="Pagination"></Pagination>
|
|
||||||
<transition name="el-zoom-in-center" @click.stop>
|
|
||||||
<div class="right-menu" v-if="tabShow" v-clickoutside:tagHide="tagShow">
|
|
||||||
<div v-if="this.tagType=='add'">
|
|
||||||
<el-form ref="form" :model="form" label-width="120px">
|
|
||||||
<div class="right-box__top-btns">
|
|
||||||
<div class="right-box__top-btn right-box__top-btn_full">
|
|
||||||
<div class="right-box__btn-icon">
|
|
||||||
<i class="el-icon-close"></i>
|
|
||||||
</div>
|
|
||||||
<span>Esc</span>
|
|
||||||
</div>
|
|
||||||
<div class="right-box__top-btn right-box__top-btn_full">
|
|
||||||
<div class="right-box__btn-icon">
|
|
||||||
<i class="el-icon-edit-outline"></i>
|
|
||||||
</div>
|
|
||||||
<span>Save</span>
|
|
||||||
</div>
|
|
||||||
<div class="right-box__top-btn">
|
|
||||||
<div class="right-box__btn-icon">
|
|
||||||
<i class="el-icon-delete"></i>
|
|
||||||
</div>
|
|
||||||
<span>Delete</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="el-form-style">
|
|
||||||
<el-form-item label="IP">
|
|
||||||
<el-input v-model="form.name"/>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="SN">
|
|
||||||
<el-input v-model="form.name"/>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="Asset Type">
|
|
||||||
<el-input v-model="form.name"/>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="ModelId">
|
|
||||||
<el-input v-model="form.name"/>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="IDC">
|
|
||||||
<el-input v-model="form.name"/>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="Cabinet">
|
|
||||||
<el-input v-model="form.name"/>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="Host">
|
|
||||||
<el-input v-model="form.name"/>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="State">
|
|
||||||
<el-input v-model="form.name"/>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item>
|
|
||||||
<el-button>取消</el-button>
|
|
||||||
</el-form-item>
|
|
||||||
</div>
|
|
||||||
</el-form>
|
|
||||||
</div>
|
|
||||||
<div v-if="this.tagType=='edit'">
|
|
||||||
<el-form ref="form" :model="form" label-width="120px" size="small">
|
|
||||||
<div class="right-box__top-btns">
|
|
||||||
<div class="right-box__top-btn right-box__top-btn_full">
|
|
||||||
<div class="right-box__btn-icon">
|
|
||||||
<i class="el-icon-close"></i>
|
|
||||||
</div>
|
|
||||||
<span>Esc</span>
|
|
||||||
</div>
|
|
||||||
<div class="right-box__top-btn right-box__top-btn_full">
|
|
||||||
<div class="right-box__btn-icon">
|
|
||||||
<i class="el-icon-edit-outline"></i>
|
|
||||||
</div>
|
|
||||||
<span>Save</span>
|
|
||||||
</div>
|
|
||||||
<div class="right-box__top-btn">
|
|
||||||
<div class="right-box__btn-icon">
|
|
||||||
<i class="el-icon-delete"></i>
|
|
||||||
</div>
|
|
||||||
<span>Delete</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="el-form-style">
|
|
||||||
<el-form-item label="IP">
|
|
||||||
<span>192.168.100.255</span>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="SN">
|
|
||||||
<span>AAQWEROIUOWENKOIZLNWEROFPIAN</span>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="Asset Type">
|
|
||||||
<span>服务器</span>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="ModelId">
|
|
||||||
<span>No1</span>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="IDC">
|
|
||||||
<span>国内地区/北京市/1号</span>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="Cabinet">
|
|
||||||
<span>13排223机柜</span>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="Host">
|
|
||||||
<span>192.158.22.22</span>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="State">
|
|
||||||
<span>在库</span>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="Alarm">
|
|
||||||
<div>111</div>
|
|
||||||
</el-form-item>
|
|
||||||
</div>
|
|
||||||
<div style="padding-top: 10px">
|
|
||||||
<span>endPoint:</span>
|
|
||||||
</div>
|
|
||||||
<div class="tag-table">
|
|
||||||
<el-table
|
|
||||||
:data="tagTableData"
|
|
||||||
:row-style="{height:'20px'}"
|
|
||||||
:cell-style="{padding:'2px'}"
|
|
||||||
>
|
|
||||||
<el-table-column
|
|
||||||
v-for="(item, index) in tagTableTitle"
|
|
||||||
v-if="item.show"
|
|
||||||
:key="`col_${index}`"
|
|
||||||
:label="item.label"
|
|
||||||
|
|
||||||
>
|
|
||||||
<template slot-scope="scope" :column="item">
|
|
||||||
<div v-if="item.prop=='projectName'">
|
|
||||||
<p>
|
|
||||||
<span>{{scope.row['projectName']}}</span>
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<div v-if="item.prop=='moduleName'">
|
|
||||||
<p>
|
|
||||||
<span>{{scope.row['moduleName']}}</span>
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<div v-if="item.prop=='endPoint'">
|
|
||||||
<div class="tableSquare">342</div>
|
|
||||||
</div>
|
|
||||||
<div v-if="item.prop=='alarm'">
|
|
||||||
<div class="tableSquare">{{11}}/{{111}}</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
<el-table-column
|
|
||||||
fixed="right"
|
|
||||||
label=""
|
|
||||||
width="100">
|
|
||||||
<template slot-scope="scope">
|
|
||||||
<el-button type="text" size="small" @click.stop="tagShow('showAdd')">查看
|
|
||||||
</el-button>
|
|
||||||
<el-button type="text" size="small" @click.stop="tagShow('showEdit')">编辑
|
|
||||||
</el-button>
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
</el-table>
|
|
||||||
<!-- <Pagination :pageobj="pageObj" ref="Pagination"></Pagination>-->
|
|
||||||
<el-divider></el-divider>
|
|
||||||
<span>默认CLI账户</span>
|
|
||||||
<div style="padding-top: 10px">
|
|
||||||
<el-select v-model="form.region" placeholder="请选择活动区域" style="width: 90%">
|
|
||||||
<el-option label="区域一" value="shanghai">111111111111111111111</el-option>
|
|
||||||
<el-option label="区域二" value="beijing">111111111111111111111</el-option>
|
|
||||||
<el-option label="区域二" value="beijing">111111111111111111111</el-option>
|
|
||||||
<el-option label="区域二" value="beijing">111111111111111111111</el-option>
|
|
||||||
</el-select>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="el-form-style">
|
|
||||||
<el-form-item label="IP">
|
|
||||||
<span>192.168.100.255</span>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="SN">
|
|
||||||
<span>AAQWEROIUOWENKOIZLNWEROFPIAN</span>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="Asset Type">
|
|
||||||
<span>服务器</span>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="ModelId">
|
|
||||||
<span>No1</span>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="IDC">
|
|
||||||
<span>国内地区/北京市/1号</span>
|
|
||||||
</el-form-item>
|
|
||||||
</div>
|
|
||||||
</el-form>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</transition>
|
</div>
|
||||||
|
<div class="content-right">
|
||||||
|
<div>
|
||||||
|
<el-table
|
||||||
|
:height="tableHeight"
|
||||||
|
:data="this.tableData"
|
||||||
|
>
|
||||||
|
<el-table-column
|
||||||
|
v-for="(item, index) in tableTitle"
|
||||||
|
v-if="item.show"
|
||||||
|
min-width="120"
|
||||||
|
:key="`col_${index}`"
|
||||||
|
:label="item.label"
|
||||||
|
>
|
||||||
|
{{item}}
|
||||||
|
<template slot-scope="scope" :column="item">
|
||||||
|
<div v-if="item.prop=='ID'">
|
||||||
|
<p>
|
||||||
|
<span>{{scope.row['id']}}</span>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div v-if="item.prop=='IP'">
|
||||||
|
<p>
|
||||||
|
<span>{{scope.row['host']}}</span>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column
|
||||||
|
fixed="right"
|
||||||
|
label="操作"
|
||||||
|
width="100">
|
||||||
|
<template slot-scope="scope">
|
||||||
|
<el-button type="text" size="small" @click.stop="tagShow('showAdd')">查看</el-button>
|
||||||
|
<el-button type="text" size="small" @click.stop="tagShow('showEdit')">编辑</el-button>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
</el-table>
|
||||||
|
<Pagination :pageObj="pageObj" @pageNo='pageNo' @pageSize='pageSize' ref="Pagination"></Pagination>
|
||||||
|
<transition name="el-zoom-in-center" @click.stop>
|
||||||
|
<div class="right-menu" v-if="tabShow" v-clickoutside:tagHide="tagShow">
|
||||||
|
<div v-if="this.tagType=='add'">
|
||||||
|
<el-form ref="form" :model="form" label-width="120px">
|
||||||
|
<div class="right-box__top-btns">
|
||||||
|
<div class="right-box__top-btn right-box__top-btn_full">
|
||||||
|
<div class="right-box__btn-icon">
|
||||||
|
<i class="el-icon-close"></i>
|
||||||
|
</div>
|
||||||
|
<span>Esc</span>
|
||||||
|
</div>
|
||||||
|
<div class="right-box__top-btn right-box__top-btn_full">
|
||||||
|
<div class="right-box__btn-icon">
|
||||||
|
<i class="el-icon-edit-outline"></i>
|
||||||
|
</div>
|
||||||
|
<span>Save</span>
|
||||||
|
</div>
|
||||||
|
<div class="right-box__top-btn">
|
||||||
|
<div class="right-box__btn-icon">
|
||||||
|
<i class="el-icon-delete"></i>
|
||||||
|
</div>
|
||||||
|
<span>Delete</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="el-form-style">
|
||||||
|
<el-form-item label="IP">
|
||||||
|
<el-input v-model="form.name"/>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="SN">
|
||||||
|
<el-input v-model="form.name"/>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="Asset Type">
|
||||||
|
<el-input v-model="form.name"/>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="ModelId">
|
||||||
|
<el-input v-model="form.name"/>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="IDC">
|
||||||
|
<el-input v-model="form.name"/>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="Cabinet">
|
||||||
|
<el-input v-model="form.name"/>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="Host">
|
||||||
|
<el-input v-model="form.name"/>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="State">
|
||||||
|
<el-input v-model="form.name"/>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item>
|
||||||
|
<el-button>取消</el-button>
|
||||||
|
</el-form-item>
|
||||||
|
</div>
|
||||||
|
</el-form>
|
||||||
|
</div>
|
||||||
|
<div v-if="this.tagType=='edit'">
|
||||||
|
<el-form ref="form" :model="form" label-width="120px" size="small">
|
||||||
|
<div class="right-box__top-btns">
|
||||||
|
<div class="right-box__top-btn right-box__top-btn_full">
|
||||||
|
<div class="right-box__btn-icon">
|
||||||
|
<i class="el-icon-close"></i>
|
||||||
|
</div>
|
||||||
|
<span>Esc</span>
|
||||||
|
</div>
|
||||||
|
<div class="right-box__top-btn right-box__top-btn_full">
|
||||||
|
<div class="right-box__btn-icon">
|
||||||
|
<i class="el-icon-edit-outline"></i>
|
||||||
|
</div>
|
||||||
|
<span>Save</span>
|
||||||
|
</div>
|
||||||
|
<div class="right-box__top-btn">
|
||||||
|
<div class="right-box__btn-icon">
|
||||||
|
<i class="el-icon-delete"></i>
|
||||||
|
</div>
|
||||||
|
<span>Delete</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="el-form-style">
|
||||||
|
<el-form-item label="IP">
|
||||||
|
<span>192.168.100.255</span>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="SN">
|
||||||
|
<span>AAQWEROIUOWENKOIZLNWEROFPIAN</span>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="Asset Type">
|
||||||
|
<span>服务器</span>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="ModelId">
|
||||||
|
<span>No1</span>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="IDC">
|
||||||
|
<span>国内地区/北京市/1号</span>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="Cabinet">
|
||||||
|
<span>13排223机柜</span>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="Host">
|
||||||
|
<span>192.158.22.22</span>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="State">
|
||||||
|
<span>在库</span>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="Alarm">
|
||||||
|
<div>111</div>
|
||||||
|
</el-form-item>
|
||||||
|
</div>
|
||||||
|
<div style="padding-top: 10px">
|
||||||
|
<span>endPoint:</span>
|
||||||
|
</div>
|
||||||
|
<div class="tag-table">
|
||||||
|
<el-table
|
||||||
|
:data="tagTableData"
|
||||||
|
:row-style="{height:'20px'}"
|
||||||
|
:cell-style="{padding:'2px'}"
|
||||||
|
>
|
||||||
|
<el-table-column
|
||||||
|
v-for="(item, index) in tagTableTitle"
|
||||||
|
v-if="item.show"
|
||||||
|
:key="`col_${index}`"
|
||||||
|
:label="item.label"
|
||||||
|
|
||||||
|
>
|
||||||
|
<template slot-scope="scope" :column="item">
|
||||||
|
<div v-if="item.prop=='projectName'">
|
||||||
|
<p>
|
||||||
|
<span>{{scope.row['projectName']}}</span>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div v-if="item.prop=='moduleName'">
|
||||||
|
<p>
|
||||||
|
<span>{{scope.row['moduleName']}}</span>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div v-if="item.prop=='endPoint'">
|
||||||
|
<div class="tableSquare">342</div>
|
||||||
|
</div>
|
||||||
|
<div v-if="item.prop=='alarm'">
|
||||||
|
<div class="tableSquare">{{11}}/{{111}}</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column
|
||||||
|
fixed="right"
|
||||||
|
label=""
|
||||||
|
width="100">
|
||||||
|
<template slot-scope="scope">
|
||||||
|
<el-button type="text" size="small" @click.stop="tagShow('showAdd')">查看
|
||||||
|
</el-button>
|
||||||
|
<el-button type="text" size="small" @click.stop="tagShow('showEdit')">编辑
|
||||||
|
</el-button>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
</el-table>
|
||||||
|
<!-- <Pagination :pageobj="pageObj" ref="Pagination"></Pagination>-->
|
||||||
|
<el-divider></el-divider>
|
||||||
|
<span>默认CLI账户</span>
|
||||||
|
<div style="padding-top: 10px">
|
||||||
|
<el-select v-model="form.region" placeholder="请选择活动区域" style="width: 90%">
|
||||||
|
<el-option label="区域一" value="shanghai">111111111111111111111</el-option>
|
||||||
|
<el-option label="区域二" value="beijing">111111111111111111111</el-option>
|
||||||
|
<el-option label="区域二" value="beijing">111111111111111111111</el-option>
|
||||||
|
<el-option label="区域二" value="beijing">111111111111111111111</el-option>
|
||||||
|
</el-select>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="el-form-style">
|
||||||
|
<el-form-item label="IP">
|
||||||
|
<span>192.168.100.255</span>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="SN">
|
||||||
|
<span>AAQWEROIUOWENKOIZLNWEROFPIAN</span>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="Asset Type">
|
||||||
|
<span>服务器</span>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="ModelId">
|
||||||
|
<span>No1</span>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="IDC">
|
||||||
|
<span>国内地区/北京市/1号</span>
|
||||||
|
</el-form-item>
|
||||||
|
</div>
|
||||||
|
</el-form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</transition>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
@@ -239,6 +249,9 @@ export default {
|
|||||||
name: "asset",
|
name: "asset",
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
|
checkList: [0],
|
||||||
|
checkListData: [],
|
||||||
|
sidebarState:'',
|
||||||
tableTitle: [
|
tableTitle: [
|
||||||
{
|
{
|
||||||
label: this.$t("asset.tableTitle.id"),
|
label: this.$t("asset.tableTitle.id"),
|
||||||
@@ -340,36 +353,68 @@ export default {
|
|||||||
endPoint: '上海市普陀区金沙江路 1518 弄'
|
endPoint: '上海市普陀区金沙江路 1518 弄'
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
|
input: '',
|
||||||
pageObj: {
|
pageObj: {
|
||||||
pageNo: 1,
|
pageNo: 1,
|
||||||
pageSize: 20,
|
pageSize: 20,
|
||||||
total: 0
|
total: 0,
|
||||||
},
|
},
|
||||||
input: '',
|
tableHeight:document.documentElement.clientHeight-150,
|
||||||
tabShow: false,
|
tabShow: false,
|
||||||
tagType: 'add',
|
tagType: 'add',
|
||||||
form: {
|
form: {
|
||||||
name: ''
|
name: ''
|
||||||
},
|
},
|
||||||
|
searchObj: {
|
||||||
|
idcId: 7
|
||||||
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
computed:{
|
||||||
|
getData(){
|
||||||
|
return this.$store.state.assetData
|
||||||
|
}
|
||||||
|
},
|
||||||
|
watch:{
|
||||||
|
getData:{
|
||||||
|
handler(newVal,oldVal){
|
||||||
|
this.checkList.splice(1,1,newVal.selectedData)
|
||||||
|
if(newVal.moduleData=='asset'){
|
||||||
|
this.sidebarState=true
|
||||||
|
}else{
|
||||||
|
this.sidebarState=false
|
||||||
|
this.getAssetData()
|
||||||
|
this.checkListData=[0]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
deep: true,
|
||||||
|
},
|
||||||
|
|
||||||
|
},
|
||||||
methods: {
|
methods: {
|
||||||
getListData() {
|
getListData() {
|
||||||
this.$get('asset', this.pageObj).then(response => {
|
this.$get('asset', this.pageObj).then(response => {
|
||||||
if (response.code == 200) {
|
if (response.code === 200) {
|
||||||
this.tableData = response.data.list
|
this.tableData = response.data.list;
|
||||||
this.pageObj.total = response.data.total
|
this.pageObj.total = response.data.total
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
|
getAssetData() {
|
||||||
|
this.$get('idc', this.pageObj).then(response => {
|
||||||
|
if (response.code == 200) {
|
||||||
|
this.checkListData = response.data.list
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
tagShow(t) {
|
tagShow(t) {
|
||||||
this.tabShow = false
|
this.tabShow = false;
|
||||||
if (t === 'showAdd') {
|
if (t === 'showAdd') {
|
||||||
this.tabShow = true
|
this.tabShow = true;
|
||||||
this.tagType = 'add'
|
this.tagType = 'add'
|
||||||
}
|
}
|
||||||
if (t === 'showEdit') {
|
if (t === 'showEdit') {
|
||||||
this.tabShow = true
|
this.tabShow = true;
|
||||||
this.tagType = 'edit'
|
this.tagType = 'edit'
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
@@ -382,8 +427,14 @@ export default {
|
|||||||
this.getListData()
|
this.getListData()
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
mounted() {
|
mounted() {
|
||||||
this.getListData()
|
this.getListData()
|
||||||
|
this.getAssetData()
|
||||||
|
window.onresize = () => {
|
||||||
|
this.tableHeight = document.documentElement.clientHeight-150;
|
||||||
|
console.log(this.tableHeight)
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
@@ -401,25 +452,65 @@ export default {
|
|||||||
font-size: 10px;
|
font-size: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.el-table__body-wrapper::-webkit-scrollbar {
|
.el-checkbox.is-bordered + .el-checkbox.is-bordered {
|
||||||
width: 6px;
|
margin-left: 0px;
|
||||||
height: 6px;
|
margin-top: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-checkbox-group {
|
||||||
|
padding-top: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-checkbox {
|
||||||
|
width: 270px;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
<style scoped>
|
<style scoped>
|
||||||
.right-menu {
|
.content-left {
|
||||||
position: fixed;
|
float: left;
|
||||||
top: 20px;
|
width: 370px;
|
||||||
right: 0;
|
height: 100%;
|
||||||
z-index: 500;
|
|
||||||
border-radius: 8px;
|
|
||||||
box-shadow: 0 0 15px #ccc;
|
|
||||||
background-color: white;
|
|
||||||
padding: 0 20px;
|
|
||||||
width: 580px;
|
|
||||||
height: calc(100% - 60px);
|
|
||||||
overflow-y: auto
|
|
||||||
}
|
}
|
||||||
|
.content-right {
|
||||||
|
margin-left:370px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar-title {
|
||||||
|
padding-left: 30px;
|
||||||
|
padding-top: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar-info {
|
||||||
|
margin-top: 20px;
|
||||||
|
border: 1px solid #acacac;
|
||||||
|
border-radius: 8px;
|
||||||
|
height: calc(90vh - 55px);
|
||||||
|
width: calc(100% - 30px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar-info-header {
|
||||||
|
background: #acacac;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 50px;
|
||||||
|
border-top-left-radius: 8px;
|
||||||
|
border-top-right-radius: 8px;
|
||||||
|
height: 60px;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar-info-footer {
|
||||||
|
padding-top: 15px;
|
||||||
|
padding-left: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.checkbox-edit {
|
||||||
|
position: absolute;
|
||||||
|
top: 8px;
|
||||||
|
left: 230px;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
.right-box__top-btn {
|
.right-box__top-btn {
|
||||||
border-radius: 0 0 9px 9px;
|
border-radius: 0 0 9px 9px;
|
||||||
|
|||||||
Reference in New Issue
Block a user