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

NEZ-1923 feat : dashboard 新增修改页面 增加 report 相关配置

Browse Source
This commit is contained in:
likexuan
2022-06-15 17:25:14 +08:00
parent e7143d81cb
commit 11d7a6ce08
4 changed files with 452 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

153
nezha-fronted/src/assets/css/components/common/rightBox/panelBox.scss Normal file
View File

@@ -0,0 +1,153 @@
.right-box-panel{
.item-receivers{
.el-select.el-select--small{
width: 100%;
}
.item-receivers-text{
color: $--color-text-secondary;
}
}
.el-input--suffix.el-date-editor--datetime .el-input__inner{
padding-left: 15px;
}
.form-items--half-width-group{
.item-receivers{
width: 100%;
.el-select.el-select--small{
width: 100%;
}
}
.form-item--half-width{
.el-date-editor.el-date-editor--datetime{
width: 100%;
.el-input__inner{
height: 32px;
}
}
}
.check-month_box{
.el-checkbox-group{
display: flex;
justify-content: start;
align-items: center;
flex-wrap: wrap;
.el-checkbox-button{
display: flex;
justify-content: center;
align-items: center;
width: calc(100% / 7);
margin-right: -2px;
margin-bottom: -1px;
border: 1px solid $--border-color-light;
.el-checkbox-button__inner{
border: 0px;
border-left: 0px !important;
border-bottom: 0px !important;
display: block;
width: 100%;
height: 100%;
background-color: $--background-color-empty;
border-radius: 0;
}
}
}
.el-checkbox-button.is-checked .el-checkbox-button__inner {
color: #fff;
border-radius: 0;
background-color: $--color-primary !important;
}
}
.range-time{
width: 100%;
.el-form-item__content{
height: 41px;
.el-radio-group{
height: 100%;
border-left: 1px solid $--border-color-light;
.el-radio-button__inner{
height: 100%;
line-height: 1.5;
font-size: 14px;
color: $--color-text-primary;
}
}
.el-checkbox-group{
height: 100%;
.el-checkbox-button{
margin-right: -2px;
.el-checkbox-button__inner{
background-color: $--background-color-empty;
border:1px solid $--border-color-light;
}
}
}
}
.el-radio-group{
display: flex;
border-left: 0;
.el-radio-button{
flex: 1;
}
}
.el-checkbox-button.is-checked .el-checkbox-button__inner {
color: #fff;
border-radius: 0;
background-color: $--color-primary !important;
border: 1px solid $--color-primary !important;
// margin-right: -1px;
}
}
.form-tabs{
width: 100%;
.el-tabs__nav{
display: flex;
.el-tabs__item{
flex: 1;
}
.el-checkbox-button.is-checked .el-checkbox-button__inner {
color: #fff;
border-radius: 0;
background-color: $--color-primary !important;
border: 1px solid $--color-primary !important;
// margin-right: -1px;
}
}
}
.form-day-week{
width: 100%;
.el-input-group__append{
border: 1px solid $--border-color-light;
background-color: $--right-box-sub-title-background-color;
}
}
}
}
.el-form-item__content{
text-align: unset !important;
.el-checkbox-button{
width: calc(100% / 7) !important;
.el-checkbox-button__inner{
width: 100%;
padding: 11px 3px;
}
}
.el-checkbox-button.is-focus .el-checkbox-button__inner{
border-color: $--border-color-base;
}
.el-tabs__item.is-top.is-active{
color: #fff !important;
background-color: $--color-primary !important;
}
.el-radio-button.el-radio-button--small.is-active{
.el-radio-button__inner{
color: #fff !important;
}
}
}

1
nezha-fronted/src/assets/css/components/index.scss
View File

@@ -51,6 +51,7 @@
@import './common/rightBox/chartRightBox/chartRightBox.scss';
@import './common/rightBox/mibBox.scss';
@import './common/rightBox/assetBactchEditBox.scss';
@import './common/rightBox/panelBox.scss';
@import './common/table/alert/alertMessageTable.scss';
@import './common/table/alert/alertRuleTable.scss';
@import './common/table/alert/alertSilenceTable.scss';

