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

perf: account、promserver详情改为底部上滑等

Browse Source 
1.account、promserver详情改为底部上滑
2.将main.js中的工具内容单独抽出
This commit is contained in:
陈劲松
2020-03-27 18:44:59 +08:00
parent 9351cd2684
commit ec891e5785
16 changed files with 391 additions and 237 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
nezha-fronted/src/components/common/bottomBox/alertMessageBox.vue
View File

@@ -100,7 +100,7 @@
</el-table-column>
</el-table>
<Pagination :tableId="tableId" :pageObj="pageObj" @pageNo='pageNo' @pageSize='pageSize' ref="Pagination"></Pagination>
<button class="to-top" v-show="showTopBtn && subResizeShow" @click="toTop('ps', 1)"><i class="nz-icon nz-icon-top"></i></button>
<button class="to-top" v-show="showTopBtn && subResizeShow" @click="$toTop('ps', 1)"><i class="nz-icon nz-icon-top"></i></button>
</div>
<project-box :project="viewProjectData" ref="projectBox" @reload="getAlertList"></project-box>
<module-box :module="viewModuleData" @reload="getAlertList" ref="moduleBox"></module-box>

2
nezha-fronted/src/components/common/bottomBox/dcBottomBox.vue
View File

@@ -85,7 +85,7 @@
</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 && subResizeShow" @click="toTop('ps', 1)"><i class="nz-icon nz-icon-top"></i></button>
<button class="to-top" v-show="showTopBtn && subResizeShow" @click="$toTop('ps', 1)"><i class="nz-icon nz-icon-top"></i></button>
</template>
</div>
</span>

2
nezha-fronted/src/components/common/bottomBox/tabs/cabinetTab.vue
View File

@@ -72,7 +72,7 @@
</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>
<button class="to-top" v-show="showTopBtn" @click="$('ps', 1)"><i class="nz-icon nz-icon-top"></i></button>
</span>
</template>

3
nezha-fronted/src/components/common/bottomBox/tabs/commonDetailTab.vue
View File

@@ -5,8 +5,9 @@
<div class="sub-list-tab-title">
<template v-if="from == 'dc'">{{$t("asset.createAssetTab.dcName")}}：{{obj.name}}</template>
<template v-else-if="from == 'account'">{{$t("config.account.account")}}：{{obj.username}}</template>
<template v-else-if="from == 'promServer'">ID：{{obj.id}}</template>
</div><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>
<div class="sub-list-tab" @click="changeTab('cabinet')">{{$t("config.dc.cabinets")}}</div>
</template>
</div>
</div>

2
nezha-fronted/src/components/page/alert/config.vue
View File

@@ -89,7 +89,7 @@
<div class="pagination-bottom" v-show="!showSubList">
<Pagination :tableId="tableId" :pageObj="pageObj" @pageNo='pageNo' @pageSize='pageSize' ref="Pagination"></Pagination>
</div>
<button class="to-top" v-show="showTopBtn" @click="toTop"><i class="nz-icon nz-icon-top"></i></button>
<button class="to-top" v-show="showTopBtn" @click="$toTop"><i class="nz-icon nz-icon-top"></i></button>
</div>
<alert-message-box v-if="showSubList" @listResize="listResize" :show-sub-list="showSubList" :from="'alertRule'" :subResizeShow="subResizeShow" :obj="alertRuleForMessage" :isFullScreen="isFullScreen"
@closeSubList="showSubList = false" @fullScreen="fullScreen" @exitFullScreen="exitFullScreen"></alert-message-box>

2
nezha-fronted/src/components/page/alert/list.vue
View File

@@ -94,7 +94,7 @@
</el-table-column>
</el-table>
<Pagination :tableId="tableId" :pageObj="pageObj" @pageNo='pageNo' @pageSize='pageSize' ref="Pagination"></Pagination>
<button class="to-top" v-show="showTopBtn" @click="toTop()"><i class="nz-icon nz-icon-top"></i></button>
<button class="to-top" v-show="showTopBtn" @click="$toTop"><i class="nz-icon nz-icon-top"></i></button>
</div>
<alert-config-box :parentAlertRule="viewRuleData" @reload="getAlertList" ref="alertConfigBox"></alert-config-box>
<project-box :project="viewProjectData" ref="projectBox" @reload="getAlertList"></project-box>

6
nezha-fronted/src/components/page/asset/asset.vue
View File

