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

Merge remote-tracking branch 'origin/codeCheck' into codeCheck

Browse Source
This commit is contained in:
陈劲松
2020-04-24 21:43:59 +08:00
parent 86f1b3742f f030ba4869
commit ebe7232671
15 changed files with 431 additions and 305 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1451,7 +1451,7 @@ li{
border-radius: 5px !important;
}
.line-chart-block-modal .el-dialog {
margin-top: 5% !important;
//margin-top: 5% !important;
}
.table-chart-dialog .el-dialog {
height: 80%;

1
nezha-fronted/src/components/charts/chart-list.vue
View File

@@ -587,6 +587,7 @@ export default {
let errorMsg = "";
res.forEach((response, innerPos) => {
if (response.status === 'success') {
errorMsg = "";
if (response.data.result) {
// console.log(response.data.result)
// 循环处理每个elements下获取的数据列

40
nezha-fronted/src/components/charts/chart-table.scss
View File

@@ -78,46 +78,6 @@
text-align: center;
width: 100%;
line-height: 28px;
.panel-info-corner {
color: #767980;
cursor: pointer;
position: absolute;
display: none;
left: 0;
width: 28px;
height: 28px;
z-index: 2;
top: 0;
}
.panel-info-corner--error {
display: block;
color: #fff;
}
.panel-info-corner .fa {
position: relative;
top: -6px;
left: -6px;
font-size: 75%;
z-index: 3;
}
.fa {
display: inline-block;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
}
.panel-info-corner--error .panel-info-corner-inner {
border-left: 28px solid #e02f44;
border-right: none;
border-bottom: 28px solid rgba(0,0,0,0);
}
.panel-info-corner-inner {
width: 0;
height: 0;
position: absolute;
left: 0;
bottom: 0;
}
.nz-chart-top{
width:100%;
}

21
nezha-fronted/src/components/charts/chart-table.vue
View File

@@ -20,7 +20,7 @@
<div class="clearfix chartTitle" :class="{'dragTitle':dragTitleShow}" :id="'chartTitle'+chartIndex">
<el-popover
v-if="isError"
close-delay="10"
:close-delay=10
placement="top-start"
trigger="hover"
popper-class="chart-error-popper">
@@ -72,8 +72,10 @@
<div slot="title">
<span class="nz-dialog-title">{{data.title}}</span>
<div class="float-right panel-calendar dialog-tool">
<!--
<el-date-picker prefix-icon=" " size="mini" class="nz-dashboard-picker" ref="calendar" format="yyyy/MM/dd HH:mm" @change="dateChange" v-model="searchTime" type="datetimerange" :picker-options="pickerOptions" :range-separator="$t('dashboard.panel.to')" :start-placeholder="$t('dashboard.panel.startTime')" :end-placeholder="$t('dashboard.panel.endTime')" align="right">
</el-date-picker>
</el-date-picker>-->
<time-picker ref="calendarPanel" class="nz-dashboard-picker" style="margin-top: -12px;" @change="dateChange"></time-picker>
<!--<button @click="refreshChart" type="button" class="nz-btn nz-btn-size-normal nz-btn-style-light"><i style="font-size: 14px;" class="el-icon-refresh-right"></i></button>-->
</div>
</div>
@@ -112,11 +114,13 @@ import bus from '../../libs/bus';
import {Loading} from 'element-ui';
import chartDataFormat from './chartDataFormat'
import loading from "../common/loading";
import timePicker from '../common/timePicker'
export default {
name: 'chartTable',
components: {
'loading': loading,
'time-picker':timePicker
},
props: {
// 看板id
@@ -216,7 +220,7 @@ export default {
}],
searchTime: [new Date().setHours(new Date().getHours() - 1), new Date()],//全屏显示的时间
oldSearchTime: [],
pickerOptions: {
/*pickerOptions: {
shortcuts: [{
text: this.$t("dashboard.panel.recOne"),
onClick(picker) {
@@ -295,7 +299,7 @@ export default {
picker.$emit('pick', [start, end]);
}
}]
},
},*/
};
},
created() {
@@ -543,6 +547,7 @@ export default {
//this.filter.start_time = bus.timeFormate(this.searchTime[0], 'yyyy-MM-dd hh:mm:ss');
//this.filter.end_time = bus.timeFormate(this.searchTime[1], 'yyyy-MM-dd hh:mm:ss');
//this.showTable = false;
this.searchTime = [...time];
this.seriesItemScreen = [];
for(let i=0;i<8;i++){
this.seriesItemScreen.push({//表格数据
@@ -568,8 +573,12 @@ export default {
//this.searchTime = this.oldSearchTime;
//alert(JSON.stringify(this.oldSearchTime));
this.searchTime = [];
this.searchTime[0] = this.oldSearchTime[0];//将列表的查询时间复制给全屏的查询时间
this.searchTime[1] = this.oldSearchTime[1];
//this.searchTime[0] = this.oldSearchTime[0];//将列表的查询时间复制给全屏的查询时间
//this.searchTime[1] = this.oldSearchTime[1];
this.$set(this.searchTime, 0, this.oldSearchTime[0]);
this.$set(this.searchTime, 1, this.oldSearchTime[1]);
this.$refs.calendarPanel.setCustomTime(this.searchTime);
this.seriesItemScreen = this.seriesItem;
this.screenModal = true;
//this.startLoading('screen');

55
nezha-fronted/src/components/charts/chartPreview.vue
View File

@@ -28,9 +28,24 @@
:modal-append-to-body='false'
@close="handleClose"
@opened="initDialog">
<el-popover
v-if="isError"
placement="top-start"
:close-delay=10
trigger="hover"
popper-class="chart-error-popper">
<div >{{errorContent}}</div>
<span slot="reference" class="panel-info-corner panel-info-corner--error">
<i class="nz-icon nz-icon-warning fa-model" ></i>
<span class="panel-info-corner-inner"></span>
</span>
</el-popover>
<div slot="title">
<span class="nz-dialog-title">{{chart.title}}</span>
<div class="float-right panel-calendar dialog-tool" v-if="chart.type!=='url'">
<time-picker ref="calendarPanel" class="nz-dashboard-picker" style="margin-top: -12px;" @change="dateChange"></time-picker>
<!--
<el-date-picker ref="calendar" prefix-icon=" " size="mini" class="nz-preview-picker"
format="yyyy/MM/dd HH:mm"
@change="dateChange"
@@ -41,7 +56,7 @@
:start-placeholder="$t('dashboard.panel.startTime')"
:end-placeholder="$t('dashboard.panel.endTime')"
align="right">
</el-date-picker>
</el-date-picker>-->
</div>
</div>
@@ -96,11 +111,13 @@
import loading from "../common/loading";
import chartDataFormat from './chartDataFormat'
import {randomcolor} from '../common/js/radomcolor/randomcolor.js'
import timePicker from '../common/timePicker'
export default {
name: 'chartPreview',
components: {
'loading': loading,
'time-picker':timePicker
},
props: {
panelId:Number,
@@ -111,6 +128,8 @@
//data: {}, // 该图表信息,chartItem
dailogWidth:'80%',
//seriesItem: [], // 保存信息
isError:false,
errorContent:'',
seriesItemScreen:[],
pageSizes:[50,100,200],
screenPageObj:{
@@ -149,13 +168,17 @@
showLegend:true,
tableShow:true,
urlShow:true,
searchTime:[new Date().setHours(new Date().getHours()-1),new Date()],
searchTime: [
new Date(bus.computeTimezone(new Date().getTime())).setMinutes(new Date(bus.computeTimezone(new Date().getTime())).getMinutes() - 5),
new Date(bus.computeTimezone(new Date().getTime()))
],
//oldSearchTime:[],
minHeight:200,
chartSpaceHeight:5,//top-border: 1,bottom-border: 1,padding-bottome:3
titleHeight:50,
legendHeight:80,
//oldChartBoxCss:'',
/*
pickerOptions: {
shortcuts: [
{
@@ -236,7 +259,7 @@
picker.$emit('pick', [start, end]);
}
}]
},
},*/
};
},
computed: {
@@ -245,7 +268,9 @@
methods: {
// 全屏查看
show(chartInfo) {
this.searchTime = [new Date().setHours(new Date().getHours()-1),new Date()];
this.isError = false;
this.searchTime = [new Date(bus.computeTimezone(new Date().getTime())).setMinutes(new Date(bus.computeTimezone(new Date().getTime())).getMinutes() - 5),
new Date(bus.computeTimezone(new Date().getTime()))];
this.chart=chartInfo;
let chartType= chartInfo.type;
@@ -388,6 +413,8 @@ console.log('=======',this.chart);
};
res.forEach((response, innerPos) => {
if (response.status === 'success') {
this.isError = false;
this.errorContent = "";
if (response.data.result) {
// console.log(response.data.result)
// 循环处理每个elements下获取的数据列
@@ -472,12 +499,14 @@ console.log('=======',this.chart);
});
}
}else{
alert('error')
this.isError = true;
if(response.msg){
this.$message.error(response.msg);
this.errorContent = response.msg;
}else if(response.error){
this.$message.error(response.error);
this.errorContent = response.error;
}else {
this.$message.error(response);
this.errorContent = response;
}
}
});
@@ -940,6 +969,7 @@ console.log('=======',this.chart);
},
*/
dateChange(time) {
this.searchTime = [...time];
let chartType = this.chart.type;
if (chartType === 'table') {
this.seriesItemScreen = [];
@@ -997,6 +1027,8 @@ console.log('=======',this.chart);
}
res.forEach((response,pos) => {
if (response.status === 'success') {
this.isError = false;
this.errorContent = "";
if (response.data.result) {
// 循环处理每个elements下获取的数据列
response.data.result.forEach((queryItem,innerPos) => {
@@ -1063,6 +1095,15 @@ console.log('=======',this.chart);
}
});
}
}else{
this.isError = true;
if(response.msg){
this.errorContent = response.msg;
}else if(response.error){
this.errorContent = response.error;
}else {
this.errorContent = response;
}
}
});
this.initChart(this.chart,series, this.$refs.screenShowArea,legend);

94
nezha-fronted/src/components/charts/line-chart-block.scss
View File

@@ -74,8 +74,62 @@
}
}
}
.panel-info-corner {
color: #767980;
cursor: pointer;
position: absolute;
display: none;
left: 0;
width: 28px;
height: 28px;
z-index: 2;
top: 0;
}
.panel-info-corner--error {
display: block;
color: #fff;
}
.panel-info-corner .fa {
position: relative;
top: -6px;
left: -6px;
font-size: 75%;
z-index: 3;
}
.panel-info-corner .fa-model {
position: relative;
top: -3px;
left: 4px;
font-size: 75%;
z-index: 3;
}
.fa , .fa-model{
display: inline-block;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
}
.panel-info-corner--error .panel-info-corner-inner {
border-left: 28px solid #e02f44;
border-right: none;
border-bottom: 28px solid rgba(0,0,0,0);
}
.panel-info-corner-inner {
width: 0;
height: 0;
position: absolute;
left: 0;
bottom: 0;
}
.chart-error-popper[x-placement^=top] .popper__arrow::after {
border-top-color: #e02f44;
bottom:0px;
}
.chart-error-popper[x-placement^=bottom] .popper__arrow::after {
border-bottom-color: #e02f44;
}
.popper__arrow::after{
border:solid 3px yellow
}
.chart-error-popper{
background-color:#e02f44;
@@ -123,46 +177,6 @@
text-align: center;
width: 100%;
line-height: 28px;
.panel-info-corner {
color: #767980;
cursor: pointer;
position: absolute;
display: none;
left: 0;
width: 28px;
height: 28px;
z-index: 2;
top: 0;
}
.panel-info-corner--error {
display: block;
color: #fff;
}
.panel-info-corner .fa {
position: relative;
top: -6px;
left: -6px;
font-size: 75%;
z-index: 3;
}
.fa {
display: inline-block;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
}
.panel-info-corner--error .panel-info-corner-inner {
border-left: 28px solid #e02f44;
border-right: none;
border-bottom: 28px solid rgba(0,0,0,0);
}
.panel-info-corner-inner {
width: 0;
height: 0;
position: absolute;
left: 0;
bottom: 0;
}
.nz-chart-top{
width:100%;

43
nezha-fronted/src/components/charts/line-chart-block.vue
View File

@@ -27,7 +27,7 @@
<el-popover
v-if="isError"
placement="top-start"
close-delay="10"
:close-delay=10
trigger="hover"
popper-class="chart-error-popper">
<div >{{errorContent}}</div>
@@ -91,11 +91,27 @@
:visible.sync="screenModal"
width="90%"
@close="screenModal = false"
style="margin-top: 1vh !important;"
@opened="initDialog">
<el-popover
v-if="isError"
placement="top-start"
:close-delay=10
trigger="hover"
popper-class="chart-error-popper">
<div >{{errorContent}}</div>
<span slot="reference" class="panel-info-corner panel-info-corner--error">
<i class="nz-icon nz-icon-warning fa-model" ></i>
<span class="panel-info-corner-inner"></span>
</span>
</el-popover>
<div slot="title" >
<span class="nz-dialog-title" v-show="!isExplore">{{data.title}}</span>
<span class="nz-dialog-title" v-show="isExplore">&nbsp;</span>
<div class="float-right panel-calendar dialog-tool">
<time-picker ref="calendarPanel" class="nz-dashboard-picker" style="margin-top: -12px;" @change="dateChange"></time-picker>
<!--
<el-date-picker ref="calendar" prefix-icon=" " size="mini" class="nz-dashboard-picker"
format="yyyy/MM/dd HH:mm"
@change="dateChange"
@@ -106,7 +122,7 @@
:start-placeholder="$t('dashboard.panel.startTime')"
:end-placeholder="$t('dashboard.panel.endTime')"
align="right">
</el-date-picker>
</el-date-picker>-->
<!--<button @click="refreshChart" type="button" class="nz-btn nz-btn-size-normal nz-btn-style-light"><i style="font-size: 14px;" class="el-icon-refresh-right"></i></button>-->
</div>
</div>
@@ -133,11 +149,13 @@
import loading from "../common/loading";
import chartDataFormat from './chartDataFormat'
import {randomcolor} from '../common/js/radomcolor/randomcolor.js'
import timePicker from '../common/timePicker'
export default {
name: 'lineChartBlock',
components: {
'loading': loading,
'time-picker':timePicker
},
props: {
editChartId: {
@@ -215,7 +233,7 @@
chartSpaceHeight:5,//top-border: 1,bottom-border: 1,padding-bottome:3
titleHeight:28,
legendHeight:80,
pickerOptions: {
/*pickerOptions: {
shortcuts: [
{
text: this.$t("dashboard.panel.recOne"),
@@ -295,7 +313,7 @@
picker.$emit('pick', [start, end]);
}
}]
},
},*/
};
},
computed: {
@@ -1268,7 +1286,10 @@
// 初始化同步时间
this.filter.start_time = this.stableFilter.start_time;
this.filter.end_time = this.stableFilter.end_time;
this.searchTime = this.oldSearchTime;
//this.searchTime = this.oldSearchTime;
this.$set(this.searchTime, 0, this.oldSearchTime[0]);
this.$set(this.searchTime, 1, this.oldSearchTime[1]);
this.$refs.calendarPanel.setCustomTime(this.searchTime);
this.screenModal = true;
this.isGreyScreen=[];
@@ -1283,6 +1304,7 @@
//this.dateChange();
},
dateChange(time) {
this.searchTime = [...time];
this.filter.start_time = bus.timeFormate(this.searchTime[0], 'yyyy-MM-dd hh:mm:ss');
this.filter.end_time = bus.timeFormate(this.searchTime[1], 'yyyy-MM-dd hh:mm:ss');
this.echartModalStore.clear();
@@ -1345,6 +1367,8 @@
}
res.forEach((response,pos) => {
if (response.status === 'success') {
this.isError = false;
this.errorContent = "";
if (response.data.result) {
// 循环处理每个elements下获取的数据列
response.data.result.forEach((queryItem,innerPos) => {
@@ -1428,6 +1452,15 @@
}
});
}
}else{
this.isError = true;
if(response.msg){
this.errorContent = response.msg;
}else if(response.error){
this.errorContent = response.error;
}else {
this.errorContent = response;
}
}
});
/*

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

@@ -4,6 +4,11 @@
margin-top: 16px;
}
</style>
<style>
.endpoint-dialog .el-dialog__body{
height: 100% !important;
}
</style>
<template>
<span>
<div class="sub-top-tools">
@@ -145,7 +150,7 @@
</el-table>-->
<button class="to-top" v-show="showTopBtn" :class="{'to-top-is-hover': tableHover}" @click="$toTop('ps', 1)"><i class="nz-icon nz-icon-top"></i></button>
<el-dialog class="line-chart-block-modal nz-dialog"
<el-dialog class="line-chart-block-modal nz-dialog endpoint-dialog"
:title="$t('project.endpoint.dialogTitle')"
:visible.sync="graphShow"
width="90%"
@@ -153,16 +158,12 @@
@close="dialogClose">
<div slot="title">
{{$t("project.endpoint.dialogTitle")}}
<div class="float-right panel-calendar dialog-tool">
<pick-time :refresh-data-func="queryChartDate" :use-refresh="false" v-model="searchTime"></pick-time>
<div class="float-right panel-calendar dialog-tool" style="display: flex">
<pick-time :refresh-data-func="queryChartDate" :use-refresh="false" v-model="searchTime" style="height: 28px;"></pick-time>
<button class="nz-btn nz-btn-size-large nz-btn-style-normal nz-btn-min-width-82" @click="saveChart">{{$t('dashboard.metric.saveChart')}}</button>
</div>
</div>
<chart ref="endpointChart" ></chart>
<div class="line-100 margin-t-10"></div>
<div class="chart-bottom">
<button class="nz-btn nz-btn-size-large nz-btn-style-normal nz-btn-min-width-82" @click="saveChart">{{$t('dashboard.metric.saveChart')}}</button>
</div>
<loading ref="graphLoading"></loading>
</el-dialog>
<chart-box ref="addChartModal" :panel-data="panelData" @on-create-success="createSuccess" @reloadOnlyPanel="getPanelData" @reload="getPanelData"></chart-box>
@@ -224,12 +225,12 @@
metricInfo.elements = [];
//console.info("aaa", this.selectedEndpoints)
for(let i = 0; i < this.selectedEndpoints.length; i++) {
let type = '';
if (this.selectedEndpoints[i].type == '1') {
type = 'expert';
} else if (this.selectedEndpoints[i].type == '2') {
type = 'normal';
}
let type = 'expert';
// if (this.selectedEndpoints[i].type == '1') {
// type = 'expert';
// } else if (this.selectedEndpoints[i].type == '2') {
// type = 'normal';
// }
metricInfo.elements.push({expression: this.selectedEndpoints[i].element, type: type});
}
this.$refs.addChartModal.createData(-1, metricInfo);
@@ -418,10 +419,6 @@
this.$refs.endpointChart.startLoading();
this.queryChartDate();
});
/*setTimeout(()=> {
this.$refs.graphLoading.startLoading();
this.queryChartDate();
}, 200);*/
},
dialogClose:function(){
this.graphShow=false;

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

@@ -152,7 +152,7 @@ const en = {
},
startTime:'Start time', //'开始时间'
endTime:'End time',//'结束时间'
to:'To', //To
to:'to', //To
recOne:'Last 1 hour', //'最近1小时'
recFour:'Last 4 hours',//'最近4小时'
recOneDay:'Last 1 day',//'最近1日'

146
nezha-fronted/src/components/common/pickTime.vue
View File

@@ -1,41 +1,33 @@
<template>
<div class="interval-refresh">
<el-date-picker size="mini" ref="calendar"
format="yyyy/MM/dd HH:mm:ss"
@change="dateChange"
v-model="searchTime"
type="datetimerange"
:picker-options="pickerOptions"
:range-separator="$t('dashboard.panel.to')"
:start-placeholder="$t('dashboard.panel.startTime')"
:end-placeholder="$t('dashboard.panel.endTime')"
style="margin-right: 20px"
align="right">
</el-date-picker>
<div class="nz-btn-group nz-btn-group-size-normal nz-btn-group-light margin-r-20" v-show="useRefresh">
<button style="border-right: 1px solid rgba(162,162,162,0.50);height: 100%" type="button" class="nz-btn nz-btn-size-normal nz-btn-style-light" @click="refreshDataFunc">
<i style="font-size: 12px" class="global-active-color nz-icon nz-icon-refresh"></i>&nbsp;
<span class="nz-btn nz-btn-text" ><slot name="added-text"></slot></span>
</button>
<el-popover v-model="visible" placement="bottom-start" :width="50" trigger="click" popper-class="interval-refresh-popover" >
<ul class="popover_ul">
<li v-for="i in intervalList" :style="{color:interval==i.value?'#31749C':''}" :key="i.value+i.name" @click="selectInterval(i)">
{{i.name}}
</li>
</ul>
<button type="button" style="border-radius: 0 4px 4px 0;height: 100%" class="nz-btn nz-btn-size-normal nz-btn-style-light" slot="reference">
<span class="nz-btn nz-btn-text">{{interval.value != -1?interval.name:''}}&nbsp</span><i style="font-size: 12px" class="nz-icon nz-icon-arrow-down"></i>
<div class="interval-refresh ">
<time-picker ref="timePicker" class="time-picker" @change="dateChange"></time-picker>
<div class="nz-btn-group nz-btn-group-size-normal nz-btn-group-light margin-r-20" v-show="useRefresh" style="height: 24px;line-height: 24px;vertical-align: middle;">
<button style="border-right: 1px solid rgba(162,162,162,0.50);" type="button" class="nz-btn nz-btn-size-normal nz-btn-style-light" @click="refreshDataFunc">
<i style="font-size: 12px" class="global-active-color nz-icon nz-icon-refresh"></i>&nbsp;
<span class="nz-btn nz-btn-text" ><slot name="added-text"></slot></span>
</button>
</el-popover>
</div>
<el-popover v-model="visible" placement="bottom-start" :width="50" trigger="click" popper-class="interval-refresh-popover" >
<ul class="popover_ul">
<li v-for="i in intervalList" :style="{color:interval==i.value?'#31749C':''}" :key="i.value+i.name" @click="selectInterval(i)">
{{i.name}}
</li>
</ul>
<button type="button" style="border-radius: 0 4px 4px 0;" class="nz-btn nz-btn-size-normal nz-btn-style-light" slot="reference">
<span class="nz-btn nz-btn-text">{{interval.value != -1?interval.name:''}}&nbsp</span><i style="font-size: 12px" class="nz-icon nz-icon-arrow-down"></i>
</button>
</el-popover>
</div>
</div>
</template>
<script>
import bus from "../../libs/bus";
import timePicker from "./timePicker";
export default {
name: "intervalRefresh",
components:{
'time-picker':timePicker,
},
model:{
event:'change',
prop:'timeRange'
@@ -57,88 +49,6 @@
data(){
return{
searchTime:[],
pickerOptions: {
shortcuts: [
{
text: this.$t("dashboard.panel.recOne"),
onClick(picker) {
const end = new Date();
const start = new Date();
start.setHours(start.getHours() - 1);
picker.$emit('pick', [start, end]);
}
}, {
text: this.$t("dashboard.panel.recFour"),
onClick(picker) {
const end = new Date();
const start = new Date();
start.setHours(start.getHours() - 4);
picker.$emit('pick', [start, end]);
}
}, {
text: this.$t("dashboard.panel.recOneDay"),
onClick(picker) {
const end = new Date();
const start = new Date();
start.setDate(start.getDate() - 1);
picker.$emit('pick', [start, end]);
}
}, {
text: this.$t("dashboard.panel.yesterday"),
onClick(picker) {
const start = new Date();
const end = new Date();
start.setDate(start.getDate() - 1);
start.setHours(0);
start.setMinutes(0);
start.setSeconds(0);
end.setDate(end.getDate() - 1);
end.setHours(23);
end.setMinutes(59);
end.setSeconds(59);
picker.$emit('pick', [start, end]);
}
}, {
text: this.$t("dashboard.panel.recSevenDay"),
onClick(picker) {
const end = new Date();
const start = new Date();
start.setDate(start.getDate() - 7);
picker.$emit('pick', [start, end]);
}
}, {
text: this.$t("dashboard.panel.recOneMonth"),
onClick(picker) {
const end = new Date();
const start = new Date();
start.setDate(start.getDate() - 30);
picker.$emit('pick', [start, end]);
}
}, {
text: this.$t("dashboard.panel.curMonth"),
onClick(picker) {
const end = new Date();
const start = new Date();
start.setDate(1);
start.setHours(0);
start.setMinutes(0);
start.setSeconds(0)
picker.$emit('pick', [start, end]);
}
}, {
text: this.$t("dashboard.panel.lastMonth"),
onClick(picker) {
const end = new Date();
const start = new Date();
start.setDate(1);
start.setMonth(start.getMonth() - 1);
end.setDate(0);
start.setStart();
end.setEnd();
picker.$emit('pick', [start, end]);
}
}],
},
visible: false,
intervalTimer: null,
intervalList: [{
@@ -171,12 +81,12 @@
selectInterval(val) {
this.visible = false;
clearInterval(this.intervalTimer);
this.interval = val;
if (val && val.value != -1) {
this.interval = val;
const start = new Date(this.searchTime[1]);
const now = new Date();
const interval = Math.floor((now.getTime() - start.getTime()) / 1000); //计算当前结束时间到现在的间隔（秒）
if (interval >= 60) { //如果结束时间到现在超过1分钟，则
if (interval >= 60) { //如果结束时间到现在超过30s，则
this.getIntervalData(interval);
}
this.intervalTimer = setInterval(() => {
@@ -191,6 +101,8 @@
end.setSeconds(end.getSeconds() + interval);
this.searchTime = this.timeFormate([start,end])
this.$refs.timePicker.setCostomTime(this.searchTime);
this.$emit('change',this.searchTime)
//刷新数据
this.refreshDataFunc();
},
@@ -200,8 +112,8 @@
return [startTime, endTime];
},
dateChange(time) {
let timeRange=this.timeFormate(time);
this.$emit('change',timeRange)
this.searchTime=time;
this.$emit('change',this.searchTime)
this.refreshDataFunc();
},
}
@@ -211,6 +123,10 @@
<style scoped lang="scss">
.interval-refresh{
display: flex;
align-items: center;
}
.interval-refresh .time-picker{
margin-right: 20px;
}
.popover_ul{
text-align: center;

190
nezha-fronted/src/components/common/timePicker.vue
View File

@@ -12,10 +12,10 @@
line-height:24px;
padding-left:5px;
margin-left:0px;
margin-top: 3px;
margin-top: 0px !important;
text-align:left;
border-radius:4px;
width:160px;
min-width:120px;
height:24px;
border:solid 1px #d8dce1;
white-space: nowrap;
@@ -29,10 +29,56 @@
line-height:22px;
text-align:center;
}
.panel-time-picker-hidden{
width:0px;
padding:0px !important;
visibility: hidden;
}
.time-picker-button{
padding: 0 1px !important;
height:24px !important;
margin-top:0px !important;
}
.time-picker-left-button{
margin-right: 4px;
}
.time-picker-right-button{
margin-left: 4px;
}
.calendar-popover-text {}
</style>
<style lang="scss">
.panel-time-picker-popper[x-placement^=bottom] .popper__arrow {
left: 85% !important;
}
.panel-time-picker-popper[x-placement^=bottom] {
}
.panel-time-picker-popper .el-date-table td.today span {
color: #FFF !important;
}
.panel-time-picker-popper .el-picker-panel__footer button:nth-child(1){
display:none;
}
</style>
<template>
<div class="calendar top-tools" id="panel-calender">
<el-dropdown @command="timeChange" class="calendar-dropdown-title" trigger="click" v-scrollBar:el-dropdown @visible-change="popoverClick">
<el-date-picker prefix-icon=" " class="panel-time-picker-hidden hidden" size="mini" ref="calendar"
format="yyyy/MM/dd HH:mm:ss" @change="dateChange" v-model="searchTime" type="datetimerange"
popper-class="panel-time-picker-popper"
:range-separator="$t('dashboard.panel.to')"
:start-placeholder="$t('dashboard.panel.startTime')"
:end-placeholder="$t('dashboard.panel.endTime')" align="right">
</el-date-picker>
<!--
<button type="button" style="border-radius: 1px 1px 1px 1px" @click="right()" v-show="isCustom"
class="nz-btn nz-btn-size-normal nz-btn-style-light time-picker-button time-picker-right-button" >
<i style="font-size: 12px" class="el-icon-arrow-right"></i>
</button>-->
<el-dropdown @command="timeChange" ref="timePickerDropdown" class="calendar-dropdown-title" trigger="click" v-scrollBar:el-dropdown @visible-change="popoverClick">
<el-popover
placement="bottom-end"
min-width="120px"
@@ -41,19 +87,19 @@
trigger="hover"
id="panel-calender-popover">
<el-row :gutter="10" class="calendar-popover">
<el-col :span="24">{{searchTime[0]}}</el-col>
<el-col :span="24" class="calendar-popover-text">{{searchTime[0]}}</el-col>
</el-row>
<el-row :gutter="10" class="calendar-popover">
<el-col :span="24">to</el-col>
<el-col :span="24" class="calendar-popover-text">{{$t('dashboard.panel.to')}}</el-col>
</el-row>
<el-row :gutter="10" class="calendar-popover">
<el-col :span="24">{{searchTime[1]}}</el-col>
</el-row>
<el-row :gutter="10" class="el-dropdown-link" slot="reference">
<el-col :span="3" ><i class="el-icon-time"></i></el-col>
<el-col :span="17" class="panel-list-title" >{{showTime.text}}</el-col>
<el-col :span="4" style="padding-left:0px !important;"><i class="el-icon-arrow-down el-icon--right"></i></el-col>
<el-col :span="24" class="calendar-popover-text">{{searchTime[1]}}</el-col>
</el-row>
<div class="el-dropdown-link" slot="reference">
<i class="el-icon-time" style="width:20px;"></i>
<span class="panel-list-title" id="timePickerContent">{{showTime.text}}</span>
<i class="el-icon-arrow-down el-icon--right" style="padding-left:0px !important;width:20px;"></i>
</div>
</el-popover>
<el-dropdown-menu class="nz-dashboard-dropdown" slot="dropdown">
<!-- <el-dropdown-item >{{$t('dashboard.panel.customTimeRange')}}</el-dropdown-item> -->
@@ -63,12 +109,11 @@
</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
<el-date-picker prefix-icon=" " class="nz-dashboard-picker" size="mini" ref="calendar"
format="yyyy/MM/dd HH:mm" @change="dateChange" v-model="searchTime" type="datetimerange"
:picker-options="pickerOptions" :range-separator="$t('dashboard.panel.to')"
:start-placeholder="$t('dashboard.panel.startTime')"
:end-placeholder="$t('dashboard.panel.endTime')" align="right">
</el-date-picker>
<!--
<button type="button" style="border-radius: 1px 1px 1px 1px" @click="left()" v-show="isCustom"
class="nz-btn nz-btn-size-normal nz-btn-style-light time-picker-button time-picker-left-button" >
<i style="font-size: 12px" class="el-icon-arrow-left"></i>
</button>-->
</div>
</template>
@@ -82,6 +127,7 @@ export default {
data() {
return {
isPopoverDisabled:false,
isCustom:false,
searchTime:[
bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())).setMinutes(new Date(bus.computeTimezone(new Date().getTime())).getMinutes() - 5),'yyyy-MM-dd hh:mm:ss'),
bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())),'yyyy-MM-dd hh:mm:ss')
@@ -90,10 +136,6 @@ export default {
id: 1,
text: this.$t("dashboard.panel.lastFiveMin"),
},
oldTime:{
id: 1,
text: this.$t("dashboard.panel.lastFiveMin"),
},
timeData: [
{
id:0,
@@ -169,34 +211,91 @@ export default {
};
},
methods: {
timeChange(val) {
this.showTime = val;
dateChange(val){
let startTime = bus.timeFormate(val[0], 'yyyy-MM-dd hh:mm:ss');
let endTime = bus.timeFormate(val[1], 'yyyy-MM-dd hh:mm:ss');
this.$set(this.searchTime, 0, startTime);
this.$set(this.searchTime, 1, endTime);
//let timerPicker = document.querySelector('#timePickerContent');
//timerPicker.innerText = this.searchTime[0]+" "+this.$t("dashboard.panel.to")+" "+this.searchTime[1];
this.$set(this.showTime, 'id', 0);
this.$set(this.showTime, 'text', this.searchTime[0]+" "+this.$t("dashboard.panel.to")+" "+this.searchTime[1]);
/*
let tipElementList = document.getElementsByClassName('calendar-popover-text');
if(tipElementList && tipElementList.length===3){
console.log('-0-0-0',tipElementList);
tipElementList[0].innerHTML = this.searchTime[0];
tipElementList[1].innerHTML = this.$t("dashboard.panel.to");
tipElementList[2].innerHTML = this.searchTime[1];
console.log('-0-0-2',tipElementList);
}*/
this.$emit('change', this.searchTime);
},
setCustomTime(timeGroup){
if(timeGroup.length===2){
this.$set(this.searchTime, 0, timeGroup[0]);
this.$set(this.searchTime, 1, timeGroup[1]);
this.$set(this.showTime, 'id', 0);
this.$set(this.showTime, 'text', this.searchTime[0]+" "+this.$t("dashboard.panel.to")+" "+this.searchTime[1]);
}
},
//left(){},
//right(){},
timeChange(val) {
this.$set(this.showTime, 'id', val.id);
this.$set(this.showTime, 'text', val.text);
if (!val) {
this.isCustom = false;
return false;
}else {
let id = val.id;
if(id===0){
}else {
this.oldTime = val;
}
this.setSearchTime(val.type,val.value);
//let timerPicker = document.querySelector('#timePickerContent');
//timerPicker.innerText = val.text;
/*
let tipElementList = document.getElementsByClassName('calendar-popover-text');
if(tipElementList && tipElementList.length===3){
tipElementList[0].innerHTML = this.searchTime[0];
tipElementList[1].innerHTML = this.$t("dashboard.panel.to");
tipElementList[2].innerHTML = this.searchTime[1];
}*/
let id = val.id;
if(id===0){//custom
this.isCustom = true;
this.$refs.calendar.focus();
}else {
this.isCustom = false;
this.$emit('change', this.searchTime);
}
}
this.$emit('change', this.searchTime);
},
setSearchTime(type,val){
if(type==='minute'){
this.searchTime[0] = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())).setMinutes(new Date(bus.computeTimezone(new Date().getTime())).getMinutes() - val),'yyyy-MM-dd hh:mm:ss'),
this.searchTime[1] = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())),'yyyy-MM-dd hh:mm:ss');
let startTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())).setMinutes(new Date(bus.computeTimezone(new Date().getTime())).getMinutes() - val),'yyyy-MM-dd hh:mm:ss');
let endTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())),'yyyy-MM-dd hh:mm:ss');
this.$set(this.searchTime, 0, startTime);
this.$set(this.searchTime, 1, endTime);
}else if(type==='hour'){
this.searchTime[0] = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())).setHours(new Date(bus.computeTimezone(new Date().getTime())).getHours() - val),'yyyy-MM-dd hh:mm:ss'),
this.searchTime[1] = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())),'yyyy-MM-dd hh:mm:ss');
let startTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())).setHours(new Date(bus.computeTimezone(new Date().getTime())).getHours() - val),'yyyy-MM-dd hh:mm:ss');
let endTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())),'yyyy-MM-dd hh:mm:ss');
this.$set(this.searchTime, 0, startTime);
this.$set(this.searchTime, 1, endTime);
}else if(type==='date'){
this.searchTime[0] = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())).setDate(new Date(bus.computeTimezone(new Date().getTime())).getDate() - val),'yyyy-MM-dd hh:mm:ss'),
this.searchTime[1] = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())),'yyyy-MM-dd hh:mm:ss');
let startTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())).setDate(new Date(bus.computeTimezone(new Date().getTime())).getDate() - val),'yyyy-MM-dd hh:mm:ss');
let endTime = bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())),'yyyy-MM-dd hh:mm:ss');
this.$set(this.searchTime, 0, startTime);
this.$set(this.searchTime, 1, endTime);
}
},
setCostomTime:function(costomTime){
this.searchTime=Object.assign(costomTime);
let val=Object.assign(this.timeData[0]);
this.$set(this.showTime, 'id', val.id);
this.$set(this.showTime, 'text', val.text);
},
popoverClick(val){
if(val){
this.isPopoverDisabled = true;
@@ -204,7 +303,24 @@ export default {
this.isPopoverDisabled = false;
}
},
}
},
mounted: function () {
/*
if(this.isCustom){
if(this.timeGroup.length===2){
this.$set(this.searchTime, 0, this.timeGroup[0]);
this.$set(this.searchTime, 1, this.timeGroup[1]);
this.$set(this.showTime, 'id', 0);
this.$set(this.showTime, 'text', this.searchTime[0]+" "+this.$t("dashboard.panel.to")+" "+this.searchTime[1]);
}
}else{
let timeObj = this.timeData.find((item)=>{return item.id===this.timeDataId});
this.$set(this.showTime, 'id', this.timeDataId);
this.$set(this.showTime, 'text', timeObj.text);
this.setSearchTime(timeObj.type,timeObj.value);
}*/
},
};
</script>

