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; 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 { .nz-dashboard-dropdown {
height: 300px; height: 300px;

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

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

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

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

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

@@ -86,6 +86,7 @@ export default {
} }
this.legends = [] this.legends = []
this.series = chartOption.series = this.handleTimeSeries(this.chartInfo, chartOption.series[0], this.chartData) // 生成series和legends this.series = chartOption.series = this.handleTimeSeries(this.chartInfo, chartOption.series[0], this.chartData) // 生成series和legends
chartOption.color = this.colorList
if (!this.series.length) { if (!this.series.length) {
this.isNoData = true this.isNoData = true
this.$emit('chartIsNoData', this.isNoData) 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> <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个 --> <!-- 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> <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> <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> <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--> <!--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> <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--> <!--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> <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> <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> <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'" v-show="subResizeShow" :from="from" :obj="obj" :tabs="endpointTabs" :targetTab.sync="targetTab" @changeTab="changeTab"></alertMessageTabNew> <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--> <!--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> <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--> <!--alertRule Tab-->
@@ -118,7 +118,8 @@ export default {
obj: Object, // 关联的实体对象 obj: Object, // 关联的实体对象
from: String, // 来自哪个页面 from: String, // 来自哪个页面
tabList: Array, // 动态页签列表 tabList: Array, // 动态页签列表
targetTab: String // 展示哪个页签 targetTab: String, // 展示哪个页签
sign:[Number,String], //pickTime历史记录的唯一标识
}, },
watch: { watch: {
obj: { 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-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-option v-for="item in stateOptions" :key="item.value" :label="$t(item.label)" :value="item.value"></el-option>
</el-select> </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>
<template v-slot> <template v-slot>
<alertMessageTable <alertMessageTable
@@ -149,7 +149,8 @@ export default {
alertMessageInfo alertMessageInfo
}, },
props: { props: {
from: String from: String,
sign:[Number,String]
}, },
watch: { watch: {
obj: { obj: {

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

@@ -27,7 +27,7 @@
</el-option> </el-option>
</el-select> </el-select>
</el-input> </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> <template slot="added-text">{{$t('overall.query')}}</template>
</pick-time> </pick-time>
</template> </template>
@@ -54,6 +54,9 @@ export default {
nzBottomDataList, nzBottomDataList,
logTab logTab
}, },
props: {
sign:[Number,String]
},
data () { data () {
return { return {
logData: null, 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:title><span :title="obj.name">{{obj.name}}</span></template>
<template v-slot:top-tool-right> <template v-slot:top-tool-right>
<div v-if="from === fromRoute.asset" style="display: flex"> <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" <button id="panel-add-chart" v-has="'main_add'" :title="$t('overall.createChart')" class="top-tool-btn margin-r-10"
type="button" @click="addChart"> type="button" @click="addChart">
<i class="nz-icon-create-square nz-icon"></i> <i class="nz-icon-create-square nz-icon"></i>
@@ -48,7 +48,7 @@
</top-tool-more-options> </top-tool-more-options>
</div> </div>
<div v-else-if="from === fromRoute.endpoint" style="display: flex"> <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"> <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> <i class="nz-icon nz-icon-create-square"></i>
</button> </button>
@@ -163,7 +163,8 @@ export default {
paramsType: { paramsType: {
type: String, type: String,
default: 'dashboard' default: 'dashboard'
} },
sign:[Number,String]
}, },
computed: { computed: {
chartRightBoxShow () { chartRightBoxShow () {

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

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

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

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