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

feat:新功能

Browse Source 
1 panel图表错误提示信息参考grafana：全屏，预览部分
2 panel时间选择：custom部分（panel列表，全屏，预览）
This commit is contained in:
hyx
2020-04-24 17:00:56 +08:00
parent 9b12528b0d
commit 37586c40cd
9 changed files with 311 additions and 144 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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;
}
}
});
/*

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日'

182
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" @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,32 +211,83 @@ 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);
}
}
},
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);
}
},
popoverClick(val){
@@ -204,7 +297,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>

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 {