feat:新功能
1 panel图表错误提示信息参考grafana：全屏，预览部分 2 panel时间选择：custom部分（panel列表，全屏，预览）
This commit is contained in:
hyx
@@ -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);
|
||||
}
|
||||
}
|
||||
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>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user