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

NEZ-2015 fix： asset / entpoint detail 页面操作 增加 Edit dashboard 按钮

Browse Source
This commit is contained in:
zhangyu
2022-07-08 18:06:31 +08:00
parent 3a012319bd
commit a0a1d4b498
6 changed files with 227 additions and 133 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -46,7 +46,7 @@
} }
} }
&>.bottom-panel{ &>.bottom-panel{
padding: 15px 10px 10px 10px !important; padding: 15px 10px 0px 10px !important;
} }
} }
.sub-top-tools .top-tool-btn-txt .nz-icon{ .sub-top-tools .top-tool-btn-txt .nz-icon{

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

@@ -92,7 +92,7 @@
color: #60BEFF; color: #60BEFF;
font-size: 13px font-size: 13px
} }
.panel-dropdown-btn:hover { .panel-dropdown-btn:hover {
color: #409EFF; color: #409EFF;
} }
@@ -150,6 +150,15 @@
button:hover { button:hover {
background: $--background-color-empty; background: $--background-color-empty;
} }
.footer__btn {
background-color: $--color-primary;
border: none;
}
.footer__btn.footer__btn--light {
background-color: $--button-light-hover-background-color;
border: 1px solid $--button-light-border-color;
color: $--button-light-color;
}
} }
.date-range-panel{ .date-range-panel{
.el-button--primary{ .el-button--primary{

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

@@ -174,31 +174,31 @@ export default {
}, },
asset: { asset: {
panel: [ panel: [
{ prop: 'panelTab', name: this.$t('overall.detail'), active: true }, { prop: 'panelTab', name: this.$t('overall.dashboard'), active: true },
{ prop: 'alertMessageTab', name: this.$t('overall.alert'), active: false }, { prop: 'alertMessageTab', name: this.$t('overall.alert'), active: false },
{ prop: 'endpointTab', name: this.$t('asset.endpoint'), active: false }, { prop: 'endpointTab', name: this.$t('asset.endpoint'), active: false },
{ prop: 'log', name: this.$t('overall.logs'), active: false } { prop: 'log', name: this.$t('overall.logs'), active: false }
], ],
alertMessage: [ alertMessage: [
{ prop: 'panelTab', name: this.$t('overall.detail'), active: false }, { prop: 'panelTab', name: this.$t('overall.dashboard'), active: false },
{ prop: 'alertMessageTab', name: this.$t('overall.alert'), active: true }, { prop: 'alertMessageTab', name: this.$t('overall.alert'), active: true },
{ prop: 'endpointTab', name: this.$t('asset.endpoint'), active: false }, { prop: 'endpointTab', name: this.$t('asset.endpoint'), active: false },
{ prop: 'log', name: this.$t('overall.logs'), active: false } { prop: 'log', name: this.$t('overall.logs'), active: false }
], ],
endpoint: [ endpoint: [
{ prop: 'panelTab', name: this.$t('overall.detail'), active: false }, { prop: 'panelTab', name: this.$t('overall.dashboard'), active: false },
{ prop: 'alertMessageTab', name: this.$t('overall.alert'), active: false }, { prop: 'alertMessageTab', name: this.$t('overall.alert'), active: false },
{ prop: 'endpointTab', name: this.$t('asset.endpoint'), active: true }, { prop: 'endpointTab', name: this.$t('asset.endpoint'), active: true },
{ prop: 'log', name: this.$t('overall.logs'), active: false } { prop: 'log', name: this.$t('overall.logs'), active: false }
], ],
log: [ log: [
{ prop: 'panelTab', name: this.$t('overall.detail'), active: false }, { prop: 'panelTab', name: this.$t('overall.dashboard'), active: false },
{ prop: 'alertMessageTab', name: this.$t('overall.alert'), active: false }, { prop: 'alertMessageTab', name: this.$t('overall.alert'), active: false },
{ prop: 'endpointTab', name: this.$t('asset.endpoint'), active: false }, { prop: 'endpointTab', name: this.$t('asset.endpoint'), active: false },
{ prop: 'log', name: this.$t('overall.logs'), active: true } { prop: 'log', name: this.$t('overall.logs'), active: true }
], ],
alertMessageSub: [ alertMessageSub: [
{ prop: 'panelTab', name: this.$t('overall.detail'), active: false }, { prop: 'panelTab', name: this.$t('overall.dashboard'), active: false },
{ prop: 'alertMessageTab', name: this.$t('overall.alert'), active: false }, { prop: 'alertMessageTab', name: this.$t('overall.alert'), active: false },
{ prop: 'endpointTab', name: this.$t('asset.endpoint'), active: false }, { prop: 'endpointTab', name: this.$t('asset.endpoint'), active: false },
{ prop: 'log', name: this.$t('overall.logs'), active: false }, { prop: 'log', name: this.$t('overall.logs'), active: false },
@@ -214,7 +214,7 @@ export default {
}, },
endpoint: { endpoint: {
endpointTabTitle: [ endpointTabTitle: [
{ prop: 'panelTab', name: this.$t('overall.detail') }, { prop: 'panelTab', name: this.$t('overall.dashboard') },
{ prop: 'endpointAlertMessage', name: this.$t('overall.alert') }, { prop: 'endpointAlertMessage', name: this.$t('overall.alert') },
{ prop: 'Metrics', name: this.$t('overall.metric') }, { prop: 'Metrics', name: this.$t('overall.metric') },
{ prop: 'log', name: this.$t('overall.logs') } { prop: 'log', name: this.$t('overall.logs') }
@@ -272,7 +272,7 @@ export default {
const config = this.obj.configs.find(c => c.type === 'logs') const config = this.obj.configs.find(c => c.type === 'logs')
const hasLog = config && config.enable === 1 const hasLog = config && config.enable === 1
const tabs = [ const tabs = [
{ prop: 'panelTab', name: this.$t('overall.detail') }, { prop: 'panelTab', name: this.$t('overall.dashboard') },
{ prop: 'endpointAlertMessage', name: this.$t('overall.alert') }, { prop: 'endpointAlertMessage', name: this.$t('overall.alert') },
{ prop: 'Metrics', name: this.$t('overall.metric') } { prop: 'Metrics', name: this.$t('overall.metric') }
] ]

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

@@ -99,6 +99,7 @@
<div id="tableList" class="table-list" style="padding-top: 0;overflow: hidden"> <div id="tableList" class="table-list" style="padding-top: 0;overflow: hidden">
<div id="dashboardScrollbar" class="table-list-box"> <div id="dashboardScrollbar" class="table-list-box">
<div class="box-content" ref="dashboardScrollbar" v-my-loading="chartListLoading" style="overflow-y: auto;display: flex;flex-direction: column"> <div class="box-content" ref="dashboardScrollbar" v-my-loading="chartListLoading" style="overflow-y: auto;display: flex;flex-direction: column">
<panel-variables :labelArrs="variables" :time-range="searchTime" @getPanelData="getPanelData"></panel-variables>
<chart-list <chart-list
ref="chartList" ref="chartList"
name="panel" name="panel"
@@ -113,6 +114,7 @@
@on-remove-chart="delChart" @on-remove-chart="delChart"
@on-add-group-item-chart="addGroupItem" @on-add-group-item-chart="addGroupItem"
@refreshPanel="refreshPanel" @refreshPanel="refreshPanel"
:variablesInit="variablesInit"
:loading="chartListLoading" :loading="chartListLoading"
:chart-detail-info="chartDetailInfo" :chart-detail-info="chartDetailInfo"
></chart-list> ></chart-list>
@@ -158,6 +160,7 @@ import detailViewRightMixin from '@/components/common/mixin/detailViewRightMixin
import { randomcolor } from '@/components/common/js/radomcolor/randomcolor' import { randomcolor } from '@/components/common/js/radomcolor/randomcolor'
import htmlToPdfMixin from '@/components/common/mixin/htmlToPdfMixin' import htmlToPdfMixin from '@/components/common/mixin/htmlToPdfMixin'
import exportHtmlMixin from '@/components/common/mixin/exportHtml' import exportHtmlMixin from '@/components/common/mixin/exportHtml'
import panelVariables from "@/components/common/panel/panelVariables";
export default { export default {
name: 'panelTabNew', name: 'panelTabNew',
mixins: [subDataListMixin, detailViewRightMixin, htmlToPdfMixin, exportHtmlMixin], mixins: [subDataListMixin, detailViewRightMixin, htmlToPdfMixin, exportHtmlMixin],
@@ -275,7 +278,9 @@ export default {
panelDataList: [], panelDataList: [],
batchDeleteObjs: [], batchDeleteObjs: [],
nowTimeType: {}, nowTimeType: {},
chartDetailInfo: {} chartDetailInfo: {},
variables: [],
variablesInit: false
} }
}, },
components: { components: {
@@ -283,7 +288,8 @@ export default {
chartList, chartList,
nzBottomDataList, nzBottomDataList,
topToolMoreOptions, topToolMoreOptions,
chartTempBox chartTempBox,
panelVariables // 处理panel变量的组件
}, },
methods: { methods: {
// 刷新 // 刷新
@@ -544,10 +550,13 @@ export default {
}, },
// 公用操作 // 公用操作
getTableData (linkId) { getTableData (linkId) {
this.variablesInit = false
if (this.from === this.fromRoute.alertRule) { if (this.from === this.fromRoute.alertRule) {
this.variablesInit = true
this.getData(this.filter) this.getData(this.filter)
} else { } else {
if (this.from === this.fromRoute.chartTemp) { if (this.from === this.fromRoute.chartTemp) {
this.variablesInit = true
if (this.obj.type === 'group') { if (this.obj.type === 'group') {
this.$get('/visual/panel/chart', { ids: this.obj.id }).then(res => { this.$get('/visual/panel/chart', { ids: this.obj.id }).then(res => {
this.panelDataList = res.data.list this.panelDataList = res.data.list
@@ -564,11 +573,13 @@ export default {
this.getData(this.filter) this.getData(this.filter)
} }
} else { } else {
this.$get('visual/panel', { type: this.from, link: linkId }).then(response => { this.$get('visual/panel', { type: this.from, link: linkId || this.obj.id }).then(response => {
console.log(response)
if (response.code === 200) { if (response.code === 200) {
this.panelData = response.data.list this.panelData = response.data.list
if (this.panelData.length > 0) { if (this.panelData.length > 0) {
this.showPanel.id = this.filter.panelId = this.panelData[0].id this.showPanel.id = this.filter.panelId = this.panelData[0].id
this.variables = this.$loadsh.get(this.panelData, '[0].param.variables')
this.getData(this.filter) this.getData(this.filter)
} }
} else { } else {
@@ -787,6 +798,10 @@ export default {
} else { } else {
this.exportToHtml(this.obj.name) this.exportToHtml(this.obj.name)
} }
},
getPanelData () {
this.variablesInit = true
this.$refs.chartList.onScroll(this.scrollbarWrap.scrollTop)
} }
}, },
mounted () { mounted () {

293
nezha-fronted/src/components/common/popBox/topToolMoreOptions.vue
View File

@@ -1,133 +1,145 @@
<template> <template>
<el-dropdown trigger="click" :size="size"> <div>
<button id="more" :class="triggerButtonClass" :title="$t('overall.more')"> <el-dropdown trigger="click" :size="size">
<i class="nz-icon nz-icon-more2"></i> <button id="more" :class="triggerButtonClass" :title="$t('overall.more')">
</button> <i class="nz-icon nz-icon-more2"></i>
<el-dropdown-menu slot="dropdown" class="right-box-select-top right-public-box-dropdown-top"> </button>
<el-dropdown-item v-if="showLock"> <el-dropdown-menu slot="dropdown" class="right-box-select-top right-public-box-dropdown-top">
<div @click="panelLock=!panelLock" id="panel-lock"><i :class="{'nz-icon nz-icon-lock':!panelLock,'nz-icon nz-icon-unlock':panelLock}"></i>{{!panelLock ? $t("overall.locked") : $t("overall.unlocked")}}</div> <el-dropdown-item v-if="showLock">
</el-dropdown-item> <div @click="editPanel" id="edit-bottom-panel"><i class="nz-icon nz-icon-edit"></i>{{$t('overall.edit')}}</div>
<!-- import、export之前的内容 --> </el-dropdown-item>
<slot name="before"></slot> <el-dropdown-item v-if="showLock">
<el-dropdown-item v-has="permissions.import" v-if="importUrl"> <div @click="panelLock=!panelLock" id="panel-lock"><i :class="{'nz-icon nz-icon-lock':!panelLock,'nz-icon nz-icon-unlock':panelLock}"></i>{{!panelLock ? $t("overall.locked") : $t("overall.unlocked")}}</div>
<div id="chart-import" @click="showImportBox(1)"><i class="nz-icon nz-icon-upload"></i>{{$t('overall.importExcel')}}</div> </el-dropdown-item>
</el-dropdown-item> <!-- import、export之前的内容 -->
<el-dropdown-item v-has="permissions.export" v-if="exportUrl"> <slot name="before"></slot>
<div id="chart-export" @click="showImportBox(2)"><i class="nz-icon nz-icon-download1"></i>{{$t('overall.exportExcel')}}</div> <el-dropdown-item v-has="permissions.import" v-if="importUrl">
</el-dropdown-item> <div id="chart-import" @click="showImportBox(1)"><i class="nz-icon nz-icon-upload"></i>{{$t('overall.importExcel')}}</div>
<!-- import、export之后的内容 --> </el-dropdown-item>
<slot name="after"></slot> <el-dropdown-item v-has="permissions.export" v-if="exportUrl">
</el-dropdown-menu> <div id="chart-export" @click="showImportBox(2)"><i class="nz-icon nz-icon-download1"></i>{{$t('overall.exportExcel')}}</div>
</el-dropdown-item>
<!-- import、export之后的内容 -->
<slot name="after"></slot>
</el-dropdown-menu>
<el-dialog :close-on-click-modal="importBox.type!=3" destroy-on-close :show-close="true" :title="importBox.title" :visible.sync="importBox.show" :width="importBox.width" append-to-body class="nz-dialog" @close="closeDialog"> <el-dialog :close-on-click-modal="importBox.type!=3" destroy-on-close :show-close="true" :title="importBox.title" :visible.sync="importBox.show" :width="importBox.width" append-to-body class="nz-dialog" @close="closeDialog">
<div v-if="importBox.type == 1"> <div v-if="importBox.type == 1">
<div class="upload-body"> <div class="upload-body">
<el-upload :id="id+'-xlsx-input-file'" ref="uploadExcel" :auto-upload="false" :file-list="importFileList" :on-change="importChange" accept=".xlsx,.xls" action="" class="upload-demo" drag> <el-upload :id="id+'-xlsx-input-file'" ref="uploadExcel" :auto-upload="false" :file-list="importFileList" :on-change="importChange" accept=".xlsx,.xls" action="" class="upload-demo" drag>
<div slot="tip" class="el-upload__tip" >{{$t('overall.importTip')}}</div> <div slot="tip" class="el-upload__tip" >{{$t('overall.importTip')}}</div>
<i class="nz-icon nz-icon-upload"></i> <i class="nz-icon nz-icon-upload"></i>
<div class="el-upload__text">{{$t('overall.dragFileTip')}}，{{$t('overall.or')}}&nbsp;<em>{{$t('overall.clickUpload')}}</em></div> <div class="el-upload__text">{{$t('overall.dragFileTip')}}，{{$t('overall.or')}}&nbsp;<em>{{$t('overall.clickUpload')}}</em></div>
</el-upload> </el-upload>
</div>
<div slot="footer" class="footer">
<div class="el-message-box__btns" style="text-align: right;">
<button :id="id+'-xlsx-import-template'" class="el-button el-button--default el-button--small" @click="downloadTemplate">
<span>{{$t('overall.template')}}</span>
</button>
<button :id="id+'-xlsx-import-add'" :class="{'nz-btn-disabled':prevent_opt.import}" :disabled="prevent_opt.import" class="nz-btn el-button el-button--default el-button--small" @click="importExcel">
<span>{{$t('overall.importExcel')}}</span>
</button>
<button :id="id+'-xlsx-import-esc'" class="el-button el-button--default el-button--small" @click="closeDialog">
<span>{{$t('overall.cancel')}}</span>
</button>
</div> </div>
</div> <div slot="footer" class="footer">
</div> <div class="el-message-box__btns" style="text-align: right;">
<div v-if="importBox.type == 2"> <button :id="id+'-xlsx-import-template'" class="el-button el-button--default el-button--small" @click="downloadTemplate">
<div class="upload-body" style="height: 200px"> <span>{{$t('overall.template')}}</span>
<div class="export-box"> </button>
<span class="export-title">Records</span> <button :id="id+'-xlsx-import-add'" :class="{'nz-btn-disabled':prevent_opt.import}" :disabled="prevent_opt.import" class="nz-btn el-button el-button--default el-button--small" @click="importExcel">
<el-radio-group v-model="importBox.record" size="small"> <span>{{$t('overall.importExcel')}}</span>
<el-radio-button :label="item.value" v-for="(item,index) in recordArr" :key="index" :disabled="item.value==='records'&&!deleteObjs.length">{{item.name}}</el-radio-button> </button>
</el-radio-group> <button :id="id+'-xlsx-import-esc'" class="el-button el-button--default el-button--small" @click="closeDialog">
</div> <span>{{$t('overall.cancel')}}</span>
<div class="export-box"> </button>
<span class="export-title">File format</span>
<el-radio-group v-model="importBox.format" size="small">
<el-radio-button :label="item.value" v-for="(item,index) in formatArr" :key="index">{{item.name}}</el-radio-button>
</el-radio-group>
</div>
</div>
<div slot="footer" class="footer">
<div class="el-message-box__btns">
<button :id="id+'-xlsx-import-export'" class="nz-btn nz-btn-size-normal nz-btn-style-normal-new" @click="exportData">
<span style="text-transform:Capitalize">{{$t('overall.exportExcel')}}</span>
</button>
<button :id="id+'-xlsx-import-close'" class="nz-btn el-button el-button--default el-button--small" @click="closeDialog">
<span>{{$t('overall.close')}}</span>
</button>
</div>
</div>
</div>
<div v-if="importBox.type==3">
<div class="upload-body result-body">
<div v-if="importResult&&importResult.failNum">
<div class="result-title-top">
<div class="">
<i class="nz-icon nz-icon-import-success"/>
<span>{{$t('overall.result.successNum',{successNum:importResult.successNum})}}</span><br/>
</div>
<div class="">
<i class="nz-icon nz-icon-import-failed"/>
<span>{{$t('overall.result.failedNum',{failedNum:importResult.failNum,total:importResult.totalNum})}}</span>
</div>
</div> </div>
<div> </div>
<div v-if="importResult&&importResult.failDetail" class="result-detail"> </div>
<div style="height: 100%; overflow: auto"> <div v-if="importBox.type == 2">
<template v-for="(item, index) in importResult.failDetail"> <div class="upload-body" style="height: 200px">
<div :key="index" class="import-result-block"> <div class="export-box">
<div class="import-result-item"> <span class="export-title">Records</span>
<div class="line-num">{{$t('overall.result.line',[item.lineNo])}}</div> <el-radio-group v-model="importBox.record" size="small">
<div class="line-content" :title="item.errorMsg">{{item.errorMsg}}</div> <el-radio-button :label="item.value" v-for="(item,index) in recordArr" :key="index" :disabled="item.value==='records'&&!deleteObjs.length">{{item.name}}</el-radio-button>
</el-radio-group>
</div>
<div class="export-box">
<span class="export-title">File format</span>
<el-radio-group v-model="importBox.format" size="small">
<el-radio-button :label="item.value" v-for="(item,index) in formatArr" :key="index">{{item.name}}</el-radio-button>
</el-radio-group>
</div>
</div>
<div slot="footer" class="footer">
<div class="el-message-box__btns">
<button :id="id+'-xlsx-import-export'" class="nz-btn nz-btn-size-normal nz-btn-style-normal-new" @click="exportData">
<span style="text-transform:Capitalize">{{$t('overall.exportExcel')}}</span>
</button>
<button :id="id+'-xlsx-import-close'" class="nz-btn el-button el-button--default el-button--small" @click="closeDialog">
<span>{{$t('overall.close')}}</span>
</button>
</div>
</div>
</div>
<div v-if="importBox.type==3">
<div class="upload-body result-body">
<div v-if="importResult&&importResult.failNum">
<div class="result-title-top">
<div class="">
<i class="nz-icon nz-icon-import-success"/>
<span>{{$t('overall.result.successNum',{successNum:importResult.successNum})}}</span><br/>
</div>
<div class="">
<i class="nz-icon nz-icon-import-failed"/>
<span>{{$t('overall.result.failedNum',{failedNum:importResult.failNum,total:importResult.totalNum})}}</span>
</div>
</div>
<div>
<div v-if="importResult&&importResult.failDetail" class="result-detail">
<div style="height: 100%; overflow: auto">
<template v-for="(item, index) in importResult.failDetail">
<div :key="index" class="import-result-block">
<div class="import-result-item">
<div class="line-num">{{$t('overall.result.line',[item.lineNo])}}</div>
<div class="line-content" :title="item.errorMsg">{{item.errorMsg}}</div>
</div>
</div> </div>
</div> </template>
</template> </div>
</div> </div>
</div> </div>
</div> </div>
</div> <div v-else class="result-success-box">
<div v-else class="result-success-box"> <div>
<div> <i class="nz-icon nz-icon-import-success"/>
<i class="nz-icon nz-icon-import-success"/> </div>
<div class="result-success-txt">{{$t('overall.result.successfully')}}</div>
<div class="result-success-txt">
{{$t('overall.result.imported')}}
<span style="color: #333333" v-if="importResult">{{importResult.successNum}}</span>
{{$t('overall.result.records')}}
</div>
</div> </div>
<div class="result-success-txt">{{$t('overall.result.successfully')}}</div> </div>
<div class="result-success-txt"> <div slot="footer" class="footer">
{{$t('overall.result.imported')}} <div class="el-message-box__btns">
<span style="color: #333333" v-if="importResult">{{importResult.successNum}}</span> <button :id="id+'-xlsx-import-rollback'" class="nz-btn nz-btn-size-normal nz-btn-style-error" @click="rollbackImport">
{{$t('overall.result.records')}} <span>{{$t('overall.rollbackImport')}}</span>
</button>
<button :id="id+'-xlsx-import-close'" class="nz-btn el-button el-button--default el-button--small" @click="closeDialog">
<span>{{$t('overall.close')}}</span>
</button>
</div> </div>
</div> </div>
</div> </div>
<div slot="footer" class="footer"> </el-dialog>
<div class="el-message-box__btns"> </el-dropdown>
<button :id="id+'-xlsx-import-rollback'" class="nz-btn nz-btn-size-normal nz-btn-style-error" @click="rollbackImport"> <transition name="right-box">
<span>{{$t('overall.rollbackImport')}}</span> <panel-box v-if="rightBox.panel.show" ref="panelBox" :obj="panel" @close="closePanelBox" :isBottom="true" :panelType="params.from"></panel-box>
</button> </transition>
<button :id="id+'-xlsx-import-close'" class="nz-btn el-button el-button--default el-button--small" @click="closeDialog"> </div>
<span>{{$t('overall.close')}}</span>
</button>
</div>
</div>
</div>
</el-dialog>
</el-dropdown>
</template> </template>
<script> <script>
import axios from 'axios' import axios from 'axios'
import panelBox from '@/components/common/rightBox/panelBox'
let timeout let timeout
export default { export default {
name: 'topToolMoreOptions', name: 'topToolMoreOptions',
components: {
panelBox
},
props: { props: {
size: { size: {
type: String, type: String,
@@ -179,7 +191,12 @@ export default {
{ name: 'CSV', value: 2 }, { name: 'CSV', value: 2 },
{ name: 'JSON', value: 3 } { name: 'JSON', value: 3 }
], ],
suffix: '.xlsx' suffix: '.xlsx',
panel: {},
rightBox: { // 面板弹出框相关
panel: { show: false },
loading: false
}
} }
}, },
mounted () { mounted () {
@@ -528,7 +545,57 @@ export default {
}, },
formatNum (num) { formatNum (num) {
return num > 9 ? num : '0' + num return num > 9 ? num : '0' + num
} },
editPanel () {
this.$get('visual/panel/' + this.params.panelId).then(res => {
if (res.code === 200) {
this.panel = res.data
if (!this.$loadsh.get(this.panel, 'param.report', '')) {
this.panel = {
...this.panel,
param: {
report: {
enable: false,
range: {
unit: 'day'
},
schedule: {
type: '2',
repeat: 1,
nums: [],
stime: '',
etime: ''
},
receivers: []
},
chartShare: 'none'
}
}
}
this.panel.param.report.schedule.type = this.panel.param.report.schedule.type + ''
const startTime = this.$loadsh.get(this.panel, 'param.report.schedule.stime', '')
if (startTime !== '') {
this.panel.param.report.schedule.stime = this.utcTimeToTimezoneStr(this.panel.param.report.schedule.stime, 'YYYY-MM-DD HH:mm:ss')
} else {
this.panel.param.report.schedule.stime = ''
}
const endTime = this.$loadsh.get(this.panel, 'param.report.schedule.etime', '')
if (endTime !== '') {
this.panel.param.report.schedule.etime = this.utcTimeToTimezoneStr(this.panel.param.report.schedule.etime, 'YYYY-MM-DD HH:mm:ss')
} else {
this.panel.param.report.schedule.etime = ''
}
this.rightBox.panel.show = true
}
})
// this.panel = Object.assign({}, u)panelType
},
closePanelBox (refresh) {
this.rightBox.panel.show = false
if (refresh) {
this.$emit('afterImport')
}
},
}, },
watch: { watch: {
panelLock: { panelLock: {

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

@@ -12,7 +12,7 @@
<div class="container__form"> <div class="container__form">
<el-form ref="form" :model="editPanel" :rules="rules" label-position = "top" label-width="120px" size="small"> <el-form ref="form" :model="editPanel" :rules="rules" label-position = "top" label-width="120px" size="small">
<el-form-item :label='$t("overall.name")' prop="name"> <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-input id="dc-box-input-name" v-model="editPanel.name" maxlength="64" placeholder="" show-word-limit size="small" :disabled="isBottom"></el-input>
</el-form-item> </el-form-item>
<!--remark--> <!--remark-->
<el-form-item :label='$t("overall.remark")' class="range-time" prop="remark"> <el-form-item :label='$t("overall.remark")' class="range-time" prop="remark">
@@ -317,6 +317,14 @@ export default {
props: { props: {
obj: { obj: {
type: Object type: Object
},
isBottom: {
type: Boolean,
default: false
},
panelType: {
type: String,
default: 'dashboard'
} }
}, },
mixins: [editRigthBox], mixins: [editRigthBox],
@@ -506,7 +514,7 @@ export default {
...this.editPanel, ...this.editPanel,
id: this.editPanel.id ? this.editPanel.id : '', id: this.editPanel.id ? this.editPanel.id : '',
name: this.editPanel.name, name: this.editPanel.name,
type: 'dashboard', type: this.panelType,
remark: this.editPanel.remark, remark: this.editPanel.remark,
param: { param: {
report: { report: {
@@ -612,12 +620,7 @@ export default {
this.editPanel = JSON.parse(JSON.stringify(n)) this.editPanel = JSON.parse(JSON.stringify(n))
// 如果是空数组 则添加一条变量数据 // 如果是空数组 则添加一条变量数据
if (!this.editPanel.param.variables || !this.editPanel.param.variables.length) { if (!this.editPanel.param.variables || !this.editPanel.param.variables.length) {
const temp = [{ const temp = []
show: true,
type: 'query',
multi: false,
allOption: false
}]
this.$set(this.editPanel.param, 'variables', temp) this.$set(this.editPanel.param, 'variables', temp)
} }
} }