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

fix : 时间选择器优化样式修改 历史记录绑定

Browse Source
This commit is contained in:
zhangxiaolong
2022-04-13 15:57:03 +08:00
parent a848db4267
commit 9b7f36f405
5 changed files with 42 additions and 85 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -58,7 +58,7 @@
margin-left: 4px;
}
.panel-time-picker-popper[x-placement^=bottom] .popper__arrow {
left: 85% !important;
left: 50% !important;
}
.panel-time-picker-popper .el-date-table td.today span {
@@ -84,6 +84,10 @@
.utc-str {
text-align: right;
span{
font-size: 12px;
background: $--background-color-2;
}
}
}
.date-range-refresh {
@@ -96,6 +100,8 @@
.date-range-item {
list-style-type: none;
font-size: 14px;
font-weight: 400;
}
.panel-time-picker-hidden {
@@ -157,25 +163,23 @@
}
.date-range-panel {
height: 480px;
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);
position: absolute;
right: 5%;
top: 34px;
right: 4%;
top: 50px;
z-index: 1;
.date-range-panel-content-left {
padding-left: 10px;
display: flex;
flex-direction: column;
.content-title {
font-size: 14px;
color: #666666;
font-weight: 400;
margin-bottom: 12px;
}
.content-input {
@@ -204,12 +208,14 @@
.date-range-history-item {
padding: 5px 0;
font-size: 12px;
font-weight: 400;
cursor: pointer;
}
.date-range-history-item:hover {
/*font-weight: 600;*/
background: #f9f9f9;
background: $--background-color-2;
}
}
}
@@ -238,16 +244,16 @@
}
li:hover {
background: #F2F9FF;
background: #F5F5F5;
color: #333333;
}
li.active :hover {
background: $--color-primary;
color: $--time-picker-hover-color !important;
background: #F5F5F5;
color: $--color-primary !important;
}
li.active {
background: $--color-primary;
color: $--time-picker-hover-color !important;
background: #F5F5F5;
color: $--color-primary !important;
font-weight: 400;
.cn-icon-check {

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

@@ -1,6 +1,6 @@
<template>
<div class="interval-refresh margin-r-10">
<time-picker v-if="showTimePicker" ref="timePicker" v-model="searchTime" :default-pick="defaultPick" :show-empty="showEmpty" class="time-picker margin-r-10" size="small" @change="dateChange"></time-picker>
<time-picker v-if="showTimePicker" ref="timePicker" v-model="searchTime" :default-pick="defaultPick" :show-empty="showEmpty" class="time-picker margin-r-10" size="small" @change="dateChange" :sign="sign"></time-picker>
<multipleTime v-if="showMultiple" ref="multipleTime" :stepSearchTime="searchTime" class="multiple-time margin-r-10" @change="dateChange(searchTime)"/>
<chart-unit v-if="useChartUnit" v-model="unit" class="margin-r-10"></chart-unit>
<div v-show="useRefresh" class="top-tool-btn-group">
@@ -66,7 +66,8 @@ export default {
},
defaultPick: Number,
showEmpty: { type: Boolean, default: false },
id: String
id: String,
sign:[Number,String]
},
data () {
return {

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

@@ -4,24 +4,7 @@
:class="{ 'calendar--small': size === 'small' }"
class="calendar"
>
<!-- <my-date-picker
prefix-icon=" "
class="panel-time-picker-hidden"
size="mini"
ref="calendar"
:value-format="timeFormatStrToDatePickFormat(timeFormatMain)"
:format="timeFormatStrToDatePickFormat(timeFormatMain)"
@change="dateChange"
v-model="searchTime"
type="datetimerange"
popper-class="panel-time-picker-popper time-picker-popover__select-top"
:default-time="['00:00:00', '23:59:59']"
:range-separator="$t('dashboard.panel.to')"
:start-placeholder="$t('dashboard.panel.startTime')"
:end-placeholder="$t('dashboard.panel.endTime')"
align="right"
>
</my-date-picker> -->
<div @click="showDropdown" class="date-range-text">
<div class="calendar-popover-text">
<i class="nz-icon nz-icon-time"></i>
@@ -42,46 +25,6 @@
<i class="el-icon-arrow-down"></i>
</div>
</div>
<!-- <el-dropdown ref="timePickerDropdown" class="calendar-dropdown-title" trigger="click" @command="timeChange" @visible-change="popoverClick">
<el-popover
placement="bottom-end"
min-width="120px"
:visible-arrow="false"
:disabled="isPopoverDisabled"
trigger="hover"
popper-class="popper-z-index right-box-select-top right-public-box-dropdown-top"
id="panel-calender-popover">
<template v-if="this.searchTime&&this.searchTime.length>1">
<el-row :gutter="10" class="calendar-popover">
<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" class="calendar-popover-text">{{$t('dashboard.panel.to')}}</el-col>
</el-row>
<el-row :gutter="10" class="calendar-popover">
<el-col :span="24" class="calendar-popover-text">{{searchTime[1]}}</el-col>
</el-row>
</template>
<template v-else>
<div class="time-no-data">{{$t("dashboard.panel.noDate")}}</div>
</template>
<div class="el-dropdown-link" slot="reference">
<i class="nz-icon nz-icon-time" style="width:20px;"></i>
<span class="panel-list-title" id="timePickerContent">{{showTime.text}}</span>
<span class="dropdown--suffix">
<i class="el-icon-arrow-down"></i>
</span>
</div>
</el-popover>
<el-dropdown-menu class="nz-dashboard-dropdown popper-z-index" style="margin-top: 5px" slot="dropdown">
<template v-for="(item, index) in timeData" >
<el-dropdown-item v-if="item.id !== 12 || showEmpty" :key="index" :class="showTime.id === item.id ? 'nz-dashboard-dropdown-bg' : ''" :command="item">
{{item.text}}
</el-dropdown-item>
</template>
</el-dropdown-menu>
</el-dropdown> -->
<transition name="el-zoom-in-top">
<div v-if="dropdownFlag" class="date-range-panel popper-z-index">
<el-row class="date-range-panel-top" style="position: relative">
@@ -108,14 +51,12 @@
<div class="content-title">From</div>
<div @click="myDatePickerShow('start')" tabindex="1" class="content-input">
<!-- {{ searchTime[0] }} -->
<el-input v-model="searchTime[0]" @change="dateChange('start',searchTime[0])"> </el-input>
</div>
<div class="content-title">To</div>
<div @click="myDatePickerShow('end')" tabindex="2" class="content-input">
<el-input v-model="searchTime[1]" @change="dateChange('end',searchTime[1])"> </el-input>
<!-- {{ searchTime[1] }} -->
</div>
<div>
@@ -171,7 +112,11 @@
</el-row>
<el-row class="date-range-panel-bottom" style="">
<el-col :span="12">{{ address }}</el-col>
<el-col :span="12" class="utc-str">{{ utcStr }}</el-col>
<el-col :span="12" class="utc-str">
<span>
{{ utcStr }}
</span>
</el-col>
</el-row>
</div>
</transition>
@@ -189,6 +134,7 @@ export default {
size: {
type: String,
},
sign:[Number,String]
},
data() {
return {
@@ -300,11 +246,12 @@ export default {
this.getItem();
this.getUtcStr();
this.getRangeHistoryArr();
console.log(this.sign);
},
methods: {
getItem() {
this.rangeHistory = localStorage.getItem("date-range-history")
? JSON.parse(localStorage.getItem("date-range-history"))
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");
@@ -337,13 +284,13 @@ export default {
end: item[1],
});
localStorage.setItem(
"date-range-history",
"date-range-history"+this.sign,
JSON.stringify(this.rangeHistory)
);
this.searchTime[2]=''
this.showDropdown();
this.getRangeHistoryArr()
console.log('timerange里searchTime',this.searchTime);
this.searchTime[2]=''
this.$emit("change", this.searchTime);
this.setSearchTime('','',this.searchTime)
},
@@ -364,7 +311,6 @@ export default {
const startTime = bus.timeFormate(v)
this.$set(this.searchTime, 0, startTime);
}else{
console.log('输入不规范');
this.$set(this.searchTime, 0, '');
}
@@ -381,7 +327,6 @@ export default {
const endTime = bus.timeFormate(v)
this.$set(this.searchTime, 1, endTime);
}else{
console.log('输入不规范');
this.$set(this.searchTime, 1, '');
}
@@ -413,12 +358,16 @@ export default {
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));
// this.showTime = this.nowTimeType = {
// id: 4,
// text: this.$t("dashboard.panel.lastOneHour"),
@@ -506,7 +455,6 @@ export default {
},
getCurrentTime() {
return this.searchTime;
console.log('getcurrenttime');
// let timeTypeId = this.showTime.id;
// if (timeTypeId === 0) {
// return this.searchTime;
@@ -583,7 +531,6 @@ export default {
defaultPick: {
immediate: true,
handler(n, o) {
console.log(n);
if (n && Number.isInteger(n)) {
const showTime = this.timeData.find((item) => item.id == n);
if (showTime) {

5
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="true" :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>
@@ -177,6 +177,7 @@ export default {
mixins: [dataListMixin, routerPathParams],
data () {
return {
sign:'',
chartLoading: false,
chartInfo: {},
alertMessageNzTableHeightOffset: 242,
@@ -578,6 +579,8 @@ export default {
})
},
messageDetail (row) {
this.sign = Number(row.alertRule.id)
console.log(this.sign);
this.$get('/alert/rule/' + row.alertRule.id).then(res => {
this.currentMsg = { ...row, alertRule: { ...res.data } }
this.$nextTick(() => {

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

@@ -40,7 +40,7 @@
<!-- </el-input>-->
<!-- </div>-->
<pick-time id="panel" ref="pickTime" v-model="searchTime" :refresh-data-func="dateChange" :use-chart-unit="false" class="margin-r-10"></pick-time>
<pick-time id="panel" ref="pickTime" v-model="searchTime" :refresh-data-func="dateChange" :use-chart-unit="false" class="margin-r-10" :sign="panelId"></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="addChartBefore">