68
nezha-fronted/src/components/page/dashboard/explore/explore.vue
View File

@@ -13,14 +13,16 @@
<div class="main-list main-and-sub-transition">
<!-- 顶部工具栏 -->
<div class="top-tools" style="z-index: 1">
<button :disabled="saveDisabled" type="button" @click="saveChart"
class="nz-btn nz-btn-size-large nz-btn-style-normal nz-btn-min-width-120"
:class="{'nz-btn-disabled btn-disabled-cursor-not-allowed' : saveDisabled}">
{{$t('dashboard.metric.saveChart')}}
</button>
<pick-time :refresh-data-func="expressionChange" v-model="filterTime" >
<template slot="added-text">{{$t('dashboard.metricPreview.runQuery')}}</template>
</pick-time>
<div class="top-tool-main-right">
<pick-time :refresh-data-func="expressionChange" v-model="filterTime" >
<template slot="added-text">{{$t('dashboard.metricPreview.runQuery')}}</template>
</pick-time>
<button :disabled="saveDisabled" type="button" @click="saveChart"
class="nz-btn nz-btn-size-large nz-btn-style-normal nz-btn-min-width-120"
:class="{'nz-btn-disabled btn-disabled-cursor-not-allowed' : saveDisabled}">
{{$t('dashboard.metric.saveChart')}}
</button>
</div>
</div>
<div style="height: calc(100% - 50px);width: 100%;" >
<el-scrollbar style="height: 100%" class="el-scrollbar-large">
@@ -28,6 +30,7 @@
<!--坑，这个index居然是从1开始-->
<promql-input
v-for="index of promqlKeys.length"
:ref="'promql-'+(index-1)"
:id="promqlKeys[index-1]"
:key="promqlKeys[index-1]"
:expression-list="expressions"
@@ -39,7 +42,7 @@
</div>
<div class="chart-view right-margin" v-show="!showIntroduce"
:class="{'shrink-view':!chartVisible || !defaultChartVisible}">
<div class="view-title" @click="changeChartVisible"><i class="el-icon-caret-top"></i>&nbsp;graph</div>
<div class="view-title" @click="changeChartVisible" style="float: left"><i class="el-icon-caret-top" ></i>&nbsp;graph</div>
<div class="chart-room">
<chart ref="exploreChart"></chart>
</div>
@@ -209,7 +212,10 @@ instance_cpu_time_ns{app="fox", proc="widget", rev="4d3a513", env="prod", job="c
promqlCount: 1,
promqlKeys: [],
expressions: [''],
filterTime: [new Date().setHours(new Date().getHours() - 1), new Date()],
filterTime: [
bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())).setMinutes(new Date(bus.computeTimezone(new Date().getTime())).getMinutes() - 5),'yyyy-MM-dd hh:mm:ss'),
bus.timeFormate(new Date(bus.computeTimezone(new Date().getTime())),'yyyy-MM-dd hh:mm:ss')
],
showIntroduce: true,
defaultChartVisible: true,
defaultTableVisible: true,
@@ -250,9 +256,11 @@ instance_cpu_time_ns{app="fox", proc="widget", rev="4d3a513", env="prod", job="c
setTimeout(() => {
if (this.expressions.length > 0) {
let requestArr = [];
let promqlInputIndexs=[];
this.expressions.forEach((item, index) => {
if (item != '') {
let step=bus.getStep(this.filterTime[0],this.filterTime[1]);
promqlInputIndexs.push(index);
requestArr.push(axios.get('/prom/api/v1/query_range?query=' + item + '&start=' + this.filterTime[0] + '&end=' + this.filterTime[1] + '&step='+step))
}
})
@@ -267,7 +275,7 @@ instance_cpu_time_ns{app="fox", proc="widget", rev="4d3a513", env="prod", job="c
res.forEach((response, index) => {
if (response.data.status == 'success') {
let data = response.data.data.result;
data.forEach((result, index) => {
data.forEach((result, i) => {
let seriesItem = {
name: '',
symbol: 'none', //去掉点
@@ -289,13 +297,22 @@ instance_cpu_time_ns{app="fox", proc="widget", rev="4d3a513", env="prod", job="c
series.push(seriesItem);
legend.push({name: seriesItem.name, alias: null, isGray: false});
})
}else{
let promqlIndex=promqlInputIndexs[index];
console.log(response)
this.$refs['promql-'+promqlIndex][0].setError(response.data.error)
}
})
this.$refs.exploreChart.setLegend(legend);
this.$refs.exploreChart.setRandomColors(series.length)
this.$refs.exploreChart.setSeries(series)
if(series.length>0){
this.$refs.exploreChart.setLegend(legend);
this.$refs.exploreChart.setRandomColors(series.length)
this.$refs.exploreChart.setSeries(series)
this.defaultChartVisible = true;
}else{
// this.defaultChartVisible = false;
}
}
this.defaultChartVisible = true;
this.$refs.exploreChart.endLoading();
})
}
@@ -348,14 +365,19 @@ instance_cpu_time_ns{app="fox", proc="widget", rev="4d3a513", env="prod", job="c
return a.prop.charCodeAt(0) - b.prop.charCodeAt(0);
})
})
this.storedTableData = Object.assign([], tData);
this.pageObj.total = this.storedTableData.length;
this.tableData = this.filterShowData(this.storedTableData, this.pageObj);
this.tableLabels = Object.assign([], tLabels);
this.showTableLabels = Object.assign([], tLabels);
this.dropCol = Object.assign([], tLabels);
console.log(tData.length)
if(tData.length>0){
this.storedTableData = Object.assign([], tData);
this.pageObj.total = this.storedTableData.length;
this.tableData = this.filterShowData(this.storedTableData, this.pageObj);
this.tableLabels = Object.assign([], tLabels);
this.showTableLabels = Object.assign([], tLabels);
this.dropCol = Object.assign([], tLabels);
this.defaultTableVisible = true;
}else{
// this.defaultTableVisible = false;
}
}
this.defaultTableVisible = true;
this.tableLoading = false;
})
}
@@ -448,8 +470,6 @@ instance_cpu_time_ns{app="fox", proc="widget", rev="4d3a513", env="prod", job="c
const dh = this.$refs.elementset.$el.offsetHeight;
let positionx =
e.clientX + dw <= w - 10 ? e.clientX + 14 : e.clientX + 14 - dw;
console.log(e.clientY + dh)
console.log(h)
let positiony =
e.clientY + dh <= h - 10
? e.clientY + 20

23
nezha-fronted/src/components/page/dashboard/explore/promqlInput.vue
View File

@@ -1,5 +1,5 @@
<template>
<div class="promqlInput">
<div class="promqlInput" :style="{height:(errorMsg || appendMsg)?'50px':'36px'}">
<div class="query-row">
<div class="query-input">
<div class="metricBtn">
@@ -8,10 +8,11 @@
<el-button class="metric-btn nz-btn nz-btn-size-normal nz-btn-style-light" @click="toggleDropdown">Metric &nbsp;<i class="el-icon-arrow-down"></i></el-button>
<el-cascader-panel v-show="dropDownVisible" v-model="cascaderValue" slot="dropdown" ref="metricSelector" :props="{emitPath:false}" :options="metricOptions" @change="metricChange"></el-cascader-panel>
</el-dropdown>
</div>
<div class="inputBox">
<el-autocomplete :placeholder="$t('dashboard.metricPreview.inputTip')" :fetch-suggestions="filterInput" clearable @clear="clearExpression" :trigger-on-focus="false" v-model="expressionList[index]" @blur="expressionChange" style="width: 100%;height:36px"></el-autocomplete>
<div class="append-msg error" v-if="errorMsg"><span>{{errorMsg}}</span></div>
<div class="append-msg error" v-if="appendMsg"><span>{{appendMsg}}</span></div>
</div>
</div>
</div>
@@ -21,6 +22,7 @@
<div class="option nz-btn nz-btn-size-normal nz-btn-style-light" @click="removeExpression"><i class="el-icon-minus"></i></div>
</div>
</div>
</div>
</template>
@@ -37,6 +39,8 @@
metricStore:[],
metricOptions:[],
cascaderValue:'',
errorMsg:null,
appendMsg:null,
}
},
created() {
@@ -118,6 +122,13 @@
},
expressionChange:function(){
this.$emit('change')
},
setError:function(errMsg){
console.log(errMsg)
this.errorMsg=errMsg;
},
setMsg:function(){
this.appendMsg
}
},
watch:{
@@ -141,6 +152,14 @@
.promqlInput .query-row{
width: 100%;
}
.inputBox .append-msg{
font-size: 12px;
line-height: 1;
padding-top: 4px;
}
.inputBox .error{
color: #F56C6C;
}
.query-row .query-input{
display: flex;
justify-content: flex-start;

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

@@ -41,15 +41,14 @@
<div class="panel-calendar margin-r-20">
<div class="block">
<el-date-picker prefix-icon=" " class="nz-dashboard-picker" size="mini" ref="calendar"
<time-picker ref="calendarPanel" class="nz-dashboard-picker" @change="dateChange"></time-picker>
<!--
<el-date-picker prefix-icon=" " class="nz-dashboard-picker" size="mini" ref="calendar"
format="yyyy/MM/dd HH:mm" @change="dateChange" v-model="searchTime" type="datetimerange"
:picker-options="pickerOptions" :range-separator="$t('dashboard.panel.to')"
:start-placeholder="$t('dashboard.panel.startTime')"
:end-placeholder="$t('dashboard.panel.endTime')" align="right">
</el-date-picker>
<!--
<time-picker ref="calendarPanel" class="nz-dashboard-picker" @change="dateChange"></time-picker>
-->
</div>
</div>
@@ -104,7 +103,7 @@
import ChartBox from "./chartBox";
import ChartList from '../../charts/chart-list';
import bus from '../../../libs/bus';
//import timePicker from '../../common/timePicker'
import timePicker from '../../common/timePicker'
export default {
name: "panel",
@@ -116,6 +115,7 @@
show: false,
title: this.$t('dashboard.panel.createPanelTitle')
},
/*
pickerOptions: {
shortcuts: [{
text: this.$t("dashboard.panel.recOne"),
@@ -195,7 +195,7 @@
picker.$emit('pick', [start, end]);
}
}]
},
},*/
searchTime: [
new Date(bus.computeTimezone(new Date().getTime())).setMinutes(new Date(bus.computeTimezone(new Date().getTime())).getMinutes() - 5),
new Date(bus.computeTimezone(new Date().getTime()))
@@ -278,7 +278,7 @@
components: {
'chart-box': ChartBox,
'chart-list': ChartList,
//'time-picker':timePicker
'time-picker':timePicker
},
methods: {
//刷新
@@ -838,7 +838,6 @@
.nz-dashboard-picker {
}
</style>
<style lang="scss">
.panel .top-tools input {

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

@@ -46,7 +46,7 @@
<el-collapse v-model="currentProjectTitle" class="left-menu-bg" accordion style="padding-top:0px;" @change="projectChange" ref="projectLeft">
<el-collapse-item v-for="(item,index) in projectList" :key="item.name+item.id+index" :name="item.name+'-'+item.id">
<template slot="title">
<div class="sidebar-info-item" :class="{'sidebar-info-item-active': item.name+'-'+item.id==currentProjectTitle || item.id==currentProject.id}" @click="detailProjectInfo($event,item)" :id="'project-module-'+item.id">
<div class="sidebar-info-item" :class="{'sidebar-info-item-active': item.id==currentProject.id}" @click="detailProjectInfo($event,item)" :id="'project-module-'+item.id">
<div class="sidebar-info-item-txt">
<el-popover v-if="item.name.length > 14" trigger="hover" placement="top-start" :content="item.name" popper-class="transparent-pop">
<span slot="reference" class="">
@@ -497,6 +497,7 @@
//左侧module列表选中切换
changeModule(module) {
this.currentModule = module;
this.currentProject={};
this.endpointSearchLabel = {moduleId: ''};
this.$refs.projectSearch.clearSearch();
this.showSubList = false;