@@ -185,7 +185,7 @@
<div class="pagination-bottom" v-show="!showSubList">
<Pagination :tableId="tableId" :pageObj="pageObj" @pageNo='pageNo' @pageSize='pageSize' ref="Pagination"></Pagination>
</div>
<button class="to-top" v-show="showTopBtn" @click="toTop"><i class="nz-icon nz-icon-top"></i></button>
<button class="to-top" v-show="showTopBtn" @click="$toTop"><i class="nz-icon nz-icon-top"></i></button>
</div>
<alert-message-box v-if="showSubList" @listResize="listResize" :show-sub-list="showSubList" :from="'asset'" :subResizeShow="subResizeShow" :obj="alertMsgAsset" :isFullScreen="isFullScreen"
@closeSubList="showSubList = false" @fullScreen="fullScreen" @exitFullScreen="exitFullScreen"></alert-message-box>
@@ -661,10 +661,6 @@
});
window.open(routeData.href);
},
/*toTop() {
let el = document.querySelector(".el-table__body-wrapper");
el.scrollTop = 0;
},*/
cli(id,host,accounts){
let port = '';
let accountId = '';

13
nezha-fronted/src/components/page/config/account.vue
View File

@@ -30,8 +30,8 @@
<div class="top-tool-search">
<search-input ref="searchInput" :searchMsg="searchMsg" @search="search" :inTransform="inTransform"></search-input>
</div>
<button type="button" @click="toAdd" :title="$t('overall.createDatacenter')"
class="nz-btn nz-btn-size-normal nz-btn-style-light margin-l-20" id="dc-add">
<button type="button" @click="toAdd" :title="$t('overall.createAccount')"
class="nz-btn nz-btn-size-normal nz-btn-style-light margin-l-20" id="account-add">
<i class="nz-icon-create-square nz-icon"></i>
</button>
</div>
@@ -105,7 +105,7 @@
<div class="pagination-bottom" v-show="!showSubList">
<Pagination :tableId="tableId" :pageObj="pageObj" @pageNo='pageNo' @pageSize='pageSize' ref="Pagination"></Pagination>
</div>
<button class="to-top" v-show="showTopBtn" @click="toTop"><i class="nz-icon nz-icon-top"></i></button>
<button class="to-top" v-show="showTopBtn" @click="$toTop"><i class="nz-icon nz-icon-top"></i></button>
</div>
<bottom-box v-if="showSubList" :show-sub-list="showSubList" :subResizeShow="subResizeShow" :obj="user" :isFullScreen="isFullScreen" :from="'account'" :targetTab="targetTab" :detail="userDetail"
@closeSubList="showSubList = false" @fullScreen="fullScreen" @exitFullScreen="exitFullScreen" @listResize="listResize" ></bottom-box>
@@ -198,14 +198,18 @@
name: "account",
data() {
return {
//底部上滑框相关
mainTableHeight: this.$tableHeight.normal, //主列表table高度
showSubList: false, //是否展示二级列表
targetTab: '', //展示二级列表中的哪个页签
showElementSet: false, //控制自定义列的弹框
inTransform: false, //搜索框相关，搜索条件下拉框是否在transform里
mainResizeShow: true, //dom高度改变时部分内容是否展示
subResizeShow: true,
isFullScreen: false,
showSubList: false, //是否展示二级列表
userDetail: [],
//底部上滑框相关end
tableId: 'accountTable', //需要分页的table的id，用于记录每页数量
showTopBtn: false,
rightBox: { //弹出框相关
@@ -222,7 +226,6 @@
receiver: [],
lang: ''
},
userDetail: [],
pageObj: {
pageNo: 1,
pageSize: 20,

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

@@ -136,7 +136,7 @@
<div class="pagination-bottom" v-show="!showSubList">
<Pagination :tableId="tableId" :pageObj="pageObj" @pageNo='pageNo' @pageSize='pageSize' ref="Pagination"></Pagination>
</div>
<button class="to-top" v-show="showTopBtn" @click="toTop"><i class="nz-icon nz-icon-top"></i></button>
<button class="to-top" v-show="showTopBtn" @click="$toTop"><i class="nz-icon nz-icon-top"></i></button>
</div>
<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>

2
nezha-fronted/src/components/page/config/mib.vue
View File

@@ -94,7 +94,7 @@
</el-table-column>
</el-table>
<Pagination :tableId="tableId" :pageObj="pageObj" @pageNo='pageNo' @pageSize='pageSize' ref="Pagination"></Pagination>
<button class="to-top" v-show="showTopBtn" @click="toTop"><i class="nz-icon nz-icon-top"></i></button>
<button class="to-top" v-show="showTopBtn" @click="$toTop"><i class="nz-icon nz-icon-top"></i></button>
</div>
<element-set

2
nezha-fronted/src/components/page/config/model.vue
View File

@@ -73,7 +73,7 @@
</el-table-column>
</el-table>
<Pagination :tableId="tableId" :pageObj="pageObj" @pageNo='pageNo' @pageSize='pageSize' ref="Pagination"></Pagination>
<button class="to-top" v-show="showTopBtn" @click="toTop"><i class="nz-icon nz-icon-top"></i></button>
<button class="to-top" v-show="showTopBtn" @click="$toTop"><i class="nz-icon nz-icon-top"></i></button>
</div>
<element-set

230
nezha-fronted/src/components/page/config/promServer.vue
View File

@@ -24,7 +24,20 @@
</div>
</div>
<div class="content-right">
<div class="top-tools">
<div class="main-list" :class="{'main-list-with-sub': showSubList}">
<div class="top-tools" v-show="mainResizeShow">
<div class="top-tool-main-right" :class="{'top-tool-main-right-to-left': showSubList}">
<div class="top-tool-search">
<search-input ref="searchInput" :searchMsg="searchMsg" @search="search" :inTransform="inTransform"></search-input>
</div>
<button type="button" @click="toAdd" :title="$t('overall.createPrometheusServer')"
class="nz-btn nz-btn-size-normal nz-btn-style-light margin-l-20" id="prom-add">
<i class="nz-icon-create-square nz-icon"></i>
</button>
</div>
<div class="pagination-top pagination-top-hide display-none"></div>
</div>
<!--<div class="top-tools">
<div class="top-tool-main-right">
<div class="top-tool-search">
<search-input :searchMsg="searchMsg" @search="search"></search-input>
@@ -34,19 +47,12 @@
<i class="nz-icon-create-square nz-icon"></i>
</button>
</div>
</div>
<el-table :data="tableData" border :height="$tableHeight.normal" style="width: 100%;" ref="promTable" class="nz-table" v-scrollBar:el-table>
<el-table-column :resizable="false" v-for="(item, index) in tablelable" v-if="item.show" :width="item.width"
:key="`col-${index}`" :label="item.label">
<template slot-scope="scope" :column="item">
<!--<idc-config-box v-if="item.prop == 'idc'" ref="idcConfigBox"
:post-idc="JSON.parse(JSON.stringify(scope.row[item.prop]))" :is-edit="false"
placement="left" @after="getIdcData" :button-class="'checkbox-edit'">
<template v-slot:optionZone>
<span class="link" @click="closeAllPop">{{scope.row[item.prop].name}}</span>
</template>
</idc-config-box>-->
<span v-if="item.prop == 'idc'" >{{scope.row[item.prop].name}}</span>
</div>-->
<el-table :data="tableData" border v-show="mainResizeShow" :height="mainTableHeight" style="width: 100%;" ref="promTable" class="nz-table" v-scrollBar:el-table>
<el-table-column :resizable="false" v-for="(item, index) in tablelable" v-if="item.show" :width="item.width"
:key="`col-${index}`" :label="item.label">
<template slot-scope="scope" :column="item">
<span v-if="item.prop == 'idc'" >{{scope.row[item.prop].name}}</span>
<span v-else-if="item.prop == 'type'">
{{scope.row[item.prop] == '1' ? 'Global' : ''}}
@@ -112,32 +118,15 @@
<el-form class="right-box-form" :model="promServer" label-position="top" label-width="80px" :rules="rules"
ref="promServerForm">
<!--DC start-->
<el-form-item label="DC" prop="idc.name">
<el-form-item :label="$t('config.dc.dc')" prop="idc.name">
<div class="right-box-form-content">
<!-- <el-select class="right-box-row-with-btn" value-key="id" popper-class="config-dropdown"-->
<!-- v-model="promServer.idc" placeholder="" v-if="rightBox.isEdit" size="small">-->
<el-select value-key="id" popper-class="config-dropdown"
v-model="promServer.idc" placeholder="" v-if="rightBox.isEdit" size="small">
<el-option @click.native="blurEditIdc()" v-for="item in idcData" :key="item.id" :label="item.name"
:value="item" :id="'prom-edit-idc-op-'+item.id">
<span class="config-dropdown-label-txt">{{item.name}}</span>
<!-- <div class="config-dropdown-label-icons">-->
<!-- <span class="config-dropdown-btn config-dropdown-btn-delete" @click.stop="toDelIdc(item)"-->
<!-- :id="'prom-edit-idc-op-del-'+item.id"><i class="el-icon-delete"></i></span>-->
<!-- <idc-config-box :post-idc="item" placement="left" @after="getIdcData"-->
<!-- :button-class="'config-dropdown-btn'">-->
<!-- <template v-slot:optionZone>-->
<!-- <i class="nz-icon nz-icon-edit"></i>-->
<!-- </template>-->
<!-- </idc-config-box>-->
<!-- </div>-->
</el-option>
</el-select>
<!-- <div class="right-box-row-btn" v-if="rightBox.isEdit">-->
<!-- <idc-config-box placement="left" @after="getIdcData"></idc-config-box>-->
<!-- </div>-->
<div class="right-box-form-content-txt" v-if="!rightBox.isEdit">{{promServer.idc.name}}</div>
</div>
</el-form-item>
@@ -201,6 +190,18 @@
name: "prom",
data() {
return {
//底部上滑框相关
mainTableHeight: this.$tableHeight.normal, //主列表table高度
showSubList: false, //是否展示二级列表
targetTab: '', //展示二级列表中的哪个页签
showElementSet: false, //控制自定义列的弹框
inTransform: false, //搜索框相关，搜索条件下拉框是否在transform里
mainResizeShow: true, //dom高度改变时部分内容是否展示
subResizeShow: true,
isFullScreen: false,
promDetail: [],
//底部上滑框相关end
tableId: 'promTable', //需要分页的table的id，用于记录每页数量
showTopBtn: false,
rightBox: { //弹出框相关
@@ -345,6 +346,117 @@
}
},
methods: {
// 鼠标拖动二级列表
listResize(e) {
let mainListDom = document.querySelector(".main-list-with-sub"); //主列表
let subListDom = document.querySelector(".sub-list"); //副列表
let contentRightDom = document.querySelector(".content-right"); //右侧内容区
let contentRightHeight = contentRightDom.offsetHeight;//可视高度
//得到点击时俩dom的初始高度：
let mainInitialHeight = mainListDom.offsetHeight;
let subInitialHeight = subListDom.offsetHeight;
//点击时鼠标的Y轴位置
let mouseInitialY = e.clientY;
let _this = this;
document.onmousemove = (e) => {
e.preventDefault();
//得到鼠标拖动的距离
let mouseMoveY = Math.abs(e.clientY - mouseInitialY);
//往上方拖动：
if (e.clientY < mouseInitialY) {
mainListDom.style.height = mainInitialHeight-mouseMoveY+'px';
subListDom.style.height = subInitialHeight+mouseMoveY+'px';
}
//往下方拖动：
if (e.clientY > mouseInitialY) {
mainListDom.style.height = mainInitialHeight+mouseMoveY+'px';
subListDom.style.height = subInitialHeight-mouseMoveY+'px';
}
// 主、副列表最小高度限制为15px
if(parseInt(mainListDom.style.height) >= contentRightHeight-15){
mainListDom.style.height = contentRightHeight-15+'px';
}
if(parseInt(mainListDom.style.height) <= 15){
mainListDom.style.height = 15+'px';
}
if(parseInt(subListDom.style.height) >= contentRightHeight-15){
subListDom.style.height = contentRightHeight-15+'px';
}
if(parseInt(subListDom.style.height) <= 15){
subListDom.style.height = 15+'px';
}
//当主副列表可视区域小于一定值时，不展示内容
if(parseInt(mainListDom.style.height) <= 100){
if (_this.mainResizeShow) {
_this.mainResizeShow = false;
}
} else {
if (!_this.mainResizeShow) {
_this.mainResizeShow = true;
}
}
if(parseInt(subListDom.offsetHeight) <= 100){
if (_this.subResizeShow) {
_this.subResizeShow = false;
}
} else {
if (!_this.subResizeShow) {
_this.subResizeShow = true;
}
}
};
document.onmouseup = () => {
document.onmousemove = null;
}
},
exitFullScreen() {
let contentRightDom = document.querySelector(".content-right"); //右侧内容区
let contentRightHeight = contentRightDom.offsetHeight;//可视高度
//主列表
document.querySelector(".main-list-with-sub").style.height = this.mainListHeight ? this.mainListHeight + 'px' : 'calc(50% - 4px)';
//副列表
document.querySelector(".sub-list").style.height = this.mainListHeight ? contentRightHeight-this.mainListHeight-9 + 'px' : 'calc(50% - 4px)';
setTimeout(() => {
this.isFullScreen = false;
if (document.querySelector(".main-list-with-sub").offsetHeight >= 100) {
this.mainResizeShow = true;
}
if (document.querySelector(".sub-list").offsetHeight >= 100) {
this.subResizeShow = true;
}
}, 210);
},
fullScreen() {
let contentRightDom = document.querySelector(".content-right"); //右侧内容区
let contentRightHeight = contentRightDom.offsetHeight;//可视高度
this.isFullScreen = true;
//主列表
this.mainListHeight = document.querySelector(".main-list-with-sub").offsetHeight; //记录全屏前主列表的高度
document.querySelector(".main-list-with-sub").style.height = '0';
this.mainResizeShow = false;
//副列表
document.querySelector(".sub-list").style.height = contentRightHeight + 'px';
},
convertToDetail(obj) {
let detail = [];
detail.push({label: this.$t("config.dc.dc"), value: obj.idc.name});
detail.push({label: "Host", value: obj.host});
detail.push({label: "Port", value: obj.port});
let type = "";
for (let i = 0; i < this.typeData.length; i++) {
if (obj.key == this.typeData[i].type) {
type = this.typeData[i].value;
break;
}
}
detail.push({label: this.$t('config.promServer.type'), value: type});
return detail;
},
elementsetShow(s, e) {
var eventfixed = {
shezhi: 0,
@@ -403,9 +515,11 @@
},
detail: function (u) {
this.promServer = Object.assign({}, u);
this.rightBox.isEdit = false;
/*this.rightBox.isEdit = false;
this.rightBox.title = "Prometheus Server ID：" + u.id;
this.rightBox.show = true;
this.rightBox.show = true;*/
this.targetTab = "detail";
this.showSubList = true;
},
toAdd: function () {
this.cleanPromServer();
@@ -676,9 +790,57 @@
? JSON.parse(localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path))
: this.tableTitle;
},
watch: {
'promServer.idc': function (n, o) {
this.promServer.idcId = n.id;
},
promServer: {
deep: true,
handler(n) {
this.promDetail = this.convertToDetail(n);
}
},
showSubList(n) {
this.inTransform = n;
if (!n) {
this.mainTableHeight = this.$tableHeight.normal; //重置table的高度
this.isFullScreen = false;
//移动分页组件的位置
let paginationTop = document.querySelector(".pagination-top");
let paginationBottom = document.querySelector(".pagination-bottom");
paginationTop.classList.remove("display-none");
if (paginationTop.classList.contains("pagination-top-show")) {
paginationTop.classList.remove("pagination-top-show");
}
if (!paginationTop.classList.contains("pagination-top-hide")) {
paginationTop.classList.add("pagination-top-hide");
}
setTimeout(() => {
paginationTop.classList.add("display-none");
paginationBottom.appendChild(paginationTop.removeChild(document.querySelector(".pagination")));
}, 210);
// 主列表恢复全屏
this.mainResizeShow = this.subResizeShow = true;
document.querySelector('.main-list').style.height = "";
//副列表高度清空
document.querySelector(".sub-list").style.height = '';
} else {
this.mainTableHeight = this.$tableHeight.openSubList.mainList; //重置table高度
//移动分页组件的位置
let paginationTop = document.querySelector(".pagination-top");
paginationTop.appendChild(document.querySelector(".pagination-bottom").removeChild(document.querySelector(".pagination")));
paginationTop.classList.remove("display-none");
setTimeout(() => {
if (paginationTop.classList.contains("pagination-top-hide")) {
paginationTop.classList.remove("pagination-top-hide");
}
if (!paginationTop.classList.contains("pagination-top-show")) {
paginationTop.classList.add("pagination-top-show");
}
}, 210);
}
}
}
}

2
nezha-fronted/src/components/page/dashboard/panel.vue
View File

@@ -86,7 +86,7 @@
</div>
</el-scrollbar>
</div>
<button class="to-top" v-show="showTopBtn" @click="toTop('el', $refs.dashboardScrollbar.wrap)"><i class="nz-icon nz-icon-top"></i></button>
<button class="to-top" v-show="showTopBtn" @click="$toTop('el', $refs.dashboardScrollbar.wrap)"><i class="nz-icon nz-icon-top"></i></button>
</div>
<panel-box :panel="panel" @reload="panelReload" @reloadForDel="panelReloadForDel" ref="panelBox"></panel-box>

4
nezha-fronted/src/components/page/project/project.vue
View File

@@ -147,7 +147,7 @@
<div class="pagination-bottom" v-show="tableShow == 1">
<Pagination :tableId="tableId" v-cloak :pageObj="endpointPageObj" @pageNo='endpointPageNo' @pageSize='endpointPageSize' ref="endpointPagination"></Pagination>
</div>
<button class="to-top" v-show="showTopBtn1 && mainResizeShow" @click="toTop('ps', 0)"><i class="nz-icon nz-icon-top"></i></button>
<button class="to-top" v-show="showTopBtn1 && mainResizeShow" @click="$toTop('ps', 0)"><i class="nz-icon nz-icon-top"></i></button>
</div>
<!-- 副列表 endpoint query-->
@@ -251,7 +251,7 @@
width="180">
</el-table-column>
</el-table>
<button class="to-top" v-show="showTopBtn2 && subResizeShow" @click="toTop('ps', 1)"><i class="nz-icon nz-icon-top"></i></button>
<button class="to-top" v-show="showTopBtn2 && subResizeShow" @click="$toTop('ps', 1)"><i class="nz-icon nz-icon-top"></i></button>
</div>
</div>

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

@@ -15,6 +15,7 @@ import router from './router'
import VueResource from 'vue-resource'
import axios from 'axios';
import {post, get, put, del} from './http.js'
import {toTop, clickoutside, scrollBar} from './tools.js'
import Pagination from "./components/common/pagination"; //引入全局分页组件
import searchInput from "./components/common/searchInput"; //搜索框组件
@@ -38,7 +39,6 @@ import selectArea from "./components/common/popBox/selectArea"; //dc弹框
import alertMessageBox from "./components/common/bottomBox/alertMessageBox"; //alertMessage上滑框
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";
import mibBox from "./components/common/rightBox/mibBox";
@@ -72,6 +72,7 @@ Vue.prototype.$post = post;
Vue.prototype.$get = get;
Vue.prototype.$put = put;
Vue.prototype.$delete = del;
Vue.prototype.$toTop = toTop; //toTop置顶按钮方法
Vue.prototype.$tableHeight = { //列表页表格的高度
normal: 'calc(100% - 100px)', //常规高度，特例在下方定义
openSubList: { //打开二级列表后的高度
@@ -80,181 +81,16 @@ Vue.prototype.$tableHeight = { //列表页表格的高度
},
noPagination: 'calc(100% - 60px)', //特例：没有翻页组件
};
Vue.prototype.toTop = (type, wrap) => { //top按钮公共方法
if (type == 'el') {
let currentTop = wrap.scrollTop;
let interval = currentTop/10;
let intervalFunc = setInterval(function(){ //花200ms分10次回到顶部，模拟动画效果
if (currentTop == 0) {
clearInterval(intervalFunc);
} else {
currentTop = (currentTop - interval) < interval*0.5 ? 0 : currentTop - interval;
wrap.scrollTop = currentTop;
}
}, 20);
} else {
let els = document.querySelectorAll(".el-table__body-wrapper");
if (wrap || wrap == 0) { //指定index的table__body
let currentTop = els[wrap].scrollTop;
let interval = currentTop/10;
let intervalFunc = setInterval(function(){ //花200ms分10次回到顶部，模拟动画效果
if (currentTop == 0) {
clearInterval(intervalFunc);
} else {
currentTop = (currentTop - interval) < interval*0.5 ? 0 : currentTop - interval;
els[wrap].scrollTop = currentTop;
}
}, 20);
} else { //所有table__body
for (let i = 0; i < els.length; i++) {
let currentTop = els[i].scrollTop;
let interval = currentTop/10;
let intervalFunc = setInterval(function(){ //花200ms分10次回到顶部，模拟动画效果
if (currentTop == 0) {
clearInterval(intervalFunc);
} else {
currentTop = (currentTop - interval) < interval*0.5 ? 0 : currentTop - interval;
els[i].scrollTop = currentTop;
}
}, 20);
}
}
}
};
Vue.config.productionTip = false;
Vue.use(ElementUI);
Vue.use(Vuex);
Vue.use(VueResource);
const el_scrollBar = el => {
//在元素上加点私货，名字随便取，确保不会和已有属性重复即可，我取名叫做_ps_
if (el._ps_ instanceof PerfectScrollbar) {
el._ps_.update();
} else {
//el上挂一份属性
el._ps_ = new PerfectScrollbar(el, {minScrollbarLength: 25});
}
};
Vue.directive("scrollBar", {
inserted(el, binding, vnode) {
const { arg } = binding;
if (arg === "el-table") {
el = el.querySelector(".el-table__body-wrapper");
!el && console.warn("未发现className为el-table__body-wrapper的dom");
} else if (arg === "el-dropdown") {
el = el.querySelector(".el-dropdown-menu");
!el && console.warn("未发现className为el-dropdown-menu的dom");
} else if (arg == "legend") {
el = el.querySelector(".legend-container");
!el && console.warn("未发现className为legend-container的dom");
}
/*指令*/
Vue.directive('clickoutside', clickoutside);
Vue.directive('scrollBar', scrollBar);
// 启用x轴后不让原生滚动条出来作乱
vnode.context.$nextTick(() => {
if (arg === "xterm") {
el = el.querySelector(".xterm-viewport");
!el && console.warn("未发现className为xterm-viewport的dom");
}
el.classList.add("ps");
el.addEventListener("ps-scroll-y", () =>
el.classList.add("ps")
);
el.addEventListener("ps-scroll-x", () =>
el.classList.add("ps")
);
//el上挂一份属性
el_scrollBar(el);
});
const rules = ["fixed", "absolute", "relative"];
if (!rules.includes(window.getComputedStyle(el, null).position)) {
console.error(
`perfect-scrollbar所在的容器的position属性必须是以下之一：${rules.join(
"、"
)}`
);
}
},
componentUpdated(el, binding, vnode, oldVnode) {
const { arg } = binding;
if (arg === "el-table") {
el = el.querySelector(".el-table__body-wrapper");
!el && console.warn("未发现className为el-table__body-wrapper的dom");
} else if (arg === "el-dropdown") {
el = el.querySelector(".el-dropdown-menu");
!el && console.warn("未发现className为el-dropdown-menu的dom");
}else if (arg === "xterm") {
el = el.querySelector(".xterm-viewport");
!el && console.warn("未发现className为xterm-viewport的dom");
}
setTimeout(() => {
el.classList.add("ps");
el.classList.add("ps--active-y");
el._ps_.update();
}, 1500)
try {
vnode.context.$nextTick(() => {
el_scrollBar(el);
});
} catch (error) {
console.error(error);
el_scrollBar(el);
}
},
});
const exceptClassName = ["config-dropdown", "nz-pop", "el-picker", "chart-box-dropdown", 'metric-dropdown', 'el-cascader__dropdown', "asset-dropdown", "no-style-class", 'el-message-box']; //clickoutside排除的class(白名单) no-style-class：没有任何样式的class
const clickoutside = {
// 初始化指令
bind(el, binding, vnode) {
function documentHandler(e) {
if (el.contains(e.target)) {
return false;
} else {
//console.info(e)
let flag = true;
top: for (let i = 0; i < e.path.length; i++) {
for (let j = 0; j < exceptClassName.length; j++) {
if (e.path[i].className && e.path[i].className.indexOf(exceptClassName[j]) != -1) {
flag = false;
break top;
}
}
}
if (!flag) {
return false;
}
}
// 判断指令中是否绑定了函数
if (binding.expression) {
// 如果绑定了函数 则调用那个函数，此处binding.value就是handleClose方法
if (binding.arg) {
binding.value(e, binding.arg);
} else {
binding.value(e);
}
}
}
// 给当前元素绑定个私有变量，方便在unbind中可以解除事件监听
el.__vueClickOutside__ = documentHandler;
document.addEventListener('mousedown', documentHandler);
},
unbind(el, binding) {
// 解除事件监听
document.removeEventListener('mousedown', el.__vueClickOutside__);
delete el.__vueClickOutside__;
},
};
Vue.directive('clickoutside',
clickoutside
)
/* eslint-disable no-new */
window.vm = new Vue({
el: '#app',
router,
@@ -265,18 +101,6 @@ window.vm = new Vue({
})
export default vm;
/*router.beforeEach((to, from, next) => {
if (to.path === '/login') {
next()
} else {
let token = sessionStorage.getItem('nz-token');
if (token) {
next()
} else {
next({ path: '/dashboard' })
}
}
})*/
/* 重写组件内容 */
const elUi = require("element-ui");

168
nezha-fronted/src/tools.js Normal file
View File

@@ -0,0 +1,168 @@
import PerfectScrollbar from "perfect-scrollbar";
//top置顶按钮公共方法
export function toTop(type, wrap) {
if (type == 'el') {
let currentTop = wrap.scrollTop;
let interval = currentTop/10;
let intervalFunc = setInterval(function(){ //花200ms分10次回到顶部，模拟动画效果
if (currentTop == 0) {
clearInterval(intervalFunc);
} else {
currentTop = (currentTop - interval) < interval*0.5 ? 0 : currentTop - interval;
wrap.scrollTop = currentTop;
}
}, 20);
} else {
let els = document.querySelectorAll(".el-table__body-wrapper");
if (wrap || wrap == 0) { //指定index的table__body
let currentTop = els[wrap].scrollTop;
let interval = currentTop/10;
let intervalFunc = setInterval(function(){ //花200ms分10次回到顶部，模拟动画效果
if (currentTop == 0) {
clearInterval(intervalFunc);
} else {
currentTop = (currentTop - interval) < interval*0.5 ? 0 : currentTop - interval;
els[wrap].scrollTop = currentTop;
}
}, 20);
} else { //所有table__body
for (let i = 0; i < els.length; i++) {
let currentTop = els[i].scrollTop;
let interval = currentTop/10;
let intervalFunc = setInterval(function(){ //花200ms分10次回到顶部，模拟动画效果
if (currentTop == 0) {
clearInterval(intervalFunc);
} else {
currentTop = (currentTop - interval) < interval*0.5 ? 0 : currentTop - interval;
els[i].scrollTop = currentTop;
}
}, 20);
}
}
}
}
/*弹窗点击外部后关闭*/
const exceptClassName = ["config-dropdown", "nz-pop", "el-picker", "chart-box-dropdown", 'metric-dropdown', 'el-cascader__dropdown', "asset-dropdown", "no-style-class", 'el-message-box']; //clickoutside排除的class(白名单) no-style-class：没有任何样式的class
export const clickoutside = {
// 初始化指令
bind(el, binding, vnode) {
function documentHandler(e) {
if (el.contains(e.target)) {
return false;
} else {
//console.info(e)
let flag = true;
top: for (let i = 0; i < e.path.length; i++) {
for (let j = 0; j < exceptClassName.length; j++) {
if (e.path[i].className && e.path[i].className.indexOf(exceptClassName[j]) != -1) {
flag = false;
break top;
}
}
}
if (!flag) {
return false;
}
}
// 判断指令中是否绑定了函数
if (binding.expression) {
// 如果绑定了函数 则调用那个函数，此处binding.value就是handleClose方法
if (binding.arg) {
binding.value(e, binding.arg);
} else {
binding.value(e);
}
}
}
// 给当前元素绑定个私有变量，方便在unbind中可以解除事件监听
el.__vueClickOutside__ = documentHandler;
document.addEventListener('mousedown', documentHandler);
},
unbind(el, binding) {
// 解除事件监听
document.removeEventListener('mousedown', el.__vueClickOutside__);
delete el.__vueClickOutside__;
},
};
/*el-table自定义滚动条*/
const el_scrollBar = el => {
if (el._ps_ instanceof PerfectScrollbar) {
el._ps_.update();
} else {
//el上挂一份属性
el._ps_ = new PerfectScrollbar(el, {minScrollbarLength: 25});
}
};
export const scrollBar = {
inserted(el, binding, vnode) {
const { arg } = binding;
if (arg === "el-table") {
el = el.querySelector(".el-table__body-wrapper");
!el && console.warn("未发现className为el-table__body-wrapper的dom");
} else if (arg === "el-dropdown") {
el = el.querySelector(".el-dropdown-menu");
!el && console.warn("未发现className为el-dropdown-menu的dom");
} else if (arg == "legend") {
el = el.querySelector(".legend-container");
!el && console.warn("未发现className为legend-container的dom");
}
// 启用x轴后不让原生滚动条出来作乱
vnode.context.$nextTick(() => {
if (arg === "xterm") {
el = el.querySelector(".xterm-viewport");
!el && console.warn("未发现className为xterm-viewport的dom");
}
el.classList.add("ps");
el.addEventListener("ps-scroll-y", () =>
el.classList.add("ps")
);
el.addEventListener("ps-scroll-x", () =>
el.classList.add("ps")
);
//el上挂一份属性
el_scrollBar(el);
});
const rules = ["fixed", "absolute", "relative"];
if (!rules.includes(window.getComputedStyle(el, null).position)) {
console.error(
`perfect-scrollbar所在的容器的position属性必须是以下之一：${rules.join(
"、"
)}`
);
}
},
componentUpdated(el, binding, vnode, oldVnode) {
const { arg } = binding;
if (arg === "el-table") {
el = el.querySelector(".el-table__body-wrapper");
!el && console.warn("未发现className为el-table__body-wrapper的dom");
} else if (arg === "el-dropdown") {
el = el.querySelector(".el-dropdown-menu");
!el && console.warn("未发现className为el-dropdown-menu的dom");
}else if (arg === "xterm") {
el = el.querySelector(".xterm-viewport");
!el && console.warn("未发现className为xterm-viewport的dom");
}
setTimeout(() => {
el.classList.add("ps");
el.classList.add("ps--active-y");
el._ps_.update();
}, 1500)
try {
vnode.context.$nextTick(() => {
el_scrollBar(el);
});
} catch (error) {
console.error(error);
el_scrollBar(el);
}
},
};