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

NEZ-1789 feat：ping,trace页面 改为标签输入框

Browse Source
This commit is contained in:
zyh
2022-04-14 17:53:15 +08:00
parent d51e8833b2 dcd2db3ee7
commit 4c45ed0078
11 changed files with 318 additions and 277 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
nezha-fronted/src/assets/css/components/common/bottomBox/panelTabNew.scss
View File

@@ -151,6 +151,18 @@
background: $--background-color-empty;
}
}
.date-range-panel{
.el-button--primary{
color: $--color-text-label;
background-color: $--color-primary;
border-color: $--color-primary;
}
.el-button--primary:hover{
color: $--color-text-label;
background-color: $--color-primary;
border-color: $--color-primary;
}
}
.nz-dashboard-dropdown {
height: 300px;

15
nezha-fronted/src/assets/css/components/common/timePicker.scss
View File

@@ -83,6 +83,7 @@
font-size: 14px;
.utc-str {
line-height: 44px;
text-align: right;
span{
font-size: 12px;
@@ -108,7 +109,7 @@
visibility: hidden !important;
position: absolute;
top: 0;
left: 0;
left: -20px;
}
.date-range-text {
@@ -163,7 +164,7 @@
}
.date-range-panel {
height: 460px;
// height: 460px;
width: 500px;
background: #FFFFFF;
box-shadow: 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
@@ -183,7 +184,9 @@
}
.content-input {
width: 230px;
.el-input{
width: auto;
.el-input__inner{
border: 1px solid #E7EAED;
border-radius: 2px;
@@ -198,10 +201,6 @@
}
}
.content-input:focus {
border: 1px solid #169AFF;
}
.date-range-history {
flex: 1;
overflow-y: auto;
@@ -247,11 +246,11 @@
background: #F5F5F5;
color: #333333;
}
li.active :hover {
li.activeLi :hover {
background: #F5F5F5;
color: $--color-primary !important;
}
li.active {
li.activeLi {
background: #F5F5F5;
color: $--color-primary !important;
font-weight: 400;

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

@@ -45,6 +45,7 @@
ref="pickTime"
style="height: 28px;"
id="line-chart"
:sign="chartInfo.id"
@unitChange="unitChange"
></pick-time>
</span>

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

@@ -86,6 +86,7 @@ export default {
}
this.legends = []
this.series = chartOption.series = this.handleTimeSeries(this.chartInfo, chartOption.series[0], this.chartData) // 生成series和legends
chartOption.color = this.colorList
if (!this.series.length) {
this.isNoData = true
this.$emit('chartIsNoData', this.isNoData)

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

@@ -38,9 +38,9 @@
<terminal-log-tab v-if="from === fromRoute.user && targetTab === 'terminalLogTab'" :from="from" :obj="obj" :tabs="tabs.user.terminalLog" @changeTab="changeTab" :targetTab.sync="targetTab"></terminal-log-tab>
<!-- asset列表的3个 -->
<panel-tab-new @getTableData="getTableData" :paramsType="'asset'" v-if="from === fromRoute.asset && targetTab === 'panelTab'" v-show="subResizeShow" :from="from" :obj="obj" :tabs="tabs.asset.panel" :targetTab.sync="targetTab" @changeTab="changeTab"></panel-tab-new>
<alertMessageTabNew v-if="from === fromRoute.asset && targetTab === 'alertMessageTab'" v-show="subResizeShow" :from="from" :obj="obj" :tabs="tabs.asset.alertMessage" :targetTab.sync="targetTab" @changeTab="changeTab" ></alertMessageTabNew>
<alertMessageTabNew v-if="from === fromRoute.asset && targetTab === 'alertMessageTab'" v-show="subResizeShow" :sign="sign+'alert'" :from="from" :obj="obj" :tabs="tabs.asset.alertMessage" :targetTab.sync="targetTab" @changeTab="changeTab" ></alertMessageTabNew>
<endpointTabNew v-if="from === fromRoute.asset && targetTab === 'endpointTab'" v-show="subResizeShow" :from="from" :obj="obj" :tabs="tabs.asset.endpoint" :targetTab.sync="targetTab" @changeTab="changeTab"></endpointTabNew>
<log-bottom-tab v-if="from === fromRoute.asset && targetTab === 'log'" v-show="subResizeShow" :from="from" :obj="obj" :tabs="tabs.asset.log" :targetTab.sync="targetTab" @changeTab="changeTab"></log-bottom-tab>
<log-bottom-tab v-if="from === fromRoute.asset && targetTab === 'log'" v-show="subResizeShow" :sign="sign+'log'" :from="from" :obj="obj" :tabs="tabs.asset.log" :targetTab.sync="targetTab" @changeTab="changeTab"></log-bottom-tab>
<assetSubTab v-if="from === fromRoute.asset && targetTab === 'assetSubTab' && obj.childrenNum" v-show="subResizeShow" :from="from" :obj="obj" :tabs="tabs.asset.alertMessageSub" @changeTab="changeTab" :targetTab.sync="targetTab"></assetSubTab>
<!--module列表的tab-->
<endpointTabNew v-if="from === fromRoute.module && targetTab === 'endpoint'" v-show="subResizeShow" :from="from" :obj="obj" :tabs="tabs.module.moduleTabTitle" :targetTab="targetTab" @changeTab="changeTab"></endpointTabNew>
@@ -49,8 +49,8 @@
<!--endpoint列表的tab-->
<panel-tab-new v-if="from === fromRoute.endpoint && targetTab === 'panelTab'" v-show="subResizeShow" :from="from" :obj="obj" :paramsType="'endpoint'" :tabs="endpointTabs" :targetTab.sync="targetTab" @changeTab="changeTab" @getTableData="getTableData"></panel-tab-new>
<endpointQuery v-if="from === fromRoute.endpoint && targetTab === 'Metrics'" v-show="subResizeShow" :from="from" :obj="obj" :tabs="endpointTabs" :targetTab.sync="targetTab" @changeTab="changeTab"></endpointQuery>
<log-bottom-tab v-if="from === fromRoute.endpoint && targetTab === 'log' && hasLogConfig" v-show="subResizeShow" :from="from" :obj="obj" :tabs="endpointTabs" :targetTab.sync="targetTab" @changeTab="changeTab"></log-bottom-tab>
<alertMessageTabNew v-if="from === fromRoute.endpoint && targetTab === 'endpointAlertMessage'" v-show="subResizeShow" :from="from" :obj="obj" :tabs="endpointTabs" :targetTab.sync="targetTab" @changeTab="changeTab"></alertMessageTabNew>
<log-bottom-tab v-if="from === fromRoute.endpoint && targetTab === 'log' && hasLogConfig" :sign="sign+'log'" v-show="subResizeShow" :from="from" :obj="obj" :tabs="endpointTabs" :targetTab.sync="targetTab" @changeTab="changeTab"></log-bottom-tab>
<alertMessageTabNew v-if="from === fromRoute.endpoint && targetTab === 'endpointAlertMessage'" :sign="sign+'alert'" v-show="subResizeShow" :from="from" :obj="obj" :tabs="endpointTabs" :targetTab.sync="targetTab" @changeTab="changeTab"></alertMessageTabNew>
<!--chartTemp的Tab-->
<panel-tab-new @getTableData="getTableData" :paramsType="'template'" v-if="from === fromRoute.chartTemp && targetTab === 'panel'" v-show="subResizeShow" :from="from" :obj="obj" :tabs="tabs.chartTemp.chartTempTabTitle" :targetTab.sync="targetTab" @changeTab="changeTab"></panel-tab-new>
<!--alertRule Tab-->
@@ -118,7 +118,8 @@ export default {
obj: Object, // 关联的实体对象
from: String, // 来自哪个页面
tabList: Array, // 动态页签列表
targetTab: String // 展示哪个页签
targetTab: String, // 展示哪个页签
sign:[Number,String], //pickTime历史记录的唯一标识
},
watch: {
obj: {

5
nezha-fronted/src/components/common/bottomBox/tabs/alertMessageTabNew.vue
View File

@@ -18,7 +18,7 @@
<el-select v-model="state" class="margin-r-10" size="small" value-key="value" :disabled="from === fromRoute.alertSilence" @change="getTableData" popper-class="right-box-select-top right-public-box-dropdown-top" style="width: 110px">
<el-option v-for="item in stateOptions" :key="item.value" :label="$t(item.label)" :value="item.value"></el-option>
</el-select>
<pick-time v-model="searchTimeHeader" :default-pick="10" :refresh-data-func="getTableData" :show-empty="true" :use-chart-unit="false" :use-refresh="false"></pick-time>
<pick-time v-model="searchTimeHeader" :default-pick="10" :refresh-data-func="getTableData" :show-empty="true" :use-chart-unit="false" :use-refresh="false" :sign="sign"></pick-time>
</template>
<template v-slot>
<alertMessageTable
@@ -149,7 +149,8 @@ export default {
alertMessageInfo
},
props: {
from: String
from: String,
sign:[Number,String]
},
watch: {
obj: {

5
nezha-fronted/src/components/common/bottomBox/tabs/logBottomTab.vue
View File

@@ -27,7 +27,7 @@
</el-option>
</el-select>
</el-input>
<pick-time id="explore" ref="pickTime" v-model="filterTime" :refresh-data-func="queryLogData" :use-chart-unit="false" :use-refresh="false">
<pick-time id="explore" ref="pickTime" v-model="filterTime" :refresh-data-func="queryLogData" :sign="sign" :use-chart-unit="false" :use-refresh="false">
<template slot="added-text">{{$t('overall.query')}}</template>
</pick-time>
</template>
@@ -54,6 +54,9 @@ export default {
nzBottomDataList,
logTab
},
props: {
sign:[Number,String]
},
data () {
return {
logData: null,

7
nezha-fronted/src/components/common/bottomBox/tabs/panelTabNew.vue
View File

@@ -13,7 +13,7 @@
<template v-slot:title><span :title="obj.name">{{obj.name}}</span></template>
<template v-slot:top-tool-right>
<div v-if="from === fromRoute.asset" style="display: flex">
<pick-time ref="pickTime" v-model="searchTime" :refresh-data-func="dateChange" :use-chart-unit="false"></pick-time>
<pick-time ref="pickTime" v-model="searchTime" :refresh-data-func="dateChange" :use-chart-unit="false" :sign="'panel' + obj.id"></pick-time>
<button id="panel-add-chart" v-has="'main_add'" :title="$t('overall.createChart')" class="top-tool-btn margin-r-10"
type="button" @click="addChart">
<i class="nz-icon-create-square nz-icon"></i>
@@ -48,7 +48,7 @@
</top-tool-more-options>
</div>
<div v-else-if="from === fromRoute.endpoint" style="display: flex">
<pick-time ref="pickTime" v-model="searchTime" :refresh-data-func="dateChange" :use-chart-unit="false"></pick-time>
<pick-time ref="pickTime" v-model="searchTime" :refresh-data-func="dateChange" :use-chart-unit="false" :sign="'panel' + obj.id"></pick-time>
<button id="endpoint-create-chart" v-has="'main_add'" :title="$t('overall.createChart')" class="top-tool-btn margin-r-10" @click.stop="addChart">
<i class="nz-icon nz-icon-create-square"></i>
</button>
@@ -163,7 +163,8 @@ export default {
paramsType: {
type: String,
default: 'dashboard'
}
},
sign:[Number,String]
},
computed: {
chartRightBoxShow () {

3
nezha-fronted/src/components/common/table/nzDataList.vue
View File

@@ -67,6 +67,7 @@
@getTableData = 'getTableData'
ref="bottomBox"
:from="from"
:sign ="sign"
:is-full-screen="bottomBox.isFullScreen"
:obj="bottomBox.object"
:sub-resize-show="bottomBox.subResizeShow"
@@ -153,6 +154,7 @@ export default {
},
data () {
return {
sign:'',
fromRoute: fromRoute,
/* 二级页面相关 */
bottomBox: {
@@ -193,6 +195,7 @@ export default {
bottomBoxWindow.listResize(vm, e)
},
showBottomBox (targetTab, row) {
this.sign = row.id
this.bottomBox.targetTab = targetTab
this.bottomBox.object = JSON.parse(JSON.stringify(row))
this.bottomBox.showSubList = true

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

@@ -3,6 +3,7 @@
id="panel-calender"
:class="{ 'calendar--small': size === 'small' }"
class="calendar"
v-clickoutside="changeDropdownFlag"
>
<div @click="showDropdown" class="date-range-text">
@@ -19,7 +20,11 @@
</div>
</div>
<div class="calendar-popover-text" v-else>
<el-tooltip class="item" effect="light" placement="bottom">
<div slot="content"> {{searchTime[0]}}<br/><p style="text-align:center">{{$t("dashboard.panel.to")}} </p>{{searchTime[1]}}</div>
<div class="time-no-data">{{ showTime.text }}</div>
</el-tooltip>
<!-- <div class="time-no-data">{{ showTime.text }}</div> -->
</div>
<div class="calendar-popover-text">
<i class="el-icon-arrow-down"></i>
@@ -33,7 +38,7 @@
class="date-range-panel-content date-range-panel-content-left"
>
<div class="date-range-title" style="padding-left: 0">
Absolute time range
{{$t('timepicker.timerange')}}
</div>
<my-date-picker
prefix-icon=" "
@@ -49,26 +54,26 @@
>
</my-date-picker>
<div class="content-title">From</div>
<div class="content-title">{{$t('dashboard.panel.chartForm.valMapping.from')}}</div>
<div @click="myDatePickerShow('start')" tabindex="1" class="content-input">
<el-input v-model="searchTime[0]" @change="dateChange('start',searchTime[0])"> </el-input>
</div>
<div class="content-title">To</div>
<div class="content-title">{{$t('dashboard.panel.chartForm.valMapping.to')}}</div>
<div @click="myDatePickerShow('end')" tabindex="2" class="content-input">
<el-input v-model="searchTime[1]" @change="dateChange('end',searchTime[1])"> </el-input>
</div>
<div>
<el-button
@click="timeRange(searchTime)"
type="primary"
size="mini"
>Apply time range</el-button
class="time-range-button el-button--primary"
>{{$t('timepicker.applytimerange')}}</el-button
>
</div>
<div class="date-range-title" style="padding-left: 0">
Recently used absolute ranges
{{$t('timepicker.recentlyUsed')}}
</div>
<div class="date-range-history">
<div
@@ -78,7 +83,7 @@
@click="historyChange(item)"
>
{{ timeFormate(item.start) }}
—
{{ $t("dashboard.panel.to") }}
{{ timeFormate(item.end) }}
</div>
</div>
@@ -88,13 +93,15 @@
class="date-range-panel-content date-range-panel-content-right"
style="border-left: 1px solid rgba(0, 0, 0, 0.09)"
>
<div class="date-range-title">Relatime time ranges</div>
<div class="date-range-title">{{$t('timepicker.relatime')}}</div>
<ul class="date-range-item">
<li
v-for="(item, key) in timeData"
@click="timeChange(item)"
:class="showTime.id === item.id ? 'active' : ''"
:class="showTime.id === item.id ? 'activeLi' : ''"
:key="key"
:v-if="item.id !== 12 || showEmpty"
>
<span
style="position: relative"
@@ -124,37 +131,37 @@
</template>
<script>
import bus from "@/libs/bus";
import bus from '@/libs/bus'
export default {
name: "timePicker",
name: 'timePicker',
props: {
defaultPick: Number,
showEmpty: { default: false, type: Boolean },
size: {
type: String,
type: String
},
sign:[Number,String]
sign: [Number, String]
},
data() {
data () {
return {
whoChoose:'',
searchTimeValue:'',
whoChoose: '',
searchTimeValue: '',
rangeHistory: [],
rangeHistoryArr: [],
address: "",
utc: localStorage.getItem("timezoneOffset"),
utcStr: "",
address: '',
utc: localStorage.getItem('timezoneOffset'),
utcStr: '',
dropdownFlag: false,
isPopoverDisabled: false,
isCustom: false,
searchTime: [
bus.timeFormate(bus.getOffsetTimezoneData(-1)),
bus.timeFormate(bus.getOffsetTimezoneData()),
bus.timeFormate(bus.getOffsetTimezoneData())
],
showTime: {
id: 4,
text: this.$t("dashboard.panel.lastOneHour"),
text: this.$t('dashboard.panel.lastOneHour')
},
timeData: [
// {
@@ -164,232 +171,226 @@ export default {
// },
{
id: 12,
text: this.$t("dashboard.panel.noDate"),
value: 0,
text: this.$t('dashboard.panel.noDate'),
value: 0
},
{
id: 1,
text: this.$t("dashboard.panel.lastFiveMin"),
type: "minute",
value: 5,
text: this.$t('dashboard.panel.lastFiveMin'),
type: 'minute',
value: 5
},
{
id: 2,
text: this.$t("dashboard.panel.lastFifteenMin"),
type: "minute",
value: 15,
text: this.$t('dashboard.panel.lastFifteenMin'),
type: 'minute',
value: 15
},
{
id: 3,
text: this.$t("dashboard.panel.lastThirtyMin"),
type: "minute",
value: 30,
text: this.$t('dashboard.panel.lastThirtyMin'),
type: 'minute',
value: 30
},
{
id: 4,
text: this.$t("dashboard.panel.lastOneHour"),
type: "hour",
value: 1,
text: this.$t('dashboard.panel.lastOneHour'),
type: 'hour',
value: 1
},
{
id: 5,
text: this.$t("dashboard.panel.lastThreeHour"),
type: "hour",
value: 3,
text: this.$t('dashboard.panel.lastThreeHour'),
type: 'hour',
value: 3
},
{
id: 6,
text: this.$t("dashboard.panel.lastSixHour"),
type: "hour",
value: 6,
text: this.$t('dashboard.panel.lastSixHour'),
type: 'hour',
value: 6
},
{
id: 7,
text: this.$t("dashboard.panel.lastTwelveHour"),
type: "hour",
value: 12,
text: this.$t('dashboard.panel.lastTwelveHour'),
type: 'hour',
value: 12
},
{
id: 8,
text: this.$t("dashboard.panel.lastTwentyFourHour"),
type: "hour",
value: 24,
text: this.$t('dashboard.panel.lastTwentyFourHour'),
type: 'hour',
value: 24
},
{
id: 9,
text: this.$t("dashboard.panel.lastTwoDay"),
type: "date",
value: 2,
text: this.$t('dashboard.panel.lastTwoDay'),
type: 'date',
value: 2
},
{
id: 10,
text: this.$t("dashboard.panel.lastSevenDay"),
type: "date",
value: 7,
text: this.$t('dashboard.panel.lastSevenDay'),
type: 'date',
value: 7
},
{
id: 11,
text: this.$t("dashboard.panel.lastThirtyDay"),
type: "date",
value: 30,
},
text: this.$t('dashboard.panel.lastThirtyDay'),
type: 'date',
value: 30
}
],
nowTimeType: {
id: 4,
text: this.$t("dashboard.panel.lastOneHour"),
type: "hour",
value: 1,
text: this.$t('dashboard.panel.lastOneHour'),
type: 'hour',
value: 1
}
}
},
};
},
mounted() {
this.getItem();
this.getUtcStr();
this.getRangeHistoryArr();
console.log(this.sign);
mounted () {
this.getItem()
this.getUtcStr()
this.getRangeHistoryArr()
},
methods: {
getItem() {
this.rangeHistory = localStorage.getItem("date-range-history"+this.sign)
? JSON.parse(localStorage.getItem("date-range-history"+this.sign))
: [];
this.address = localStorage.getItem("nz-sys-timezone");
this.utc = localStorage.getItem("timezoneOffset");
changeDropdownFlag(){
if (this.dropdownFlag) {
this.dropdownFlag = false
}
},
myDatePickerShow(item) {
getItem () {
this.rangeHistory = localStorage.getItem('date-range-history' + this.sign)
? JSON.parse(localStorage.getItem('date-range-history' + this.sign))
: []
this.address = localStorage.getItem('nz-sys-timezone')
this.utc = localStorage.getItem('timezoneOffset')
},
myDatePickerShow (item) {
this.whoChoose = item
this.$refs.calendar.pickerVisible = true;
this.isCustom = true
this.$refs.calendar.focus()
this.$refs.calendar.pickerVisible = true
if (document.getElementById('viewGraphDialog')) {
// 处理 多弹出的z-index的问题 当前为 alertMessage的处理
const viewGraphDialogStyle = window.getComputedStyle(
document.getElementById('viewGraphDialog', null)
)
setTimeout(() => {
if (viewGraphDialogStyle['z-index'] !== 'auto') {
const dom =
document.getElementsByClassName('el-picker-panel')
Array.prototype.forEach.call(dom, function (element) {
element.style['z-index'] =
viewGraphDialogStyle['z-index'] + 1
})
this.$refs.calendar.$el.style['z-index'] =
viewGraphDialogStyle['z-index'] + 1
}
})
}
},
historyChange(item) {
this.searchTime[0] = item.start;
this.searchTime[1] = item.end;
this.isCustom = true;
this.showDropdown();
this.$emit("change", this.searchTime);
this.setSearchTime('','',this.searchTime)
historyChange (item) {
this.searchTime[0] = item.start
this.searchTime[1] = item.end
this.isCustom = true
this.showDropdown()
this.$emit('change', this.searchTime)
this.setSearchTime('', '', this.searchTime)
},
getRangeHistoryArr() {
getRangeHistoryArr () {
const arr = this.rangeHistory.slice(0, 3)
this.rangeHistoryArr = arr
},
getUtcStr() {
let str = "UTC ";
this.utcStr = str + this.utc;
getUtcStr () {
const str = 'UTC '
this.utcStr = str + this.utc
},
timeRange(item) {
this.isCustom = true;
timeRange (item) {
this.showTime = this.nowTimeType = {
id: 0,
text: this.$t('dashboard.panel.customTimeRange'),
value: -1
}
this.isCustom = true
this.rangeHistory.unshift({
start: item[0],
end: item[1],
});
end: item[1]
})
localStorage.setItem(
"date-range-history"+this.sign,
'date-range-history' + this.sign,
JSON.stringify(this.rangeHistory)
);
this.searchTime[2]=''
this.showDropdown();
)
this.$set(this.searchTime, 2, '')
this.showDropdown()
this.getRangeHistoryArr()
console.log('timerange里searchTime',this.searchTime);
this.$emit("change", this.searchTime);
this.setSearchTime('','',this.searchTime)
this.setSearchTime('', '', this.searchTime)
this.$emit('change', this.searchTime)
},
showDropdown() {
this.dropdownFlag = !this.dropdownFlag;
showDropdown () {
this.dropdownFlag = !this.dropdownFlag
},
dateChange(type,v) {
if(type == 'start'){
if(!v){
const startTime = bus.timeFormate(this.searchTimeValue).trim().split(" ")[0] + ' ';
this.$set(this.searchTime, 0, startTime);
}else{
console.log(v);
let str = v.trim().split(' ')[1]
console.log(str);
let reg = /^([01]\d|2[0-3]):[0-5]\d:[0-5]\d$/
if(reg.test(str)){
dateChange (type, v) {
if (type == 'start') {
if (!v) {
const startTime = bus.timeFormate(this.searchTimeValue).trim().split(' ')[0] + ' '
this.$set(this.searchTime, 0, startTime)
} else {
const str = v.trim().split(' ')[1]
const reg = /^([01]\d|2[0-3]):[0-5]\d:[0-5]\d$/
if (reg.test(str)) {
const startTime = bus.timeFormate(v)
this.$set(this.searchTime, 0, startTime);
}else{
this.$set(this.searchTime, 0, '');
this.$set(this.searchTime, 0, startTime)
} else {
this.$set(this.searchTime, 0, '')
}
}
}else if(type == 'end'){
if(!v){
const endTime = bus.timeFormate(this.searchTimeValue).trim().split(" ")[0] + ' ';
this.$set(this.searchTime, 1, endTime);
}else{
let str = v.trim().split(' ')[1]
console.log(str);
let reg = /^([01]\d|2[0-3]):[0-5]\d:[0-5]\d$/
if(reg.test(str)){
} else if (type == 'end') {
if (!v) {
const endTime = bus.timeFormate(this.searchTimeValue).trim().split(' ')[0] + ' '
this.$set(this.searchTime, 1, endTime)
} else {
const str = v.trim().split(' ')[1]
const reg = /^([01]\d|2[0-3]):[0-5]\d:[0-5]\d$/
if (reg.test(str)) {
const endTime = bus.timeFormate(v)
this.$set(this.searchTime, 1, endTime);
}else{
this.$set(this.searchTime, 1, '');
this.$set(this.searchTime, 1, endTime)
} else {
this.$set(this.searchTime, 1, '')
}
}
}
this.searchTime[2] = ''
console.log('searchTime',this.searchTime);
this.$set(this.showTime, "id", 0);
this.$set(this.showTime, 'id', 0)
this.$set(
this.showTime,
"text",
'text',
this.searchTime[0] +
" " +
this.$t("dashboard.panel.to") +
" " +
' ' +
this.$t('dashboard.panel.to') +
' ' +
this.searchTime[1]
);
console.log('showTime',this.showTime);
)
},
setCustomTime(timeGroup, timeRange) {
setCustomTime (timeGroup, timeRange) {
if (timeGroup) {
console.log('timeGroup',timeGroup);
this.showTime = this.nowTimeType = this.timeData.find(
(item) => item.id == timeGroup.id
);
console.log(this.showTime);
)
if (this.showTime) {
this.showTime = Object.assign({}, this.showTime);
this.$set(this.searchTime, 0, timeGroup.start_time);
this.$set(this.searchTime, 1, timeGroup.end_time);
this.showTime = Object.assign({}, this.showTime)
this.$set(this.searchTime, 0, timeGroup.start_time)
this.$set(this.searchTime, 1, timeGroup.end_time)
} else {
const time = this.searchTime.splice(' ')
this.showTime= this.nowTimeType ={
text:time[0] +' ' + this.$t('dashboard.panel.to') +' '+time[1]
}
console.log(this.showTime);
this.$set(this.searchTime, 0, bus.timeFormate(time[0]));
this.$set(this.searchTime, 1, bus.timeFormate(time[1]));
// this.$set(this.searchTime, 0, bus.timeFormate(timeGroup.start_time));
// this.$set(this.searchTime, 1, bus.timeFormate(timeGroup.end_time));
// const time = this.searchTime.splice(' ')
// this.showTime = this.nowTimeType = {
// id: 4,
// text: this.$t("dashboard.panel.lastOneHour"),
// type: "hour",
// value: 1,
// };
// const time = bus.getTimezontDateRange();
// if (timeGroup.start_time) {
// this.$set(
// this.searchTime,
// 0,
// bus.timeFormate(timeGroup.start_time)
// );
// this.$set(this.searchTime, 1, bus.timeFormate(timeGroup.end_time));
// } else {
// this.$set(this.searchTime, 0, bus.timeFormate(time[0]));
// this.$set(this.searchTime, 1, bus.timeFormate(time[1]));
// text: time[0] + ' ' + this.$t('dashboard.panel.to') + ' ' + time[1]
// }
// this.$set(this.searchTime, 0, bus.timeFormate(time[0]));
}
} else {
console.log('no timegroup');
// this.$set(this.searchTime, 0, bus.timeFormate(time[0]))
// this.$set(this.searchTime, 1, bus.timeFormate(time[1]))
this.$set(this.searchTime, 0, bus.timeFormate(timeGroup.start_time));
this.$set(this.searchTime, 1, bus.timeFormate(timeGroup.end_time));
this.showTime = this.nowTimeType = {
id: 4,
text: this.$t("dashboard.panel.lastOneHour"),
@@ -397,64 +398,82 @@ export default {
value: 1,
};
const time = bus.getTimezontDateRange();
this.$set(this.searchTime, 0, time[0]);
this.$set(this.searchTime, 1, time[1]);
if (timeGroup.start_time) {
this.$set(
this.searchTime,
0,
bus.timeFormate(timeGroup.start_time)
);
this.$set(this.searchTime, 1, bus.timeFormate(timeGroup.end_time));
} else {
this.$set(this.searchTime, 0, bus.timeFormate(time[0]));
this.$set(this.searchTime, 1, bus.timeFormate(time[1]));
}
this.$set(this.searchTime, 0, bus.timeFormate(time[0]));
}
} else {
this.showTime = this.nowTimeType = {
id: 4,
text: this.$t('dashboard.panel.lastOneHour'),
type: 'hour',
value: 1
}
const time = bus.getTimezontDateRange()
this.$set(this.searchTime, 0, time[0])
this.$set(this.searchTime, 1, time[1])
}
},
timeChange(val, from) {
console.log(val, from);
this.nowTimeType = val;
this.$set(this.showTime, "id", val.id);
this.$set(this.showTime, "text", val.text);
timeChange (val, from) {
this.nowTimeType = val
this.$set(this.showTime, 'id', val.id)
this.$set(this.showTime, 'text', val.text)
if (!val) {
this.isCustom = false;
return false;
this.isCustom = false
return false
} else {
this.setSearchTime(val.type, val.value);
this.setSearchTime(val.type, val.value)
const id = val.id;
const id = val.id
if (id === 0) {
// custom
if (from === "chart") {
this.isCustom = false;
this.$emit("change", this.searchTime);
if (from === 'chart') {
this.isCustom = false
this.$emit('change', this.searchTime)
} else {
this.isCustom = true;
this.$refs.calendar.focus();
this.$refs.calendar.pickerVisible = true;
if (document.getElementById("viewGraphDialog")) {
this.isCustom = true
this.$refs.calendar.focus()
this.$refs.calendar.pickerVisible = true
if (document.getElementById('viewGraphDialog')) {
// 处理 多弹出的z-index的问题 当前为 alertMessage的处理
const viewGraphDialogStyle = window.getComputedStyle(
document.getElementById("viewGraphDialog", null)
);
document.getElementById('viewGraphDialog', null)
)
setTimeout(() => {
if (viewGraphDialogStyle["z-index"] !== "auto") {
if (viewGraphDialogStyle['z-index'] !== 'auto') {
const dom =
document.getElementsByClassName("el-picker-panel");
document.getElementsByClassName('el-picker-panel')
Array.prototype.forEach.call(dom, function (element) {
element.style["z-index"] =
viewGraphDialogStyle["z-index"] + 1;
});
this.$refs.calendar.$el.style["z-index"] =
viewGraphDialogStyle["z-index"] + 1;
element.style['z-index'] =
viewGraphDialogStyle['z-index'] + 1
})
this.$refs.calendar.$el.style['z-index'] =
viewGraphDialogStyle['z-index'] + 1
}
});
})
}
}
} else {
console.log('else',this.searchTime);
// this.isCustom = false;
this.isCustom = false;
this.showDropdown()
if (this.showEmpty && id === 12) {
this.searchTime = [];
this.searchTime = []
}
this.$emit("change", this.searchTime);
this.$emit('change', this.searchTime)
}
}
},
getCurrentTime() {
return this.searchTime;
getCurrentTime () {
return this.searchTime
// let timeTypeId = this.showTime.id;
// if (timeTypeId === 0) {
// return this.searchTime;
@@ -469,80 +488,79 @@ export default {
// return this.searchTime;
// }
},
setSearchTime(type, val,time) {
if (type === "minute") {
setSearchTime (type, val, time) {
if (type === 'minute') {
const startTime = bus.timeFormate(
new Date(bus.computeTimezone(new Date().getTime())).setMinutes(
new Date(bus.computeTimezone(new Date().getTime())).getMinutes() -
val
)
);
)
const endTime = bus.timeFormate(
new Date(bus.computeTimezone(new Date().getTime()))
);
this.$set(this.searchTime, 0, startTime);
this.$set(this.searchTime, 1, endTime);
this.$set(this.searchTime, 2, val + "m");
} else if (type === "hour") {
)
this.$set(this.searchTime, 0, startTime)
this.$set(this.searchTime, 1, endTime)
this.$set(this.searchTime, 2, val + 'm')
} else if (type === 'hour') {
const startTime = bus.timeFormate(
new Date(bus.computeTimezone(new Date().getTime())).setHours(
new Date(bus.computeTimezone(new Date().getTime())).getHours() - val
)
);
)
const endTime = bus.timeFormate(
new Date(bus.computeTimezone(new Date().getTime()))
);
this.$set(this.searchTime, 0, startTime);
this.$set(this.searchTime, 1, endTime);
this.$set(this.searchTime, 2, val + "h");
} else if (type === "date") {
)
this.$set(this.searchTime, 0, startTime)
this.$set(this.searchTime, 1, endTime)
this.$set(this.searchTime, 2, val + 'h')
} else if (type === 'date') {
const startTime = bus.timeFormate(
new Date(bus.computeTimezone(new Date().getTime())).setDate(
new Date(bus.computeTimezone(new Date().getTime())).getDate() - val
)
);
)
const endTime = bus.timeFormate(
new Date(bus.computeTimezone(new Date().getTime()))
);
this.$set(this.searchTime, 0, startTime);
this.$set(this.searchTime, 1, endTime);
this.$set(this.searchTime, 2, val + "d");
}else{
this.$set(this.searchTime, 0, time[0]);
this.$set(this.searchTime, 1, time[1]);
)
this.$set(this.searchTime, 0, startTime)
this.$set(this.searchTime, 1, endTime)
this.$set(this.searchTime, 2, val + 'd')
} else {
this.$set(this.searchTime, 0, time[0])
this.$set(this.searchTime, 1, time[1])
}
},
setCostomTime: function (costomTime) {
this.searchTime = Object.assign(costomTime);
const val = Object.assign(this.timeData[0]);
this.$set(this.showTime, "id", val.id);
this.$set(this.showTime, "text", val.text);
this.searchTime = Object.assign(costomTime)
const val = Object.assign(this.timeData[0])
this.$set(this.showTime, 'id', val.id)
this.$set(this.showTime, 'text', val.text)
},
popoverClick(val) {
popoverClick (val) {
if (val) {
this.isPopoverDisabled = true;
this.isPopoverDisabled = true
} else {
this.isPopoverDisabled = false;
this.isPopoverDisabled = false
}
}
},
},
watch: {
defaultPick: {
immediate: true,
handler(n, o) {
handler (n, o) {
if (n && Number.isInteger(n)) {
const showTime = this.timeData.find((item) => item.id == n);
const showTime = this.timeData.find((item) => item.id == n)
if (showTime) {
this.showTime = Object.assign({}, showTime);
this.searchTime = this.$parent.searchTime;
this.showTime = Object.assign({}, showTime)
this.searchTime = this.$parent.searchTime
}
if (this.showEmpty && this.defaultPick === 12) {
this.searchTime = [];
this.searchTime = []
}
}
},
},
},
};
}
}
}
}
</script>

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

@@ -18,7 +18,7 @@
<button id="asset-filter" :class="[dataListLayout.indexOf('clickSearch') > -1?'is-focus':'' ]" class="top-tool-btn margin-r-10" @click.stop="showClickSearch">
<i class="nz-icon nz-icon-funnel"></i>
</button>
<pick-time v-model="searchTime" :default-pick="10" :refresh-data-func="getTableData" :show-empty="true" :use-chart-unit="false" :use-refresh="false"></pick-time>
<pick-time v-model="searchTime" :sign="sign?sign:'message'" :default-pick="10" :refresh-data-func="getTableData" :show-empty="false" :use-chart-unit="false" :use-refresh="false"></pick-time>
<button id="roles-add" v-has="'alertMessage_view'" :title="$t('overall.exportExcelLower')" class="top-tool-btn margin-r-10"
type="button" @click="showExportDialog">
<i class="nz-icon-download1 nz-icon"></i>
@@ -578,6 +578,7 @@ export default {
})
},
messageDetail (row) {
this.sign = Number(row.alertRule.id)
this.$get('/alert/rule/' + row.alertRule.id).then(res => {
this.currentMsg = { ...row, alertRule: { ...res.data } }
this.$nextTick(() => {