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

perf: asset、project右上角按钮组俩按钮错乱问题等

Browse Source 
1.asset、project右上角按钮组俩按钮错乱问题
2.alert-message和二级弹窗搜索条件更新
This commit is contained in:
陈劲松
2020-04-21 22:39:07 +08:00
parent 00d662327c
commit 8282671572
10 changed files with 181 additions and 63 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
nezha-fronted/src/assets/stylus/index.scss
View File

@@ -5,7 +5,7 @@ $content-right-background-color: #fcfcfc; //右侧背景色
$header-text-color: #e5e5e5; // header默认字色 $header-text-color: #e5e5e5; // header默认字色
$header-text-color-active: #fff; // header高亮字色 $header-text-color-active: #fff; // header高亮字色
$header-text-color-hover: #444; //header hover字色 $header-text-color-hover: #444; //header hover字色
$header-background-color-hover: #666; //菜单鼠标悬停背景色 $header-background-color-hover: #3d4959; //菜单鼠标悬停背景色
$btn-normal-background-color: linear-gradient(180deg, #F5B93E 0%, #EE9D3F 100%); //橙色按钮背景颜色 $btn-normal-background-color: linear-gradient(180deg, #F5B93E 0%, #EE9D3F 100%); //橙色按钮背景颜色
$btn-normal-background-color-hover: #EE9D3F ; //橙色按钮hover背景颜色 $btn-normal-background-color-hover: #EE9D3F ; //橙色按钮hover背景颜色

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

@@ -539,7 +539,7 @@ li{
} }
.top-tools .top-tool-search { .top-tools .top-tool-search {
width: 260px; width: 260px;
margin: -2px 0 0 0; /*margin: -2px 0 0 0;*/
} }
.top-tools .top-tool-btn-txt .nz-icon{ .top-tools .top-tool-btn-txt .nz-icon{
display: inline-block; display: inline-block;
@@ -569,9 +569,9 @@ li{
.top-tool-main-left>.panel-dropdown-title { .top-tool-main-left>.panel-dropdown-title {
margin-top: -2px; margin-top: -2px;
} }
.top-tool-main-right>.nz-btn, .top-tool-main-right-to-left>.nz-btn, .top-tool-main-right>.nz-btn-group, .top-tool-main-right>.panel-calendar { /*.top-tool-main-right>.nz-btn, .top-tool-main-right-to-left>.nz-btn, .top-tool-main-right>.nz-btn-group, .top-tool-main-right>.panel-calendar {
margin-top: -2px; margin-top: -2px;
} }*/
.top-tool-main-right-to-left { .top-tool-main-right-to-left {
right: 100% !important; right: 100% !important;
transform: translateX(100%); transform: translateX(100%);
@@ -1708,10 +1708,46 @@ li{
/*export相关*/ /*export相关*/
.dropdownBtn .el-dropdown__caret-button{ .export-dropdown-btn {
position: relative;
}
.endpoint-query-dropdown {
position: absolute;
right: 0;
top: 31px;
}
.export-dropdown {
width: 90px;
right: 0;
left: unset !important;
top: 27px;
}
.endpoint-query-dropdown::after, .export-dropdown::after {
content: '';
display: block;
width:0;
height:0;
overflow: hidden;
font-size: 0;
line-height: 0;
border: 5px;
border-style: dashed dashed solid dashed;
border-color: transparent transparent #fff transparent;
position: absolute;
right: 3px;
bottom: 0;
}
.export-dropdown::after {
transform: translate(-50%, -54px);
}
.endpoint-query-dropdown::after {
transform: translate(-50%, -45px);
}
/*.dropdownBtn .el-dropdown__caret-button{
top:0px !important; top:0px !important;
left: -1px; left: -1px;
} }*/
.export-xlsx .el-dialog__body{ .export-xlsx .el-dialog__body{
padding: 10px 20px 20px 20px; padding: 10px 20px 20px 20px;
} }

58
nezha-fronted/src/components/common/bottomBox/tabs/alertMessageTab.vue
View File

@@ -236,10 +236,19 @@
label: 'alertName', label: 'alertName',
disabled: false disabled: false
}, { }, {
id: 3, name: this.$t('project.project.project'),
name: this.$t('alert.list.type'), type: 'project',
type: 'select', label: 'project',
label: 'alertType', disabled: false
}, {
name: this.$t('project.module.module'),
type: 'module',
label: 'module',
disabled: false
}, {
name: this.$t('project.endpoint.endpoint'),
type: 'input',
label: 'endpointId',
disabled: false disabled: false
}, { }, {
id: 4, id: 4,
@@ -252,7 +261,7 @@
name: this.$t('asset.asset'), name: this.$t('asset.asset'),
type: 'asset', type: 'asset',
label: 'asset', label: 'asset',
disabled: true disabled: false
}, { }, {
id: 12, id: 12,
name: this.$t('alert.list.state'), name: this.$t('alert.list.state'),
@@ -368,6 +377,20 @@
this.exportExcel(this.searchLabel); this.exportExcel(this.searchLabel);
this.importBox.show = false; this.importBox.show = false;
}, },
getTimeString:function(){
let split='-';
let date=new Date();
let year=date.getFullYear();
let month=this.formatNum(date.getMonth()+1);
let day=this.formatNum(date.getDate());
let hours=this.formatNum(date.getHours());
let minutes=this.formatNum(date.getMinutes());
let seconds=this.formatNum(date.getSeconds());
return year + split + month + split + day + ' ' + hours + split + minutes + split + seconds;
},
formatNum:function(num){
return num>9?num:'0'+num;
},
exportAll:function(){ exportAll:function(){
let temp = JSON.parse(JSON.stringify(this.searchLabel)); let temp = JSON.parse(JSON.stringify(this.searchLabel));
temp.pageSize = -1; temp.pageSize = -1;
@@ -402,16 +425,18 @@
this.loading = true; this.loading = true;
this.$set(this.searchLabel, "pageNo", this.pageObj.pageNo); this.$set(this.searchLabel, "pageNo", this.pageObj.pageNo);
this.$set(this.searchLabel, "pageSize", this.pageObj.pageSize); this.$set(this.searchLabel, "pageSize", this.pageObj.pageSize);
this.$get('alert/message', this.searchLabel).then(response => { setTimeout(() => {
this.loading = false; this.$get('alert/message', this.searchLabel).then(response => {
if (response.code == 200) { this.loading = false;
this.tableData = response.data.list; if (response.code == 200) {
this.tableData.forEach((item) => { this.tableData = response.data.list;
item.labels = JSON.parse(item.labels); this.tableData.forEach((item) => {
}); item.labels = JSON.parse(item.labels);
this.pageObj.total = response.data.total; });
} this.pageObj.total = response.data.total;
}); }
});
}, 1000);
}, },
pageNo(val) { pageNo(val) {
this.pageObj.pageNo = val; this.pageObj.pageNo = val;
@@ -470,8 +495,7 @@
if (this.from == "alertRule") { if (this.from == "alertRule") {
this.searchLabel.ruleId = this.obj.id; this.searchLabel.ruleId = this.obj.id;
} else if (this.from == "asset") { } else if (this.from == "asset") {
this.searchLabel.type = 3; this.searchLabel.assetId = this.obj.id;
this.searchLabel.linkId = this.obj.id;
} }
this.pageObj.pageNo = 1; this.pageObj.pageNo = 1;
for (let item in searchObj) { for (let item in searchObj) {

30
nezha-fronted/src/components/common/bottomBox/tabs/endpointQueryTab.vue
View File

@@ -33,7 +33,20 @@
> >
</el-date-picker><button @click="changeTime(10)" class="nz-btn nz-btn-size-normal nz-btn-style-light change-time-height nz-input-group-append"><i class="el-icon-d-arrow-right"></i></button> </el-date-picker><button @click="changeTime(10)" class="nz-btn nz-btn-size-normal nz-btn-style-light change-time-height nz-input-group-append"><i class="el-icon-d-arrow-right"></i></button>
</div> </div>
<el-dropdown split-button type="primary" size="mini" class="dropdownBtn" @click="viewGraph"> <div class="nz-btn-group nz-btn-group-size-normal nz-btn-group-light" style="height: 24px;">
<button class="nz-btn nz-btn-size-normal nz-btn-style-light">
<i class="nz-icon nz-icon-chart" :class="{'control-icon-unchecked':selectedEndpoints.length<1,'control-icon-checked':selectedEndpoints.length>0}"></i>
</button><button @mouseenter="dropdownHandler(true)" @mouseleave="dropdownHandler(false)" class="nz-btn nz-btn-size-normal nz-btn-style-light export-dropdown-btn" id="browser-go">
<i class="el-icon-arrow-down"></i>
<transition name="el-zoom-in-top">
<div v-if="dropdownShow" class="endpoint-query-dropdown el-popover">
<span style="padding-top: 2px">{{$t('project.endpoint.hideSameLabels')}}</span>
<el-switch v-model="hideSameLabels" active-color="#ee9d3f" size="small"></el-switch>
</div>
</transition>
</button>
</div>
<!--<el-dropdown split-button type="primary" size="mini" class="dropdownBtn" @click="viewGraph">
<i class="nz-icon nz-icon-chart" :class="{'control-icon-unchecked':selectedEndpoints.length<1,'control-icon-checked':selectedEndpoints.length>0}"></i> <i class="nz-icon nz-icon-chart" :class="{'control-icon-unchecked':selectedEndpoints.length<1,'control-icon-checked':selectedEndpoints.length>0}"></i>
<el-dropdown-menu slot="dropdown" style="padding:10px 4px 10px 10px;"> <el-dropdown-menu slot="dropdown" style="padding:10px 4px 10px 10px;">
<el-row> <el-row>
@@ -45,7 +58,7 @@
</el-col> </el-col>
</el-row> </el-row>
</el-dropdown-menu> </el-dropdown-menu>
</el-dropdown> </el-dropdown>-->
</div> </div>
</div> </div>
<div class="table-header-inner" @click="clearSelectedMetrics"><span><i style="font-size: 12px;margin-left: 2px;" class="nz-icon nz-icon-close " :class="{'control-icon-unchecked':selectedEndpoints.length<1,'control-icon-checked':selectedEndpoints.length>0}"></i></span></div> <div class="table-header-inner" @click="clearSelectedMetrics"><span><i style="font-size: 12px;margin-left: 2px;" class="nz-icon nz-icon-close " :class="{'control-icon-unchecked':selectedEndpoints.length<1,'control-icon-checked':selectedEndpoints.length>0}"></i></span></div>
@@ -182,7 +195,7 @@
import loading from "../../loading"; import loading from "../../loading";
import bus from "../../../../libs/bus"; import bus from "../../../../libs/bus";
import chartDataFormat from "../../../charts/chartDataFormat"; import chartDataFormat from "../../../charts/chartDataFormat";
var timeout;
export default { export default {
name: "endpointQueryTab", name: "endpointQueryTab",
components: { components: {
@@ -197,6 +210,7 @@
let temp = this; let temp = this;
return { return {
tableHover: false, tableHover: false,
dropdownShow: false,
loading: false, loading: false,
showTopBtn: false, //主列表top按钮 showTopBtn: false, //主列表top按钮
currentEndpoint: {}, currentEndpoint: {},
@@ -576,6 +590,16 @@
} }
this.$refs.addChartModal.createData(-1, metricInfo); this.$refs.addChartModal.createData(-1, metricInfo);
}, },
dropdownHandler(show) {
if (show) {
clearTimeout(timeout);
this.dropdownShow = true;
} else {
timeout = setTimeout(() => {
this.dropdownShow = false;
}, 700);
}
},
createSuccess(type, response, param, panel) { createSuccess(type, response, param, panel) {
this.$confirm(this.$t("dashboard.metric.goPanelTip"),this.$t("tip.saveSuccess"), { this.$confirm(this.$t("dashboard.metric.goPanelTip"),this.$t("tip.saveSuccess"), {
confirmButtonText: this.$t("tip.yes"), confirmButtonText: this.$t("tip.yes"),

41
nezha-fronted/src/components/common/exportXLSX.vue
View File

@@ -1,13 +1,23 @@
<template> <template>
<div class="export-xlsx"> <div class="export-xlsx">
<div> <div class="nz-btn-group nz-btn-group-size-normal nz-btn-group-light">
<el-dropdown split-button type="primary" size="mini" class="dropdownBtn"> <slot name="optionZone"></slot><button @mouseenter="exportMenuHandler(true)" @mouseleave="exportMenuHandler(false)" class="nz-btn nz-btn-size-normal nz-btn-style-light export-dropdown-btn" id="browser-go">
<i class="el-icon-arrow-down"></i>
<transition name="el-zoom-in-top">
<ul class="el-dropdown-menu el-popper el-dropdown-menu--mini export-dropdown" v-if="exportShow">
<li @click="showImportBox(1)" class="el-dropdown-menu__item dropdown-content"><i class="el-icon-upload2"></i>import</li>
<li @click="showImportBox(2)" class="el-dropdown-menu__item dropdown-content"><i class="el-icon-download"></i>export</li>
</ul>
</transition>
</button>
<!--<el-dropdown split-button type="primary" size="mini" class="dropdownBtn">
<slot name="optionZone" class="option-button"></slot><el-dropdown-menu slot="dropdown"> <slot name="optionZone" class="option-button"></slot><el-dropdown-menu slot="dropdown">
<el-dropdown-item @click.native="showImportBox(1)" class="dropdown-content"><i class="el-icon-upload2"></i>{{$t('overall.importExcelLower')}}</el-dropdown-item> <el-dropdown-item @click.native="showImportBox(1)" class="dropdown-content"><i class="el-icon-upload2"></i>{{$t('overall.importExcelLower')}}</el-dropdown-item>
<el-dropdown-item @click.native="showImportBox(2)" class="dropdown-content"><i class="el-icon-download"></i>{{$t('overall.exportExcelLower')}}</el-dropdown-item> <el-dropdown-item @click.native="showImportBox(2)" class="dropdown-content"><i class="el-icon-download"></i>{{$t('overall.exportExcelLower')}}</el-dropdown-item>
</el-dropdown-menu> </el-dropdown-menu>
</el-dropdown> </el-dropdown>-->
</div> </div>
<div> <div>
<el-dialog :visible.sync="importBox.show" :title="importBox.title" :modal-append-to-body='false' :show-close="true" :width="importBox.width" @close="closeDialog" class="nz-dialog" :close-on-click-modal="importBox.type!=3"> <el-dialog :visible.sync="importBox.show" :title="importBox.title" :modal-append-to-body='false' :show-close="true" :width="importBox.width" @close="closeDialog" class="nz-dialog" :close-on-click-modal="importBox.type!=3">
<div v-if="importBox.type==1"> <div v-if="importBox.type==1">
@@ -88,6 +98,7 @@
<script> <script>
import axios from 'axios' import axios from 'axios'
var timeout;
export default { export default {
name: "exportXLSX", name: "exportXLSX",
props:{ props:{
@@ -97,12 +108,13 @@
}, },
data:function(){ data:function(){
return { return {
importBox:{show:false,title:this.$t('overall.importExcel'),type:1}, importBox:{show:false,title:this.$t('overall.importExcel'),type:1},
importFile:null, importFile:null,
importFileList:[], importFileList:[],
importResult:null, importResult:null,
} exportShow: false,
}
}, },
created(){ created(){
}, },
@@ -140,7 +152,16 @@
} }
}) })
} }
},
exportMenuHandler(show) {
if (show) {
clearTimeout(timeout);
this.exportShow = true;
} else {
timeout = setTimeout(() => {
this.exportShow = false;
}, 700);
}
}, },
closeDialog:function(){ closeDialog:function(){
this.importBox.show=false; this.importBox.show=false;

1
nezha-fronted/src/components/common/header.vue
View File

@@ -563,7 +563,6 @@
left: 18px; left: 18px;
} }
.header { .header {
background-image: linear-gradient(180deg, #565656 0%, #3C3C3C 100%);
box-shadow: 0 2px 4px 0 rgba(0,0,0,0.30); box-shadow: 0 2px 4px 0 rgba(0,0,0,0.30);
} }
.header .el-menu { .header .el-menu {

42
nezha-fronted/src/components/common/searchInput.vue
View File

@@ -770,7 +770,7 @@
objectInfo[val.label] = val.valnum; objectInfo[val.label] = val.valnum;
} else if (val.type == 'dc') { } else if (val.type == 'dc') {
objectInfo.idcId = val.valnum; objectInfo.idcId = val.valnum;
} else if (val.type == 'asset' && this.$route.path == "/project") { } else if (val.type == 'asset') {
objectInfo.assetId = val.valnum; objectInfo.assetId = val.valnum;
} else if (val.type == 'module') { } else if (val.type == 'module') {
objectInfo.moduleId = val.valnum; objectInfo.moduleId = val.valnum;
@@ -1045,7 +1045,7 @@
this.stop_click(e) this.stop_click(e)
} }
// 处理alertType--asset联动问题：删除alertType时，将asset也删除 // 处理alertType--asset联动问题：删除alertType时，将asset也删除
if (this.select_list[ind].label == 'alertType') { /*if (this.select_list[ind].label == 'alertType') {
for (let i = 0; i < this.select_list.length; i++) { for (let i = 0; i < this.select_list.length; i++) {
if (this.select_list[i].label == 'asset') { if (this.select_list[i].label == 'asset') {
this.close_selcet_list(i); this.close_selcet_list(i);
@@ -1058,7 +1058,7 @@
break; break;
} }
} }
} }*/
this.searchMsg.searchLabelList.forEach((val, key) => { this.searchMsg.searchLabelList.forEach((val, key) => {
if (this.select_list[ind].id == val.id) { if (this.select_list[ind].id == val.id) {
this.searchLabelList.splice(key + 1, 0, val); this.searchLabelList.splice(key + 1, 0, val);
@@ -1320,23 +1320,25 @@
mounted() { mounted() {
/*this.defaultItem ? this.select_list.push({name:this.defaultItem,label:this.defaultItem}) : ''; /*this.defaultItem ? this.select_list.push({name:this.defaultItem,label:this.defaultItem}) : '';
this.defaultValue != '' ? this.no_condition=this.defaultValue:'';*/ this.defaultValue != '' ? this.no_condition=this.defaultValue:'';*/
this.restructure_historyDate() this.restructure_historyDate();
if(this.$route.path=='/Objects_Objects'){ setTimeout(() => {
this.schelistget() if(this.$route.path=='/Objects_Objects'){
} this.schelistget();
if (this.$route.path == '/promServer') { }
this.getDcData(); if (this.$route.path == '/promServer') {
} this.getDcData();
if (this.$route.path == '/project' || this.$route.path == '/alertList' || this.$route.path == '/alertConfig') { }
this.getAssetData(); if (this.$route.path == '/project' || this.$route.path == '/alertList' || this.$route.path == '/alertConfig') {
} this.getAssetData();
if (this.$route.path == '/alertList') { }
this.getProjectData(); if (this.$route.path == '/alertList') {
this.getModuleData(); this.getProjectData();
} this.getModuleData();
if (this.$route.path == '/asset') { }
this.getModelData(); if (this.$route.path == '/asset') {
} this.getModelData();
}
}, 1000);
JSON.parse(JSON.stringify(this.searchMsg.searchLabelList)).forEach(val => { JSON.parse(JSON.stringify(this.searchMsg.searchLabelList)).forEach(val => {
if(val.name=='Protocol'){ if(val.name=='Protocol'){
this.schemaTypeSelect=val.doc.data this.schemaTypeSelect=val.doc.data

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

@@ -487,6 +487,15 @@
return num>9?num:'0'+num; return num>9?num:'0'+num;
}, },
exportExcel:function(params){ exportExcel:function(params){
for (let item in params) {
if (params[item]) {
if (item == "alertMessageState") {
this.$set(params, "state", params[item]);
} else{
this.$set(params, item, params[item]);
}
}
}
let temp=this; let temp=this;
if(!params){ if(!params){
params=temp.params; params=temp.params;
@@ -571,7 +580,6 @@
search: function (searchObj) { search: function (searchObj) {
this.searchLabel = {}; this.searchLabel = {};
this.pageObj.pageNo = 1; this.pageObj.pageNo = 1;
console.info(searchObj)
for (let item in searchObj) { for (let item in searchObj) {
if (searchObj[item]) { if (searchObj[item]) {
if (item == "alertMessageState") { if (item == "alertMessageState") {

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

@@ -99,11 +99,13 @@
export-url="/asset/export" export-url="/asset/export"
:params="searchLabel" :params="searchLabel"
@afterImport="getAssetData" @afterImport="getAssetData"
class="float-right"> >
<template slot="optionZone"> <template slot="optionZone">
<div class="export-left-btn" @click.stop="tagShow('showAdd')"> <button @click.stop="tagShow('showAdd')" :title="$t('overall.createAsset')" class="nz-btn nz-btn-size-normal nz-btn-style-light" id="asset-create-asset">
<i class="nz-icon nz-icon-create-square"></i></button>
<!--<div class="export-left-btn" @click.stop="tagShow('showAdd')">
<i class="nz-icon nz-icon-create-square" :title="$t('overall.createAsset')" ></i> <i class="nz-icon nz-icon-create-square" :title="$t('overall.createAsset')" ></i>
</div> </div>-->
</template> </template>
</export-excel> </export-excel>
</div> </div>

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

@@ -90,9 +90,11 @@
class="margin-l-20" class="margin-l-20"
> >
<template slot="optionZone"> <template slot="optionZone">
<div class="export-left-btn" @click.stop="toCreateEndpoint"> <button @click.stop="toCreateEndpoint" :title="$t('overall.createProject')" class="nz-btn nz-btn-size-normal nz-btn-style-light" id="project-create-project">
<i class="nz-icon nz-icon-create-square"></i></button>
<!--<div class="export-left-btn" @click.stop="toCreateEndpoint">
<i class="nz-icon nz-icon-create-square" :title="$t('overall.createProject')" ></i> <i class="nz-icon nz-icon-create-square" :title="$t('overall.createProject')" ></i>
</div> </div>-->
</template> </template>
</export-excel> </export-excel>
</div> </div>