267
nezha-fronted/src/components/common/rightBox/panelBox.vue
View File

@@ -14,6 +14,148 @@
<el-form-item :label='$t("overall.name")' prop="name">
<el-input id="dc-box-input-name" v-model="editPanel.name" maxlength="64" placeholder="" show-word-limit size="small"></el-input>
</el-form-item>
<!--remark-->
<el-form-item :label='$t("overall.remark")' class="range-time" prop="remark">
<el-input
v-model="editPanel.remark"
maxlength="256"
size="small" :rows="2"
show-word-limit
type="textarea">
</el-input>
</el-form-item>
<el-form-item :label="$t('dashboard.panel.chartTooltip')" class="item-receivers" prop="chartShare">
<el-select v-model="editPanel.param.chartShare" clearable placeholder="" popper-class="right-box-select-top prevent-clickoutside" size="small" value-key="chartType">
<el-option value="none" label="Default">
<span class="panel-dropdown-label-txt" >{{$t('config.assetLabel.default')}}</span>
</el-option>
<el-option value="crosshair" label="Share crosshair">
<span class="panel-dropdown-label-txt" >{{$t('dashboard.panel.crosshair')}}</span>
</el-option>
<el-option value="tooltip" label="Share tooltip">
<span class="panel-dropdown-label-txt" >{{$t('dashboard.panel.shareTooltip')}}</span>
</el-option>
</el-select>
<div class="item-receivers-text">{{$t('dashboard.panel.chartTooltipText')}}</div>
</el-form-item>
<!-- Report -->
<div>
<el-form-item >
<div class="form__sub-title">
<span>{{$t('dashboard.panel.report')}}</span>
<el-switch v-model="editPanel.param.report.enable" size="small"></el-switch>
</div>
</el-form-item>
<div v-if="editPanel.param.report.enable">
<transition name="el-zoom-in-top" >
<div class="form-items--half-width-group">
<el-form-item
:label="$t('backup.start')"
class="form-item--half-width"
prop="stime"
>
<my-date-picker align="right" class=" "
v-model="editPanel.param.report.schedule.stime"
:format="timeFormatStrToDatePickFormat(dateFormatStr)"
popper-class="panel-time-picker-popper right-box-select-top"
prefix-icon=" "
size="mini"
type="datetime">
</my-date-picker>
</el-form-item>
<el-form-item
:label="$t('dashboard.panel.endAt')"
class="form-item--half-width"
prop="etime"
>
<my-date-picker align="right" class=" "
v-model="editPanel.param.report.schedule.etime"
:format="timeFormatStrToDatePickFormat(dateFormatStr)"
popper-class="panel-time-picker-popper right-box-select-top"
prefix-icon=" "
size="mini"
type="datetime">
</my-date-picker>
</el-form-item>
<el-form-item :label='$t("dashboard.panel.period")' class="range-time" prop="unit">
<el-radio-group v-model="editPanel.param.report.range.unit" size="small">
<el-radio-button label="day">{{ $t("dashboard.panel.prevDay") }}</el-radio-button>
<el-radio-button label="week">{{ $t("dashboard.panel.prevWeek") }}</el-radio-button>
<el-radio-button label="month">{{ $t("dashboard.panel.prevMonth") }}</el-radio-button>
</el-radio-group>
</el-form-item>
<el-form-item
:label="$t('backup.schedule')"
prop="schType"
class="form-tabs">
<el-tabs
v-model="editPanel.param.report.schedule.type"
type="card"
@tab-click="datasourceChange"
class="backups-info-tab"
>
<el-tab-pane :label="$t('backup.Daily')" name="2"></el-tab-pane>
<el-tab-pane :label="$t('backup.Weekly')" name="3"></el-tab-pane>
<el-tab-pane :label="$t('backup.Monthly')" name="4"></el-tab-pane>
</el-tabs>
</el-form-item>
<el-form-item
v-if="isShow === 2 || isShow === 3 ? true :false"
:label="$t('backup.RepeatEvery')"
prop="repeat"
class="form-day-week">
<el-input
size="small"
v-model="editPanel.param.report.schedule.repeat"
id="chart-box-title"
v-if="isShow === 3 ? true :false">
<template slot="append">{{ $t("backup.week") }}</template>
</el-input>
<el-input
size="small"
v-model="editPanel.param.report.schedule.repeat"
id="chart-box-title"
v-if="isShow === 2 ? true :false">
<template slot="append">{{ $t("backup.day") }}</template>
</el-input>
</el-form-item>
<el-form-item v-if="isShow === 3 ? true : false" :label='$t("backup.WeekOn")' class="range-time" prop="nums">
<el-checkbox-group
v-model="editPanel.param.report.schedule.nums">
<el-checkbox-button
v-for="(item,index) in week"
:label="index + 1"
:key="index"
>{{item}}</el-checkbox-button>
</el-checkbox-group>
</el-form-item>
<el-form-item
v-show="isShow === 4 ? true : false"
:label="$t('backup.DayOfMonth')"
prop="nums"
class="check-month_box"
id="day-of-month"
>
<el-checkbox-group v-model="editPanel.param.report.schedule.nums">
<el-checkbox-button
v-for="(item, index) in month"
:label="index === 31 ? -1 : index + 1"
:key="item"
>{{ item }}</el-checkbox-button>
</el-checkbox-group>
</el-form-item>
<el-form-item v-if="isShow !== 0 ? true : false" :label="$t('dashboard.panel.receivers')" class="item-receivers" prop="receivers">
<el-select v-model="editPanel.param.report.receivers" clearable multiple placeholder="" popper-class="right-box-select-top prevent-clickoutside" size="small" value-key="chartType">
<el-option v-for="item in userData" :key="item.id" :label="item.name" :value="item.id">
<span class="panel-dropdown-label-txt" >{{item.name}}</span>
</el-option>
</el-select>
</el-form-item>
</div>
</transition>
</div>
</div>
</el-form>
</div>
</div>
@@ -32,6 +174,7 @@
<script>
import editRigthBox from '../mixin/editRigthBox'
import bus from '@/libs/bus'
export default {
name: 'panelBox',
props: {
@@ -44,14 +187,91 @@ export default {
return {
url: 'visual/panel',
editPanel: {},
isShow: 0,
userData: [],
rules: {
name: [
{ required: true, message: this.$t('validate.required'), trigger: 'blur' }
]
}
},
week: [
this.$t('week.Mon'),
this.$t('week.Tue'),
this.$t('week.Wed'),
this.$t('week.Thu'),
this.$t('week.Fri'),
this.$t('week.Sat'),
this.$t('week.Sun')
],
month: [
1,
2,
3,
4,
5,
6,
7,
8,
9,
10,
11,
12,
13,
14,
15,
16,
17,
18,
19,
20,
21,
22,
23,
24,
25,
26,
27,
28,
29,
30,
31,
'Last'
],
dateFormatStr: localStorage.getItem('nz-default-dateFormat')
? localStorage.getItem('nz-default-dateFormat')
: 'YYYY-MM-DD HH:ss:mm'
}
},
created () {
this.dateFormatStr = 'YYYY-MM-DD HH:mm:ss'
if (this.editPanel.id) {
this.isShow = Number(this.editPanel.param.report.schedule.type)
this.editPanel.param.report.schedule.type = this.editPanel.param.report.schedule.type + ''
this.editPanel.param.report.schedule.stime = this.utcTimeToTimezoneStr(this.editPanel.param.report.schedule.stime)
this.editPanel.param.report.schedule.etime = this.utcTimeToTimezoneStr(this.editPanel.param.report.schedule.etime)
}
},
mounted () {
this.getUserData()
},
methods: {
getUserData () {
return new Promise(resolve => {
this.$get('sys/user', { pageSize: -1, pageNo: 1 }).then(response => {
if (response.code === 200) {
this.userData = response.data.list
}
resolve()
})
})
},
datasourceChange (tab) {
this.isShow = Number(tab.name)
if (this.editPanel.param.report.schedule.nums) {
this.editPanel.param.report.schedule.nums = []
this.editPanel.param.report.schedule.repeat = 0
}
},
/* 关闭弹框 */
esc (refresh) {
this.prevent_opt.save = false
@@ -63,6 +283,33 @@ export default {
/* 保存 */
save () {
const params = {
id: this.editPanel.id ? this.editPanel.id : '',
name: this.editPanel.name,
type: 'dashboard',
pid: 0,
remark: this.editPanel.remark,
param: {
report: {
enable: this.editPanel.param.report.enable,
range: {
type: 'previous',
interval: 1,
unit: this.editPanel.param.report.range.unit
},
schedule: {
type: Number(this.editPanel.param.report.schedule.type),
repeat: this.editPanel.param.report.schedule.repeat ? this.editPanel.param.report.schedule.repeat : 1,
stime: this.timezoneToUtcTimeStr(this.editPanel.param.report.schedule.stime),
etime: this.timezoneToUtcTimeStr(this.editPanel.param.report.schedule.etime),
nums: this.editPanel.param.report.schedule.nums
},
receivers: this.editPanel.param.report.receivers
},
chartShare: this.editPanel.param.chartShare
}
}
const editParam = JSON.parse(JSON.stringify(params))
if (this.prevent_opt.save) {
return
}
@@ -70,7 +317,7 @@ export default {
this.$refs.form.validate((valid) => {
if (valid) {
if (this.editPanel.id) {
this.$put(this.url, this.editPanel).then(response => {
this.$put(this.url, editParam).then(response => {
this.prevent_opt.save = false
if (response.code === 200) {
this.$message({ duration: 1000, type: 'success', message: this.$t('tip.saveSuccess') })
@@ -80,7 +327,7 @@ export default {
}
})
} else {
this.$post(this.url, this.editPanel).then(response => {
this.$post(this.url, editParam).then(response => {
this.prevent_opt.save = false
if (response.code === 200) {
this.$message({ duration: 1000, type: 'success', message: this.$t('tip.saveSuccess') })
@@ -127,6 +374,20 @@ export default {
this.isEdit = true
this.editPanel = JSON.parse(JSON.stringify(n))
}
},
'editPanel.param.report.schedule.stime': {
deep: true,
handler (n) {
this.editPanel.param.report.schedule.stime = bus
.timeFormate(new Date(n), 'YYYY-MM-DD HH:mm:ss')
}
},
'editPanel.param.report.schedule.etime': {
deep: true,
handler (n) {
this.editPanel.param.report.schedule.etime = bus
.timeFormate(new Date(n), 'YYYY-MM-DD HH:mm:ss')
}
}
}
}

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

@@ -189,7 +189,23 @@ export default {
},
panel: { // 新增panel
id: '',
name: ''
name: '',
remark: '',
param: {
report: {
enable: false,
range: {
unit: ''
},
schedule: {
stime: '',
etime: '',
repeat: 0,
nums: [],
type: 0
}
}
}
},
chart: {},
blankChart: {
@@ -386,7 +402,23 @@ export default {
// this.$refs.panelBox.show(true)
this.panel = {
id: '',
name: ''
name: '',
remark: '',
param: {
report: {
enable: false,
range: {
unit: ''
},
schedule: {
stime: '',
etime: '',
nums: [],
type: 0 + ''
}
},
chartShare: 'none'
}
}
// this.$refs.panelBox.setTitle(this.$t('dashboard.panel.createPanelTitle'))
},