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

perf: dashboard-metricpreview和chart-table改动

Browse Source 
1.metric preview按要求更改
2.panel页的table类型图表可以排序、增加过长悬停提示
This commit is contained in:
陈劲松
2020-02-07 19:57:39 +08:00
parent 707e545089
commit f7432df7d3
14 changed files with 169 additions and 67 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -375,6 +375,7 @@ export default {
editData(chartId) { editData(chartId) {
// 获取该id下chart的相关信息 // 获取该id下chart的相关信息
const chart = this.dataList.find(item => item.id === chartId); const chart = this.dataList.find(item => item.id === chartId);
console.info("aaa",chart)
if (chart) { if (chart) {
this.$emit('on-edit-chart', chart); this.$emit('on-edit-chart', chart);
} }

20
nezha-fronted/src/components/charts/chart-table.vue
View File

@@ -35,11 +35,11 @@
<div class="mt-10"> <div class="mt-10">
<!-- <!--
<el-table size="small" :loading="tableLoading">--> <el-table size="small" :loading="tableLoading">-->
<el-table class="nz-table" :data="seriesItem" height="350" border v-loading="tableLoading"> <el-table class="nz-table" :data="seriesItem" height="350" border v-loading="tableLoading" tooltip-effect="light">
<el-table-column prop="metric" :label="$t('dashboard.panel.chartTableColumn.metric')" ></el-table-column> <el-table-column sortable :show-overflow-tooltip="true" prop="metric" :label="$t('dashboard.panel.chartTableColumn.metric')" ></el-table-column>
<el-table-column prop="label" :label="$t('dashboard.panel.chartTableColumn.label')" ></el-table-column> <el-table-column sortable :show-overflow-tooltip="true" prop="label" :label="$t('dashboard.panel.chartTableColumn.label')" ></el-table-column>
<el-table-column prop="time" :label="$t('dashboard.panel.chartTableColumn.time')" width="145" ></el-table-column> <el-table-column sortable prop="time" :label="$t('dashboard.panel.chartTableColumn.time')" width="145" ></el-table-column>
<el-table-column prop="value" :label="$t('dashboard.panel.chartTableColumn.value')" ></el-table-column> <el-table-column sortable prop="value" :label="$t('dashboard.panel.chartTableColumn.value')" ></el-table-column>
</el-table> </el-table>
</div> </div>
<!--全屏--> <!--全屏-->
@@ -52,11 +52,11 @@
<!--<button @click="refreshChart" type="button" class="nz-btn nz-btn-size-normal nz-btn-style-light"><i style="font-size: 14px;" class="el-icon-refresh-right"></i></button>--> <!--<button @click="refreshChart" type="button" class="nz-btn nz-btn-size-normal nz-btn-style-light"><i style="font-size: 14px;" class="el-icon-refresh-right"></i></button>-->
</div> </div>
</div> </div>
<el-table class="nz-table" :data="seriesItem" height="350" border v-loading="tableLoading"> <el-table class="nz-table" :data="seriesItem" height="350" border v-loading="tableLoading" tooltip-effect="light">
<el-table-column prop="metric" :label="$t('dashboard.panel.chartTableColumn.metric')" ></el-table-column> <el-table-column sortable :show-overflow-tooltip="true" prop="metric" :label="$t('dashboard.panel.chartTableColumn.metric')" ></el-table-column>
<el-table-column prop="label" :label="$t('dashboard.panel.chartTableColumn.label')" ></el-table-column> <el-table-column sortable :show-overflow-tooltip="true" prop="label" :label="$t('dashboard.panel.chartTableColumn.label')" ></el-table-column>
<el-table-column prop="time" :label="$t('dashboard.panel.chartTableColumn.time')" width="145" ></el-table-column> <el-table-column sortable prop="time" :label="$t('dashboard.panel.chartTableColumn.time')" width="145" ></el-table-column>
<el-table-column prop="value" :label="$t('dashboard.panel.chartTableColumn.value')" ></el-table-column> <el-table-column sortable prop="value" :label="$t('dashboard.panel.chartTableColumn.value')" ></el-table-column>
</el-table> </el-table>
</el-dialog> </el-dialog>
</div> </div>

1
nezha-fronted/src/components/common/language/cn.js
View File

@@ -110,6 +110,7 @@ const cn = {
multiChartsShow:"多图展示", multiChartsShow:"多图展示",
createPanel:"创建面板", createPanel:"创建面板",
selectPanel:"选择已有面板", selectPanel:"选择已有面板",
saveChart:'保存图表',
saveChartToPanel:"保存图表到看板" saveChartToPanel:"保存图表到看板"
}, },
metricPreview:{ metricPreview:{

1
nezha-fronted/src/components/common/language/en.js
View File

@@ -116,6 +116,7 @@ const en = {
multiChartsShow:'Multiple charts',//"多图展示" multiChartsShow:'Multiple charts',//"多图展示"
createPanel:'New panel', //"创建面板" createPanel:'New panel', //"创建面板"
selectPanel:'Exist panel',//"选择已有面板" selectPanel:'Exist panel',//"选择已有面板"
saveChart: 'Save chart',
saveChartToPanel:"Save chart to panel"//Save chart to panel. saveChartToPanel:"Save chart to panel"//Save chart to panel.
}, },
metricPreview:{ metricPreview:{

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

@@ -17,7 +17,7 @@
<!-- begin--表单--> <!-- begin--表单-->
<el-scrollbar class="right-box-form-box"> <el-scrollbar class="right-box-form-box">
<el-form class="right-box-form" :model="panel" label-position="top" ref="panelForm"> <el-form class="right-box-form" :model="panel" label-position="top" ref="panelForm">
<el-form-item :label='$t("project.project.project")' prop="name" :rules="{required: true, message: $t('validate.required'), trigger: 'blur'}"> <el-form-item :label='$t("overall.name")' prop="name" :rules="{required: true, message: $t('validate.required'), trigger: 'blur'}">
<el-input placeholder="" maxlength="64" show-word-limit v-model="panel.name" size="small" ></el-input> <el-input placeholder="" maxlength="64" show-word-limit v-model="panel.name" size="small" ></el-input>
</el-form-item> </el-form-item>
</el-form> </el-form>
@@ -125,6 +125,6 @@
<style scoped> <style scoped>
.z-top{ .z-top{
z-index: 51 !important; z-index: 3000 !important;
} }
</style> </style>

1
nezha-fronted/src/components/page/asset/assetAddUnit.vue
View File

@@ -886,7 +886,6 @@
type: 'warning' type: 'warning'
}).then(() => { }).then(() => {
this.$delete(data + "?ids=" + item).then(response => { this.$delete(data + "?ids=" + item).then(response => {
const h = this.$createElement;
if (response.code === 200) { if (response.code === 200) {
this.$message({duration: 2000, type: 'success', message: this.$t("tip.deleteSuccess")}); this.$message({duration: 2000, type: 'success', message: this.$t("tip.deleteSuccess")});
this.$emit('refreshData', 'true') this.$emit('refreshData', 'true')

55
nezha-fronted/src/components/page/dashboard/chartBox.vue
View File

@@ -81,9 +81,9 @@
:value="item.id" :id="'chart-box-panel-'+item.id"> :value="item.id" :id="'chart-box-panel-'+item.id">
<span class="config-dropdown-label-txt">{{item.name}}</span> <span class="config-dropdown-label-txt">{{item.name}}</span>
<div class="config-dropdown-label-icons"> <div class="config-dropdown-label-icons">
<span class="config-dropdown-btn config-dropdown-btn-delete" @click.stop="" <span class="config-dropdown-btn config-dropdown-btn-delete" @click.stop="deletePanel(item)"
:id="'chart-box-panel-op-del-'+item.id"><i class="el-icon-delete"></i></span> :id="'chart-box-panel-op-del-'+item.id"><i class="el-icon-delete"></i></span>
<span class="config-dropdown-btn" @click.stop="" <span class="config-dropdown-btn" @click.stop="editPanel(item)"
:id="'chart-box-panel-op-edit-'+item.id"><i class="nz-icon nz-icon-edit"></i></span> :id="'chart-box-panel-op-edit-'+item.id"><i class="nz-icon nz-icon-edit"></i></span>
</div> </div>
</el-option> </el-option>
@@ -238,6 +238,7 @@
//productId: 0,//不需要这个参数，可以删除 //productId: 0,//不需要这个参数，可以删除
panelId: 0, panelId: 0,
panelName: '', panelName: '',
selectFirstPanel: false,
metricList: [], // metric列表 metricList: [], // metric列表
metricCascaderList:[],//metric级联列表 metricCascaderList:[],//metric级联列表
deleteIndex: '', // 要删除的指标模块 deleteIndex: '', // 要删除的指标模块
@@ -264,9 +265,37 @@
this.$refs.panelBox2.setTitle(this.$t("dashboard.panel.createPanelTitle")); this.$refs.panelBox2.setTitle(this.$t("dashboard.panel.createPanelTitle"));
}, },
panelReload(panelName) { panelReload(panelName) {
if (panelName) {
this.panelName = panelName; this.panelName = panelName;
}
this.$emit("reloadOnlyPanel"); this.$emit("reloadOnlyPanel");
}, },
deletePanel(panel) {
this.$confirm(this.$t("tip.confirmDelete"), {
confirmButtonText: this.$t("tip.yes"),
cancelButtonText: this.$t("tip.no"),
type: 'warning'
}).then(() => {
this.$delete("panel?ids=" + panel.id).then(response => {
if (response.code === 200) {
this.$message({duration: 2000, type: 'success', message: this.$t("tip.deleteSuccess")});
if (this.panelId == panel.id) {
this.selectFirstPanel = true;
this.$emit('reload', true);
} else {
this.$emit('reload');
}
} else {
this.$message.error(response.msg);
}
})
});
},
editPanel(panel) {
this.$refs.panelBox2.show(true);
this.panel = Object.assign({}, panel);
this.$refs.panelBox2.setTitle(this.$t("dashboard.panel.editPanelTitle"));
},
setTitle(title) { setTitle(title) {
this.rightBox.title = title; this.rightBox.title = title;
}, },
@@ -405,7 +434,9 @@
this.esc(); this.esc();
this.$message({duration: 1000, type: 'success', message: this.$t("tip.saveSuccess")}); this.$message({duration: 1000, type: 'success', message: this.$t("tip.saveSuccess")});
this.$refs.chartForm.resetFields();//清空表单 this.$refs.chartForm.resetFields();//清空表单
this.$emit('on-create-success', 'create', response.data,params); let panel = this.panelData.find(p => p.id === this.panelId);
console.info("panel", panel)
this.$emit('on-create-success', 'create', response.data,params, panel);
} else { } else {
this.$message.error(response.msg); this.$message.error(response.msg);
} }
@@ -523,8 +554,17 @@
}) })
}, },
// 创建打开 // 创建打开
createData(panelId) { createData(panelId, elementInfo) {
if (panelId == -1) {
this.panelId = this.panelData[0].id;
} else {
this.panelId = panelId; this.panelId = panelId;
}
if (elementInfo) {
this.$nextTick(() => {
this.$refs.chartTag[0].setMdata(elementInfo.elements[0]);
});
}
this.isedit = false; this.isedit = false;
this.initInfo(); // 初始化图表信息 this.initInfo(); // 初始化图表信息
//this.chartModal = true;//????控制弹出框显示和隐藏的，不需要了 //this.chartModal = true;//????控制弹出框显示和隐藏的，不需要了
@@ -571,7 +611,7 @@
}, },
// 创建时打开,用于清空chart-tag数据 // 创建时打开,用于清空chart-tag数据
initOpen() { initOpen() {
bus.$emit('clear_history'); //bus.$emit('clear_history');
/* 项目不需要produce /* 项目不需要produce
if (this.$route.params.productId) { if (this.$route.params.productId) {
this.productId = parseInt(this.$route.params.productId, 10); this.productId = parseInt(this.$route.params.productId, 10);
@@ -591,7 +631,10 @@
deep: true, deep: true,
immediate: true, immediate: true,
handler(n, o) { handler(n, o) {
if (this.panelName) { if (this.selectFirstPanel) {
this.selectFirstPanel = false;
this.panelId = n[0].id;
} else if (this.panelName) {
for (let i = 0; i < n.length; i++) { for (let i = 0; i < n.length; i++) {
if (n[i].name == this.panelName) { if (n[i].name == this.panelName) {
this.panelId = n[i].id; this.panelId = n[i].id;

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

@@ -347,7 +347,7 @@ export default {
// 编辑已有图表状态时，先填充数据 // 编辑已有图表状态时，先填充数据
setMdata(data) { setMdata(data) {
//alert('metricSetData'+JSON.stringify(data)); //console.info('metricSetData', JSON.stringify(data));
this.setDataFlag = true; this.setDataFlag = true;
this.target = Object.assign({}, data); this.target = Object.assign({}, data);
//this.pointer = //this.pointer =

4
nezha-fronted/src/components/page/dashboard/chartMetricForPreview.vue
View File

@@ -356,7 +356,7 @@ export default {
// alert('metric第三步，normal'); // alert('metric第三步，normal');
// 当该项metric为空时，重置一下 // 当该项metric为空时，重置一下
if (!this.elementInfo.metric && this.$refs.metricSelect) { if (!this.elementInfo.metric && this.$refs.metricSelect) {
this.$refs.metricSelect.reset(); //this.$refs.metricSelect.reset();
} }
this.clickTabelShow(1,'normal'); this.clickTabelShow(1,'normal');
} }
@@ -529,7 +529,7 @@ export default {
this.$refs.elementInfo.resetFields();//??? this.$refs.elementInfo.resetFields();//???
} }
if (this.$refs.metricSelect) { if (this.$refs.metricSelect) {
this.$refs.metricSelect.reset(); //this.$refs.metricSelect.reset();
} }
this.elementInfo.tagList = []; this.elementInfo.tagList = [];
}, },

8
nezha-fronted/src/components/page/dashboard/metricPreview.scss
View File

@@ -8,7 +8,7 @@
height: 100%; height: 100%;
} }
.table-list { .table-list {
margin-top:40px; padding-top: 20px;
overflow-y:auto; overflow-y:auto;
height: 100%; height: 100%;
} }
@@ -21,6 +21,12 @@
.chartBoxMul { .chartBoxMul {
width: 100%; width: 100%;
} }
.chart-preview-area {
height: calc(100% - 180px);
overflow-y: auto;
overflow-x: hidden;
position: relative
}
.common-detail-top-title { .common-detail-top-title {
font-size: 16px; font-size: 16px;
color: #5697f1; color: #5697f1;

33
nezha-fronted/src/components/page/dashboard/metricPreview.vue
View File

@@ -13,9 +13,7 @@
<div class="content-right"> <div class="content-right">
<div class="top-tools" > <!--<div class="top-tools">
<!-- <div class="float-left metric-title" >{{$t('dashboard.metricPreview.title')}}
</div> -->
<div class="float-right mr-10"> <div class="float-right mr-10">
<el-date-picker size="mini" ref="calendar" <el-date-picker size="mini" ref="calendar"
format="yyyy/MM/dd HH:mm" format="yyyy/MM/dd HH:mm"
@@ -29,16 +27,28 @@
align="right"> align="right">
</el-date-picker> </el-date-picker>
</div> </div>
</div> </div>-->
<div class="table-list" > <div class="table-list" >
<div class="box-content" > <div class="box-content" >
<el-row :gutter="20" class="row-width" style="height: calc(100% - 65px);"> <el-row :gutter="20" class="row-width" style="height: calc(100% - 65px);">
<el-col :span="10" > <el-col :span="10" >
<metric-set ref="metricSet" @on-view-chart="getChartParam"></metric-set> <metric-set :panelData="panelData" ref="metricSet" @on-view-chart="getChartParam"></metric-set>
</el-col> </el-col>
<el-col :span="0.5"><div>&nbsp;</div></el-col> <el-col :span="0.5"><div>&nbsp;</div></el-col>
<el-col :span="13" style="height: calc(100% - 180px);overflow-y: auto;overflow-x: hidden;"> <el-col :span="13" class="chart-preview-area">
<el-row class="border-area" v-show="chartCount === 'single'"> <el-date-picker size="mini" ref="calendar"
format="yyyy/MM/dd HH:mm"
@change="dateChange"
v-model="searchTime"
type="datetimerange"
:picker-options="pickerOptions"
:range-separator="$t('dashboard.panel.to')"
:start-placeholder="$t('dashboard.panel.startTime')"
:end-placeholder="$t('dashboard.panel.endTime')"
style="position:absolute; right: 10px"
align="right">
</el-date-picker>
<el-row class="border-area" v-show="chartCount === 'single'" style="margin-top: 42px;">
<div class="chartBox"> <div class="chartBox">
<line-chart-block <line-chart-block
:show-setting="false" :show-setting="false"
@@ -96,6 +106,7 @@ export default {
metricInfo: {}, // 保存参数信息 metricInfo: {}, // 保存参数信息
chartCount: 'single', // multiple chartCount: 'single', // multiple
lineList: [], // 线列表 lineList: [], // 线列表
panelData: [], //panel列表
searchTime:[new Date().setHours(new Date().getHours()-1),new Date()], searchTime:[new Date().setHours(new Date().getHours()-1),new Date()],
//searchTime:[new Date().setMinutes(new Date().getMinutes()-1),new Date()], //searchTime:[new Date().setMinutes(new Date().getMinutes()-1),new Date()],
pickerOptions: { pickerOptions: {
@@ -218,6 +229,13 @@ export default {
} }
} }
}, },
getPanelData() { //获取panel数据
this.$get('panel?pageNo=1&pageSize=-1').then(response => {
if (response.code === 200) {
this.panelData = response.data.list;
}
});
},
// 获取图表信息 // 获取图表信息
getChartParam(params, chartCount) { getChartParam(params, chartCount) {
this.chartCount = chartCount; this.chartCount = chartCount;
@@ -409,6 +427,7 @@ refresh_scroll() {
}, },
mounted: function() { mounted: function() {
this.getInit(); this.getInit();
this.getPanelData();
}, },
watch: { watch: {

2
nezha-fronted/src/components/page/dashboard/metricSet.scss
View File

@@ -22,7 +22,7 @@
} }
.operate-area { .operate-area {
// border-top: 1px solid #dfe7f2; // border-top: 1px solid #dfe7f2;
border-bottom: 1px solid #dfe7f2; // border-bottom: 1px solid #dfe7f2;
padding-bottom: 20px; padding-bottom: 20px;
text-align: right; text-align: right;
.operate-area-title { .operate-area-title {

82
nezha-fronted/src/components/page/dashboard/metricSet.vue
View File

@@ -45,22 +45,22 @@
<el-row class="operate-area"> <el-row class="operate-area">
<button type="primary" @click="preview" :disabled="loading" class="nz-btn nz-btn-size-large nz-btn-style-normal">{{$t('dashboard.metric.previewChart')}}</button> <button type="primary" @click="preview" :disabled="loading" class="nz-btn nz-btn-size-large nz-btn-style-normal">{{$t('dashboard.metric.previewChart')}}</button>
<button :disabled="saveDisabled || loading" type="primary" @click="preview('change')" class="margin-l-10" <!--<button :disabled="saveDisabled || loading" type="primary" @click="preview('change')" class="margin-l-10"
:class="{'nz-btn nz-btn-disabled nz-btn-size-large nz-btn-style-light nz-btn-min-width-75 btn-disabled-cursor-not-allowed' : (saveDisabled || loading), 'nz-btn nz-btn-size-large nz-btn-style-light' : !(saveDisabled || loading)}" :class="{'nz-btn nz-btn-disabled nz-btn-size-large nz-btn-style-light nz-btn-min-width-75 btn-disabled-cursor-not-allowed' : (saveDisabled || loading), 'nz-btn nz-btn-size-large nz-btn-style-light' : !(saveDisabled || loading)}"
>{{chartSwitchWord}}</button> >{{chartSwitchWord}}</button>-->
<!-- <Button type="primary" @click="addTarget">添加指标</Button> --> <!-- <Button type="primary" @click="addTarget">添加指标</Button> -->
</el-row> </el-row>
<el-row class="nz-btn-metric-bottom"> <el-row class="nz-btn-metric-bottom">
<!-- <div class="operate-area-title">{{$t('dashboard.metric.saveChartToPanel')}}:</div> --> <!-- <div class="operate-area-title">{{$t('dashboard.metric.saveChartToPanel')}}:</div> -->
<button :disabled="saveDisabled" type="primary" @click="createNew" <!--<button :disabled="saveDisabled" type="button" @click="createNew" v-show="false"
:class="{'nz-btn-metric-bottom-left nz-btn nz-btn-disabled nz-btn-size-large nz-btn-min-width-140 nz-btn-size-normal nz-btn-style-light nz-btn-metricbtn btn-disabled-cursor-not-allowed' : saveDisabled , 'nz-btn nz-btn-size-normal nz-btn-metricbtn nz-btn-metric-bottom-left nz-btn-min-width-140 nz-btn-style-light' : !saveDisabled}" :class="{'nz-btn-metric-bottom-left nz-btn nz-btn-disabled nz-btn-size-large nz-btn-min-width-140 nz-btn-size-normal nz-btn-style-light nz-btn-metricbtn btn-disabled-cursor-not-allowed' : saveDisabled , 'nz-btn nz-btn-size-normal nz-btn-metricbtn nz-btn-metric-bottom-left nz-btn-min-width-140 nz-btn-style-light' : !saveDisabled}"
>{{$t('dashboard.metric.createPanel')}}</button> >{{$t('dashboard.metric.createPanel')}}</button>-->
<button :disabled="saveDisabled" type="primary" @click="selectPanel" <button :disabled="saveDisabled" type="button" @click="saveChart"
:class="{'nz-btn nz-btn-disabled nz-btn-size-normal nz-btn-size-large nz-btn-min-width-120 nz-btn-style-light nz-btn-metricbtn btn-disabled-cursor-not-allowed' : saveDisabled , 'nz-btn nz-btn-size-normal nz-btn-metricbtn nz-btn-style-normal nz-btn-min-width-120' : !saveDisabled}" :class="{'nz-btn nz-btn-disabled nz-btn-size-normal nz-btn-size-large nz-btn-min-width-120 nz-btn-style-light nz-btn-metricbtn btn-disabled-cursor-not-allowed' : saveDisabled , 'nz-btn nz-btn-size-normal nz-btn-metricbtn nz-btn-style-normal nz-btn-min-width-120' : !saveDisabled}"
>{{$t('dashboard.metric.selectPanel')}}</button> >{{$t('dashboard.metric.saveChart')}}</button>
<!-- <button :disabled="saveDisabled" type="primary" @click="createNew" <!-- <button :disabled="saveDisabled" type="primary" @click="createNew"
:class="{'nz-btn nz-btn-disabled nz-btn-size-normal nz-btn-style-light btn-disabled-cursor-not-allowed' : saveDisabled , 'nz-btn nz-btn-size-normal nz-btn-style-normal' : !saveDisabled}" :class="{'nz-btn nz-btn-disabled nz-btn-size-normal nz-btn-style-light btn-disabled-cursor-not-allowed' : saveDisabled , 'nz-btn nz-btn-size-normal nz-btn-style-normal' : !saveDisabled}"
>{{$t('dashboard.metric.createPanel')}}</button> >{{$t('dashboard.metric.createPanel')}}</button>
@@ -70,9 +70,8 @@
</el-row> </el-row>
<!-- options --> <!-- options -->
<el-row class="mt-10 margin-b-10"> <!--<el-row class="mt-10 margin-b-10">
<div>Options</div> <div>Options</div>
<!-- <el-checkbox :disabled="saveDisabled" v-model="isSave" checked >options</el-checkbox> -->
</el-row> </el-row>
<el-form :model="chartInfo" ref="chartInfo"> <el-form :model="chartInfo" ref="chartInfo">
<el-row> <el-row>
@@ -94,7 +93,6 @@
:rules="{ required: true, type: 'number', trigger: 'change' }"> :rules="{ required: true, type: 'number', trigger: 'change' }">
<el-input v-model="chartInfo.height" :min="400" size="mini" class="w-select" placeholder=""></el-input> <el-input v-model="chartInfo.height" :min="400" size="mini" class="w-select" placeholder=""></el-input>
<span class='nz-input-append'>px</span> <span class='nz-input-append'>px</span>
<!-- <el-input-number :min="400" size="small" v-model="chartInfo.height" class="w-select" placeholder=""></el-input-number>px -->
</el-form-item> </el-form-item>
</div> </div>
</el-row> </el-row>
@@ -114,25 +112,28 @@
</el-form-item> </el-form-item>
</div> </div>
</el-row> </el-row>
</el-form> </el-form>-->
</div> </div>
<metric-pre-panel-box :chartInfo="chartInfo" :elementTarget="elementTarget" :seriesData="seriesData" :series="series" :chartCount="chartCount" @reload="reload" ref="panelBox"></metric-pre-panel-box> <!--<metric-pre-panel-box :chartInfo="chartInfo" :elementTarget="elementTarget" :seriesData="seriesData" :series="series" :chartCount="chartCount" @reload="reload" ref="panelBox"></metric-pre-panel-box>-->
<chart-box ref="addChartModal" :panel-data="panelData" @on-create-success="createSuccess"></chart-box>
</div> </div>
</template> </template>
<script> <script>
//import axios from 'axios'; //import axios from 'axios';
import bus from '../../../libs/bus'; import bus from '../../../libs/bus';
import chartMetric from "./chartMetricForPreview"; import chartMetric from "./chartMetricForPreview";
import metricPrePanelBox from "../../common/rightBox/metricPrePanelBox"; import chartBox from "./chartBox";
//import metricPrePanelBox from "../../common/rightBox/metricPrePanelBox";
export default { export default {
name: 'metricSet', name: 'metricSet',
props: { props: {
panelData: Array
}, },
components: { components: {
'chart-metric':chartMetric, 'chart-metric':chartMetric,
'metric-pre-panel-box':metricPrePanelBox 'chart-box':chartBox,
//'metric-pre-panel-box':metricPrePanelBox
}, },
data() { data() {
return { return {
@@ -141,12 +142,12 @@ export default {
chartModal: false, // 展示弹出框 chartModal: false, // 展示弹出框
elements: [1], // 指标部分 tarNum elements: [1], // 指标部分 tarNum
// 新建信息 // 新建信息
chartInfo: { /*chartInfo: {
title: '', // 名称 title: '', // 名称
span: 12, // 宽度 span: 12, // 宽度
height: 400, // 高度 height: 400, // 高度
type: 'line', // 类型 type: 'line', // 类型
}, },*/
chartId: 0, chartId: 0,
elements: [1], // 指标部分 tarNum elements: [1], // 指标部分 tarNum
elementTarget: {}, // 获取chartTag数据后保存 elementTarget: {}, // 获取chartTag数据后保存
@@ -199,6 +200,23 @@ export default {
this.seriesData = data; this.seriesData = data;
this.series = series; this.series = series;
}, },
createSuccess(type, response, param, panel) { //添加chart成功
this.$confirm(this.$t("dashboard.metric.goPanelTip"),this.$t("tip.saveSuccess"), {
confirmButtonText: this.$t("tip.yes"),
cancelButtonText: this.$t("tip.no"),
type: 'success'
}).then(() => {
//this.$store.state.assetData.moduleData = 'panel';
this.$store.state.showPanel.id = panel.id;
this.$store.state.showPanel.name = panel.name;
this.$router.push({
path: "/panel",
query: {
t: +new Date()
}
});
});
},
// 默认打开 // 默认打开
initOpen() { initOpen() {
this.getSuggestMetric(); this.getSuggestMetric();
@@ -213,19 +231,24 @@ export default {
}, },
// 创建看板 // 创建看板
createNew() { createNew() {
this.$refs.panelBox.show(true); /*this.$refs.panelBox.show(true);
//this.panel = {id: '', name: ''}; //this.panel = {id: '', name: ''};
this.$refs.panelBox.setTitle(this.$t("dashboard.panel.createPanelTitle")); this.$refs.panelBox.setTitle(this.$t("dashboard.panel.createPanelTitle"));
this.$refs.panelBox.setIsCreatePanel(true); this.$refs.panelBox.setIsCreatePanel(true);
this.$refs.panelBox.setChartTitle(this.metricInfo.metric); this.$refs.panelBox.setChartTitle(this.metricInfo.metric);*/
}, },
// 选择看板 // 选择看板
selectPanel() { selectPanel() {
this.$refs.panelBox.show(true); /*this.$refs.panelBox.show(true);
this.$refs.panelBox.setTitle(this.$t("dashboard.panel.selectPanelTitle")); this.$refs.panelBox.setTitle(this.$t("dashboard.panel.selectPanelTitle"));
this.$refs.panelBox.setIsCreatePanel(false); this.$refs.panelBox.setIsCreatePanel(false);
this.$refs.panelBox.setChartTitle(this.metricInfo.metric); this.$refs.panelBox.setChartTitle(this.metricInfo.metric);
this.$refs.panelBox.getTableData(); this.$refs.panelBox.getTableData();*/
},
saveChart() { //新增chart
this.$refs.addChartModal.setTitle(this.$t("dashboard.panel.createChartTitle"));
this.$refs.addChartModal.show(true);
this.$refs.addChartModal.createData(-1, this.metricInfo);
}, },
// 删除指标,第一步, 新方法 // 删除指标,第一步, 新方法
deleteTarget(index) { deleteTarget(index) {
@@ -288,14 +311,14 @@ export default {
}, },
*/ */
// 初始化信息 // 初始化信息
initInfo() { /*initInfo() {
this.chartInfo.title = ''; this.chartInfo.title = '';
this.chartInfo.type = 1; this.chartInfo.type = 1;
this.chartInfo.span = 12; this.chartInfo.span = 12;
this.chartInfo.height = 400; this.chartInfo.height = 400;
this.elements = [1]; this.elements = [1];
this.elementTarget = {}; this.elementTarget = {};
}, },*/
// 生成预览图表 // 生成预览图表
preview(params) { preview(params) {
if (params === 'change') { if (params === 'change') {
@@ -305,19 +328,20 @@ export default {
// 触发每个tag组件内部进行校验 // 触发每个tag组件内部进行校验
this.$refs.chartTag.saveTarget(); // => getTartget this.$refs.chartTag.saveTarget(); // => getTartget
// 保存图表时进行参数认证 // 保存图表时进行参数认证
if (this.isSave) { /*if (this.isSave) {
this.$refs.chartInfo.validate(); this.$refs.chartInfo.validate();
} }*/
}, },
// 获取每个tag组件内部校验后数据,点击生成图表时触发 // 获取每个tag组件内部校验后数据,点击生成图表时触发
getTarget(target) { getTarget(target) {
// 由于条件限制，每次其实只有一个target // 由于条件限制，每次其实只有一个target
this.elementTarget = JSON.parse(JSON.stringify(target)); this.elementTarget = JSON.parse(JSON.stringify(target));
this.$refs.chartInfo.validate((valid) => { /*this.$refs.chartInfo.validate((valid) => {
if (valid) { if (valid) {*/
this.loading = true; this.loading = true;
// 保存图表到看板 // 保存图表到看板
const params = Object.assign({}, this.chartInfo); const params = {};
//const params = Object.assign({}, this.chartInfo);
//params.tags = this.tagsToString(this.elementTarget.tagList); //params.tags = this.tagsToString(this.elementTarget.tagList);
const elements = []; const elements = [];
@@ -344,8 +368,8 @@ export default {
this.saveDisabled = false; // 查询成功以后,可以进行保存操作 this.saveDisabled = false; // 查询成功以后,可以进行保存操作
// 将参数返回,进行查询 // 将参数返回,进行查询
this.$emit('on-view-chart', params, this.chartCount); this.$emit('on-view-chart', params, this.chartCount);
} /*}
}); });*/
}, },
/* /*
// 确认创建图表 // 确认创建图表

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

@@ -306,8 +306,8 @@
}; };
this.$refs.panelBox.setTitle(this.$t("dashboard.panel.createPanelTitle")); this.$refs.panelBox.setTitle(this.$t("dashboard.panel.createPanelTitle"));
}, },
panelReload() { panelReload(clearShowPanel) {
this.getTableData(); this.getTableData(clearShowPanel);
}, },
refreshTime(st, et) { refreshTime(st, et) {
const startTime = bus.timeFormate(st, 'yyyy-MM-dd hh:mm'); const startTime = bus.timeFormate(st, 'yyyy-MM-dd hh:mm');
@@ -411,10 +411,16 @@
this.$get('panel?pageNo=1&pageSize=-1').then(response => { this.$get('panel?pageNo=1&pageSize=-1').then(response => {
if (response.code === 200) { if (response.code === 200) {
this.panelData = response.data.list; this.panelData = response.data.list;
for (let i = 0; i < this.panelData.length; i++) {
if (this.panelData[i].id == this.showPanel.id) {
this.showPanel.name = this.panelData[i].name;
break;
}
}
} }
}); });
}, },
getTableData: function () { getTableData: function (clearShowPanel) {
this.$get('panel?pageNo=1&pageSize=-1').then(response => { this.$get('panel?pageNo=1&pageSize=-1').then(response => {
if (response.code === 200) { if (response.code === 200) {
this.panelData = response.data.list; this.panelData = response.data.list;
@@ -423,7 +429,9 @@
this.showPanel.name = this.$store.state.showPanel.name; this.showPanel.name = this.$store.state.showPanel.name;
this.showPanel.id = this.$store.state.showPanel.id; this.showPanel.id = this.$store.state.showPanel.id;
} }
if (clearShowPanel) {
this.showPanel.id = '';
}
if (this.showPanel.id === '') { if (this.showPanel.id === '') {
this.showPanel.id = response.data.list[0].id; this.showPanel.id = response.data.list[0].id;
this.showPanel.name = response.data.list[0].name; this.showPanel.name = response.data.list[0].name;
@@ -441,8 +449,8 @@
} }
this.$store.state.showPanel.id = 0; this.$store.state.showPanel.id = 0;
this.$store.state.showPanel.name = ''; this.$store.state.showPanel.name = '';
}
}
}) })
}, },
//定期刷新 //定期刷新