refactor: sidebar重构
将页面布局重新设置,由各个组件单独控制,国际化参数优化
This commit is contained in:
wanghaoyu
@@ -10,22 +10,10 @@ export default {
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
body,html{
|
||||
/* font-family: "AlibabaPuHuiTiR"; */
|
||||
}
|
||||
.ly-table1 table{
|
||||
/* 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 scoped>
|
||||
#app{
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -4,19 +4,10 @@
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: NotoSansSC-Light;
|
||||
min-width: 1350px;
|
||||
background: #F2F7F8;
|
||||
overflow-x: hidden !important;
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
html {
|
||||
overflow: auto;
|
||||
overflow-y: hidden;
|
||||
overflow-x: hidden !important;
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
/*侧滑文字*/
|
||||
.el-form-item .el-form-item__label{
|
||||
|
||||
@@ -119,6 +119,9 @@ export default {
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.el-menu.el-menu--horizontal{
|
||||
border-bottom:0px
|
||||
}
|
||||
.el-submenu__title .el-submenu__icon-arrow {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@@ -1,8 +1,7 @@
|
||||
<template>
|
||||
<div>
|
||||
<Header></Header>
|
||||
<sideBar></sideBar>
|
||||
<div class="content-box">
|
||||
<Header ref="header"></Header>
|
||||
<div class="content-box" >
|
||||
<router-view/>
|
||||
</div>
|
||||
</div>
|
||||
@@ -14,28 +13,11 @@ import Header from "./header";
|
||||
import sideBar from "./sideBar";
|
||||
export default {
|
||||
name: "home",
|
||||
components: {Header,sideBar}
|
||||
components: {Header}
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<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) {
|
||||
.content-box {
|
||||
background: #a0eea6;
|
||||
@@ -46,5 +28,4 @@ export default {
|
||||
background: #b94b7e;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
@@ -17,11 +17,11 @@ const cn = {
|
||||
tableTitle: {
|
||||
id: 'ID',
|
||||
assetType: '资产类型',
|
||||
Device: 'Device SN',
|
||||
IP: 'IP',
|
||||
device: 'Device SN',
|
||||
ip: 'IP',
|
||||
assetState: '资产状态',
|
||||
Module: 'Module',
|
||||
Alarm: 'Alarm',
|
||||
module: 'Module',
|
||||
alarm: 'Alarm',
|
||||
dataCenter: '数据中心',
|
||||
cabinet: '机柜',
|
||||
model: '型号',
|
||||
|
||||
@@ -17,11 +17,11 @@ const en = {
|
||||
tableTitle: {
|
||||
id: 'ID',
|
||||
assetType: 'assetType',
|
||||
Device: 'Device SN',
|
||||
IP: 'IP',
|
||||
device: 'Device SN',
|
||||
ip: 'IP',
|
||||
assetState: 'assetState',
|
||||
Module: 'Module',
|
||||
Alarm: 'Alarm',
|
||||
module: 'Module',
|
||||
alarm: 'Alarm',
|
||||
dataCenter: 'dataCenter',
|
||||
cabinet: 'cabinet',
|
||||
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>
|
||||
<div style="height:95%;overflow-y:auto">
|
||||
<div>
|
||||
<el-input
|
||||
style="width: 90px;"
|
||||
placeholder="请输入内容"
|
||||
v-model="input"
|
||||
clearable>
|
||||
</el-input>
|
||||
</div>
|
||||
<div>
|
||||
<el-table
|
||||
: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>
|
||||
</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 class="asset">
|
||||
<div class="content-left">
|
||||
<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>
|
||||
</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>
|
||||
</template>
|
||||
|
||||
@@ -239,6 +249,9 @@ export default {
|
||||
name: "asset",
|
||||
data() {
|
||||
return {
|
||||
checkList: [0],
|
||||
checkListData: [],
|
||||
sidebarState:'',
|
||||
tableTitle: [
|
||||
{
|
||||
label: this.$t("asset.tableTitle.id"),
|
||||
@@ -340,36 +353,68 @@ export default {
|
||||
endPoint: '上海市普陀区金沙江路 1518 弄'
|
||||
}
|
||||
],
|
||||
input: '',
|
||||
pageObj: {
|
||||
pageNo: 1,
|
||||
pageSize: 20,
|
||||
total: 0
|
||||
total: 0,
|
||||
},
|
||||
input: '',
|
||||
tableHeight:document.documentElement.clientHeight-150,
|
||||
tabShow: false,
|
||||
tagType: 'add',
|
||||
form: {
|
||||
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: {
|
||||
getListData() {
|
||||
this.$get('asset', this.pageObj).then(response => {
|
||||
if (response.code == 200) {
|
||||
this.tableData = response.data.list
|
||||
if (response.code === 200) {
|
||||
this.tableData = response.data.list;
|
||||
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) {
|
||||
this.tabShow = false
|
||||
this.tabShow = false;
|
||||
if (t === 'showAdd') {
|
||||
this.tabShow = true
|
||||
this.tabShow = true;
|
||||
this.tagType = 'add'
|
||||
}
|
||||
if (t === 'showEdit') {
|
||||
this.tabShow = true
|
||||
this.tabShow = true;
|
||||
this.tagType = 'edit'
|
||||
}
|
||||
},
|
||||
@@ -382,8 +427,14 @@ export default {
|
||||
this.getListData()
|
||||
}
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.getListData()
|
||||
this.getAssetData()
|
||||
window.onresize = () => {
|
||||
this.tableHeight = document.documentElement.clientHeight-150;
|
||||
console.log(this.tableHeight)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -401,25 +452,65 @@ export default {
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
.el-table__body-wrapper::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
.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>
|
||||
.right-menu {
|
||||
position: fixed;
|
||||
top: 20px;
|
||||
right: 0;
|
||||
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-left {
|
||||
float: left;
|
||||
width: 370px;
|
||||
height: 100%;
|
||||
}
|
||||
.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 {
|
||||
border-radius: 0 0 9px 9px;
|
||||
|
||||
Reference in New Issue
Block a user