gfwleak/nezha-nezha-fronted
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: dc-detail转为上滑弹框

Browse Source
This commit is contained in:
陈劲松
2020-03-27 15:41:26 +08:00
parent c5f40976d5
commit 25f837dde0
8 changed files with 523 additions and 143 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
nezha-fronted/src/assets/stylus/main.scss
View File

@@ -386,13 +386,20 @@ li{
.sub-list-tab {
width: 100px;
font-size: 14px;
color: $global-text-color-active;
background-color: white;
border-top: solid 2px #ee9d3f;
color: #909399;
height: calc(100% - 2px);
padding-left: 20px;
line-height: 27px;
display: inline-block;
cursor: pointer;
}
.sub-list-tab:hover {
color: $global-text-color-active;
}
.sub-list-tab-active {
color: $global-text-color-active;
background-color: white;
border-top: solid 2px #ee9d3f;
}
.sub-list-tab-txt {
font-size: 14px;
@@ -516,6 +523,7 @@ li{
display: flex;
align-content: center;
height: 26px;
margin-right: 76px;
}
.top-tool-main-right {
position: absolute;
@@ -605,15 +613,16 @@ li{
display: flex;
align-items: center;
margin-left: 14px;
position: absolute;
right: 0;
top: 8px;
z-index: 1;
}
.window-control-btn {
cursor: pointer;
width: 29px;
text-align: center;
}
.window-control-btn:last-of-type {
margin-right: 4px;
}
.window-control-btn>i {
color: #909399;
font-size: 17px;

87
nezha-fronted/src/components/common/bottomBox/bottomBox.vue Normal file
View File

@@ -0,0 +1,87 @@
<template>
<span>
<!-- 副列表 endpoint query-->
<div @mousedown="listResize" class="sub-list-resize" v-if="showSubList && !isFullScreen">一</div>
<div class="sub-list" v-if="showSubList">
<!--窗口大小控制-->
<div class="sub-list-window-control">
<!--半屏-->
<div class="window-control-btn" v-if="isFullScreen" @click="exitFullScreen"><i class="nz-icon nz-icon-exit-full-screen"></i></div>
<!--全屏-->
<div class="window-control-btn" v-if="!isFullScreen" @click="fullScreen"><i class="el-icon-full-screen"></i></div>
<!--关闭-->
<div class="window-control-btn" @click="closeSubList"><i class="el-icon-close"></i></div>
</div>
<!------TAB区------>
<!--通用详情-->
<common-detail-tab v-show="subResizeShow" :obj="obj" :from="from" :detail="detail"
v-if="targetTab == 'detail'"
@changeTab="changeTab"
></common-detail-tab>
<!--机柜-->
<cabinet-tab v-show="subResizeShow" v-if="from == 'dc' && targetTab == 'cabinet'" :obj="obj" @changeTab="changeTab"></cabinet-tab>
</div>
</span>
</template>
<script>
import commonDetailTab from "./tabs/commonDetailTab"
import cabinetTab from "./tabs/cabinetTab";
export default {
name: "cabinetBox",
components:{
'common-detail-tab': commonDetailTab,
'cabinet-tab': cabinetTab,
},
props: {
isFullScreen: false, //是否全屏
showSubList: Boolean, //是否显示
subResizeShow: Boolean, //resize时，用v-show="subResizeShow"控制页面内容是否显示
obj: Object, //关联的实体对象
from: String, //来自哪个页面
targetTab: String, //展示哪个页签
detail: Array, //对象详情内容
},
data() {
return {}
},
methods: {
exitFullScreen() {
this.$emit("exitFullScreen");
},
fullScreen() {
this.$emit("fullScreen");
},
closeSubList() {
this.$emit("closeSubList");
},
listResize(e) {
this.$emit('listResize', e);
},
changeTab(tab) {
this.targetTab = tab;
}
}
}
</script>
<style lang="scss">
/*重写el-loading样式*/
.nz-table .el-loading-spinner .circular{
width: 42px;
height: 42px;
animation: loading-rotate 2s linear infinite;
display: none;
}
.nz-table .el-loading-spinner{
background: url(../../../assets/img/loading.gif) no-repeat;
background-size: 48px 48px;
width: 100%;
height: 100%;
position: relative;
top: 50%;
left: 48.5%;
}
</style>

23
nezha-fronted/src/components/common/bottomBox/cabinetBottomBox.vue → nezha-fronted/src/components/common/bottomBox/dcBottomBox.vue
View File

@@ -3,9 +3,18 @@
<!-- 副列表 endpoint query-->
<div @mousedown="listResize" class="sub-list-resize" v-if="showSubList && !isFullScreen">一</div>
<div class="sub-list" v-if="showSubList">
<div class="sub-list-window-control">
<!--半屏-->
<div class="window-control-btn" v-if="isFullScreen" @click="exitFullScreen"><i class="nz-icon nz-icon-exit-full-screen"></i></div>
<!--全屏-->
<div class="window-control-btn" v-if="!isFullScreen" @click="fullScreen"><i class="el-icon-full-screen"></i></div>
<!--关闭-->
<div class="window-control-btn" @click="closeSubList"><i class="el-icon-close"></i></div>
</div>
<template>
<div class="sub-top-tools" v-show="subResizeShow">
<div class="sub-list-tabs margin-l-20" style="width: calc(100% - 780px);">
<div class="sub-list-tab">{{$t("overall.query")}}</div>
<div class="sub-list-tab">{{$t("dashboard.overview.dataCenter.cabinet")}}</div>
<span class="sub-list-tab-txt">{{$t("asset.createAssetTab.dcName")}}：{{obj.name}}</span>
</div>
<div class="top-tool-right">
@@ -16,20 +25,13 @@
class="nz-btn nz-btn-size-normal nz-btn-style-light float-right margin-l-20" id="cab-add">
<i class="nz-icon-create-square nz-icon"></i>
</button>
<div class="sub-list-window-control">
<!--半屏-->
<div class="window-control-btn" v-if="isFullScreen" @click="exitFullScreen"><i class="nz-icon nz-icon-exit-full-screen"></i></div>
<!--全屏-->
<div class="window-control-btn" v-if="!isFullScreen" @click="fullScreen"><i class="el-icon-full-screen"></i></div>
<!--关闭-->
<div class="window-control-btn" @click="closeSubList"><i class="el-icon-close"></i></div>
</div>
</div>
</div>
<el-table
class="nz-table"
:data="tableData"
border
v-show="subResizeShow"
v-loading="loading"
ref="cabTable"
v-scrollBar:el-table
@@ -76,7 +78,6 @@
<span class="dc-asset-state dc-asset-state-in">{{scope.row.alertStat.low}}</span>
</div>
</el-popover>
</template >
<template v-else-if="scope.row[item.prop]">{{scope.row[item.prop]}}</template>
<template v-else>-</template>
@@ -85,12 +86,14 @@
</el-table>
<cabinet-box :cur-cabinet="currentCabinet" :cur-idc="currentDc" ref="cabinetEditBox" @after="getCabinetList"></cabinet-box>
<button class="to-top" v-show="showTopBtn && subResizeShow" @click="toTop('ps', 1)"><i class="nz-icon nz-icon-top"></i></button>
</template>
</div>
</span>
</template>
<script>
import cabinetBox from "../../common/rightBox/cabinetBox";
export default {
name: "cabinetBox",
components:{

259
nezha-fronted/src/components/common/bottomBox/tabs/cabinetTab.vue Normal file
View File

@@ -0,0 +1,259 @@
<template>
<span>
<div class="sub-top-tools">
<div class="sub-list-tabs margin-l-20" style="width: calc(100% - 780px);">
<div class="sub-list-tab" @click="changeTab('detail')">{{$t("overall.detail")}}</div>
<div class="sub-list-tab sub-list-tab-active">{{$t("config.dc.cabinets")}}</div>
<span class="sub-list-tab-txt">{{$t("asset.createAssetTab.dcName")}}：{{obj.name}}</span>
</div>
<div class="top-tool-right">
<div class="top-tool-search">
<search-input :searchMsg="searchMsg" @search="search"></search-input>
</div>
<button type="button" @click="toAddCabinet" :title="$t('overall.createCabinet')"
class="nz-btn nz-btn-size-normal nz-btn-style-light float-right margin-l-20" id="cab-add">
<i class="nz-icon-create-square nz-icon"></i>
</button>
</div>
</div>
<el-table
class="nz-table"
:data="tableData"
border
v-loading="loading"
ref="cabTable"
v-scrollBar:el-table
:height="$tableHeight.noPagination"
style="width: 100%;">
<el-table-column
:resizable="false"
v-for="(item, index) in tableTitle"
v-if="item.show"
:width="item.width"
:key="`col-${index}`"
:label="item.label"
>
<template slot-scope="scope" :column="item">
<div v-if="item.prop == 'option'" class="content-right-options">
<span :title="$t('overall.edit')" @click="editCabinet(scope.row)" class="content-right-option" :id="'dc-edit-'+scope.row.id"><i class="nz-icon nz-icon-edit"></i></span>
<span :title="$t('overall.delete')" @click="delCabinet(scope.row)" class="content-right-option" :id="'dc-del-'+scope.row.id"><i class="el-icon-delete"></i></span>
</div>
<template v-else-if="item.prop == 'assetStat'">
<el-popover
placement="top-start"
offset="-100"
trigger="hover"
:content="$t('overall.result.total') + '：' + scope.row.assetStat.total + '，' + $t('asset.createAssetTab.inStock') + '：' + scope.row.assetStat.inStock + '，' + $t('asset.createAssetTab.notInStock') + '：' + scope.row.assetStat.outStock">
<div slot="reference" class="dc-asset-states">
<span class="dc-asset-state dc-asset-state-total">{{scope.row.assetStat.total}}</span>
<span class="dc-asset-state dc-asset-state-in">{{scope.row.assetStat.inStock}}</span>
<span class="dc-asset-state dc-asset-state-out">{{scope.row.assetStat.outStock}}</span>
</div>
</el-popover>
</template >
<template v-else-if="item.prop == 'alertStat'">
<el-popover
placement="top-start"
offset="-128"
trigger="hover"
:content="$t('overall.result.total') + '：' + scope.row.alertStat.total + '，' + $t('alert.config.high') + '：' + scope.row.alertStat.high + '，' + $t('alert.config.medium') + '：' + scope.row.alertStat.medium+ '，' + $t('alert.config.low') + '：' + scope.row.alertStat.low">
<div slot="reference" class="dc-asset-states">
<span class="dc-asset-state dc-asset-state-total">{{scope.row.alertStat.total}}</span>
<span class="dc-asset-state dc-asset-state-high">{{scope.row.alertStat.high}}</span>
<span class="dc-asset-state dc-asset-state-out">{{scope.row.alertStat.medium}}</span>
<span class="dc-asset-state dc-asset-state-in">{{scope.row.alertStat.low}}</span>
</div>
</el-popover>
</template >
<template v-else-if="scope.row[item.prop]">{{scope.row[item.prop]}}</template>
<template v-else>-</template>
</template>
</el-table-column>
</el-table>
<cabinet-box :cur-cabinet="currentCabinet" :cur-idc="currentDc" ref="cabinetEditBox" @after="getCabinetList"></cabinet-box>
<button class="to-top" v-show="showTopBtn" @click="toTop('ps', 1)"><i class="nz-icon nz-icon-top"></i></button>
</span>
</template>
<script>
import cabinetBox from "../../rightBox/cabinetBox";
export default {
name: "cabinetTab",
components: {
"cabinet-box": cabinetBox
},
props: {
obj: Object, //关联的实体对象
},
data() {
return {
currentCabinet: {
id:'',
idcId:'',
name:'',
remark:'',
seq:'',
uSize:0
},
showTopBtn: false, //top按钮是否显示
loading: false,
currentDc: {},
tableTitle: [
{
label: 'ID',
prop: 'id',
show: true,
width: 80
},
{
label:this.$t('overall.name'),
prop:'name',
show:true
},
{
label:this.$t('asset.createAssetTab.uSize'),
prop:'uSize',
show:true
},
{
label:this.$t('config.dc.assets'),
prop:'assetStat',
show:true
},
{
label:this.$t('alert.alert'),
prop:'alertStat',
show:true
},
{
label:this.$t('config.dc.remark'),
prop:'remark',
show:true
},
{
label: this.$t('config.account.option'),
prop: 'option',
show: true,
width: 120
}
],
searchMsg: { //给搜索框子组件传递的信息
zheze_none: true,
searchLabelList: [
{
id: 11,
name: this.$t('overall.name'),
type: 'input',
label: 'name',
disabled: false
},
{
id:12,
name:this.$t('asset.createAssetTab.uSize'),
label:'uSize',
disabled: false
},
{
id:13,
name:this.$t('config.dc.remark'),
label:'remark',
disabled: false
}
],
},
searchLabel: { //搜索参数
},
tableData: [],
}
},
methods: {
// 切换tab
changeTab(tab) {
this.$emit('changeTab', tab);
},
toAddCabinet:function(){
this.$refs.cabinetEditBox.show(true,true);
this.$refs.cabinetEditBox.reset();
},
editCabinet(cabinet) {
this.currentCabinet = JSON.parse(JSON.stringify(cabinet));
console.info(this.$refs.cabinetEditBox)
this.$refs.cabinetEditBox.show(true, true);
},
getCabinetList() {
this.tableData = [];
this.loading = true;
this.$set(this.searchLabel, "pageNo", 1);
this.$set(this.searchLabel, "pageSize", -1);
this.$get("/cabinet", this.searchLabel).then(response => {
if (response.code == 200) {
this.loading = false;
this.tableData = response.data.list;
}
});
},
search: function (searchObj) {
this.searchLabel = {idcId: this.currentDc.id, pageNo: 1, pageSize: -1};
for (let item in searchObj) {
if (searchObj[item]) {
this.$set(this.searchLabel, item, searchObj[item]);
}
}
this.getCabinetList();
},
closeSubList() {
this.$emit("closeSubList");
this.tableData = [];
},
delCabinet:function(cabinet){
this.$confirm(this.$t("tip.confirmDelete"), {
confirmButtonText: this.$t("tip.yes"),
cancelButtonText: this.$t("tip.no"),
type: 'warning'
}).then(() => {
this.$delete('/cabinet?ids='+cabinet.id).then(response=>{
if(response.code == 200){
this.$message({duration: 2000, type: 'success', message: this.$t("tip.saveSuccess")});
this.getCabinetList();
}else{
this.$message.error(response.msg);
}
})
})
},
},
watch: {
obj: {
immediate: true,
deep: true,
handler(n) {
if (n) {
this.currentDc = JSON.parse(JSON.stringify(n));
this.searchLabel = {idcId: this.currentDc.id};
this.getCabinetList();
}
}
}
},
mounted() {
this.$nextTick(() => {
//绑定滚动条事件，控制top按钮
let el = this.$refs.cabTable.$el.querySelector(".el-table__body-wrapper");
if (el._ps_) {
el.addEventListener("ps-scroll-y", () => {
if (el._ps_.scrollbarYTop > 50) {
this.showTopBtn = true;
} else {
this.showTopBtn = false;
}
});
}
});
}
}
</script>
<style scoped>
</style>

38
nezha-fronted/src/components/common/bottomBox/tabs/commonDetailTab.vue Normal file
View File

@@ -0,0 +1,38 @@
<template>
<span>
<div class="sub-top-tools">
<div class="sub-list-tabs margin-l-20">
<div class="sub-list-tab sub-list-tab-active">{{$t("overall.detail")}}</div>
<template v-if="from == 'dc'">
<div class="sub-list-tab" @click="changeTab('cabinet')">{{$t("config.dc.cabinets")}}</div>
<span class="sub-list-tab-txt">{{$t("asset.createAssetTab.dcName")}}：{{obj.name}}</span>
</template>
</div>
</div>
<div style="margin-top: 10px;">
<div style="padding: 5px; color: #606266;" v-for="item in detail">
{{item.label}}: {{item.value}}
</div>
</div>
</span>
</template>
<script>
export default {
name: "commonDetailTab",
props: {
obj: Object,
from: String,
detail: Array
},
methods: {
changeTab(tab) {
this.$emit("changeTab", tab);
}
}
}
</script>
<style scoped>
</style>

3
nezha-fronted/src/components/common/language/en.js
View File

@@ -23,7 +23,6 @@ const en = {
search: 'Search', //'搜索'
add: 'Create', //"新增"
option: 'Operation', //"操作"
clearAll: 'Clear All', //"清空"
clear: 'Clear', //"清除"
name: 'Name', //'名称'
cover: 'Override', //'覆盖'
@@ -32,6 +31,7 @@ const en = {
ok: 'Ok',//OK
all: 'All',//'全选'
other: 'Others',//"其他"
detail: 'Detail', //详情
query: 'Query', //查询
back: 'Back', //返回
unavailable: 'Unavailable',
@@ -478,6 +478,7 @@ const en = {
cabinetNum: "Cabinet number",
assets: "Assets",
remark:'Remark',
cabinets: "Cabinets"
},
model: {
model: 'Model',

89
nezha-fronted/src/components/page/config/dc.vue
View File

@@ -138,8 +138,8 @@
</div>
<button class="to-top" v-show="showTopBtn" @click="toTop"><i class="nz-icon nz-icon-top"></i></button>
</div>
<cabinet-bottom-box v-if="showSubList" @listResize="listResize" :show-sub-list="showSubList" :subResizeShow="subResizeShow" :obj="cabinetDc" :isFullScreen="isFullScreen"
@closeSubList="showSubList = false" @fullScreen="fullScreen" @exitFullScreen="exitFullScreen"></cabinet-bottom-box>
<bottom-box v-if="showSubList" :show-sub-list="showSubList" :subResizeShow="subResizeShow" :obj="cabinetDc" :isFullScreen="isFullScreen" :from="'dc'" :targetTab="targetTab" :detail="dcDetail"
@closeSubList="showSubList = false" @fullScreen="fullScreen" @exitFullScreen="exitFullScreen" @listResize="listResize" ></bottom-box>
</div>
<!--dc table end-->
<element-set
@@ -157,6 +157,7 @@
name: "dc",
data() {
return {
targetTab: '', //展示二级列表中的哪个页签
showElementSet: false, //控制自定义列的弹框
inTransform: false, //搜索框相关，搜索条件下拉框是否在transform里
mainResizeShow: true, //dom高度改变时部分内容是否展示
@@ -178,6 +179,7 @@
}
},
cabinetDc: {},
dcDetail: [], //dc的详情信息，包含标题
pageObj: {
pageNo: 1,
pageSize: 20,
@@ -387,13 +389,33 @@
this.currentDc = tempDc;
this.$refs.dcBox.show(true, true);
},
detail(u) {
let tempDc = JSON.parse(JSON.stringify(u));
detail(obj) {
let tempDc = JSON.parse(JSON.stringify(obj));
if (!tempDc.area) {
this.$set(tempDc, 'area', {id: '', name: ''});
}
this.currentDc = tempDc;
this.$refs.dcBox.show(true, false);
//this.currentDc = tempDc;
//this.$refs.dcBox.show(true, false);
this.cabinetDc = tempDc;
this.targetTab = "detail";
this.showSubList = true;
},
convertToDetail(obj) {
let detail = [];
detail.push({label: this.$t("overall.name"), value: obj.name});
detail.push({label: this.$t("asset.createAssetTab.location"), value: obj.location});
detail.push({label: this.$t("asset.createAssetTab.tel"), value: obj.tel});
let principal = '';
for (let i = 0; i < this.userData.length; i++) {
if (this.userData[i].userId == obj.principal) {
principal = this.userData[i].username;
break;
}
}
detail.push({label: this.$t("asset.createAssetTab.principal"), value: principal});
detail.push({label: this.$t("config.dc.area"), value: obj.area.name});
console.info(detail)
return detail;
},
toAdd() {
this.currentDc = {
@@ -464,6 +486,7 @@
showCabinet:function(dc){
//this.currentShowDc=dc;
//this.tabShow=2;
this.targetTab = 'cabinet';
this.cabinetDc = JSON.parse(JSON.stringify(dc));
this.showSubList = true;
//this.cabSearchLabel={idcId:this.currentShowDc.id};
@@ -471,56 +494,14 @@
/*let temp=this;
setTimeout(function(){temp.$refs.cabSearchInput.clear_input();},100)*/
},
/*getCabinetDatas:function(){
this.$get('/cabinet',this.cabSearchLabel).then(response=>{
if(response.code==200 && response.msg=='success'){
this.cabinetDatas=response.data.list;
}
})
},
editCabinet:function(cabinet){
this.curCabinet=cabinet;
this.$refs.cabinetEditBox.show(true,true);
},
toAddCabinet:function(){
this.$refs.cabinetEditBox.show(true,true);
this.$refs.cabinetEditBox.reset();
},*/
/*delCabinet:function(cabinet){
this.$confirm(this.$t("tip.confirmDelete"), {
confirmButtonText: this.$t("tip.yes"),
cancelButtonText: this.$t("tip.no"),
type: 'warning'
}).then(() => {
this.$delete('/cabinet?ids='+cabinet.id).then(response=>{
if(response.code == 200){
this.$message({duration: 2000, type: 'success', message: this.$t("tip.saveSuccess")});
this.getCabinetDatas();
}else{
this.$message.error(response.msg);
}
})
})
},*/
/*back:function(){
this.tabShow=1;
this.getTableData();
let temp=this;
setTimeout(function(){temp.$refs.searchInput.clear_input();},100)
},
cabSearch:function(obj){
this.cabSearchLabel={idcId:this.currentShowDc.id};
if(obj){
for(let item in obj){
if(obj[item]){
this.$set(this.cabSearchLabel,item,obj[item]);
}
}
}
this.getCabinetDatas();
}*/
},
watch: {
cabinetDc: {
deep: true,
handler(n) {
this.dcDetail = this.convertToDetail(n);
}
},
showSubList(n) {
this.inTransform = n;
if (!n) {

6
nezha-fronted/src/main.js
View File

@@ -36,7 +36,8 @@ import dcBox from "./components/common/rightBox/dcBox"; //dc弹框
import modelBox from "./components/common/rightBox/modelBox"; //model弹框
import selectArea from "./components/common/popBox/selectArea"; //dc弹框
import alertMessageBox from "./components/common/bottomBox/alertMessageBox"; //alertMessage上滑框
import cabinetBottomBox from "./components/common/bottomBox/cabinetBottomBox"; //机柜上滑框
import dcBottomBox from "./components/common/bottomBox/dcBottomBox"; //机柜上滑框
import bottomBox from "./components/common/bottomBox/bottomBox"; //机柜上滑框
import PerfectScrollbar from "perfect-scrollbar";
import "perfect-scrollbar/css/perfect-scrollbar.css";
import loading from "./components/common/loading";
@@ -62,7 +63,8 @@ Vue.component("model-box", modelBox);
Vue.component("select-area", selectArea);
Vue.component('loading',loading);
Vue.component('alert-message-box', alertMessageBox);
Vue.component('cabinet-bottom-box',cabinetBottomBox);
Vue.component('dc-bottom-box', dcBottomBox);
Vue.component('bottom-box', bottomBox);
Vue.component('mib-box',mibBox);
Vue.prototype.$axios = axios;