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) {
// 获取该id下chart的相关信息
const chart = this.dataList.find(item => item.id === chartId);
console.info("aaa",chart)
if (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">
<!--
<el-table size="small" :loading="tableLoading">-->
<el-table class="nz-table" :data="seriesItem" height="350" border v-loading="tableLoading">
<el-table-column 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 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 class="nz-table" :data="seriesItem" height="350" border v-loading="tableLoading" tooltip-effect="light">
<el-table-column sortable :show-overflow-tooltip="true" prop="metric" :label="$t('dashboard.panel.chartTableColumn.metric')" ></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 sortable prop="time" :label="$t('dashboard.panel.chartTableColumn.time')" width="145" ></el-table-column>
<el-table-column sortable prop="value" :label="$t('dashboard.panel.chartTableColumn.value')" ></el-table-column>
</el-table>
</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>-->
</div>
</div>
<el-table class="nz-table" :data="seriesItem" height="350" border v-loading="tableLoading">
<el-table-column 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 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 class="nz-table" :data="seriesItem" height="350" border v-loading="tableLoading" tooltip-effect="light">
<el-table-column sortable :show-overflow-tooltip="true" prop="metric" :label="$t('dashboard.panel.chartTableColumn.metric')" ></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 sortable prop="time" :label="$t('dashboard.panel.chartTableColumn.time')" width="145" ></el-table-column>
<el-table-column sortable prop="value" :label="$t('dashboard.panel.chartTableColumn.value')" ></el-table-column>
</el-table>
</el-dialog>
</div>

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

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

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

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

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

@@ -17,7 +17,7 @@
<!-- begin--表单-->
<el-scrollbar class="right-box-form-box">
<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-form-item>
</el-form>
@@ -125,6 +125,6 @@
<style scoped>
.z-top{
z-index: 51 !important;
z-index: 3000 !important;
}
</style>

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

@@ -886,7 +886,6 @@
type: 'warning'
}).then(() => {
this.$delete(data + "?ids=" + item).then(response => {
const h = this.$createElement;
if (response.code === 200) {
this.$message({duration: 2000, type: 'success', message: this.$t("tip.deleteSuccess")});
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">
<span class="config-dropdown-label-txt">{{item.name}}</span>
<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>
<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>
</div>
</el-option>
@@ -238,6 +238,7 @@
//productId: 0,//不需要这个参数，可以删除
panelId: 0,
panelName: '',
selectFirstPanel: false,
metricList: [], // metric列表
metricCascaderList:[],//metric级联列表
deleteIndex: '', // 要删除的指标模块
@@ -264,9 +265,37 @@
this.$refs.panelBox2.setTitle(this.$t("dashboard.panel.createPanelTitle"));
},
panelReload(panelName) {
if (panelName) {
this.panelName = panelName;
}
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) {
this.rightBox.title = title;
},
@@ -405,7 +434,9 @@
this.esc();
this.$message({duration: 1000, type: 'success', message: this.$t("tip.saveSuccess")});
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 {
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;
}
if (elementInfo) {
this.$nextTick(() => {
this.$refs.chartTag[0].setMdata(elementInfo.elements[0]);
});
}
this.isedit = false;
this.initInfo(); // 初始化图表信息
//this.chartModal = true;//????控制弹出框显示和隐藏的，不需要了
@@ -571,7 +611,7 @@
},
// 创建时打开,用于清空chart-tag数据
initOpen() {
bus.$emit('clear_history');
//bus.$emit('clear_history');
/* 项目不需要produce
if (this.$route.params.productId) {
this.productId = parseInt(this.$route.params.productId, 10);
@@ -591,7 +631,10 @@
deep: true,
immediate: true,
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++) {
if (n[i].name == this.panelName) {
this.panelId = n[i].id;

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

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

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

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

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

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

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

@@ -13,9 +13,7 @@
<div class="content-right">
<div class="top-tools" >
<!-- <div class="float-left metric-title" >{{$t('dashboard.metricPreview.title')}}
</div> -->
<!--<div class="top-tools">
<div class="float-right mr-10">
<el-date-picker size="mini" ref="calendar"
format="yyyy/MM/dd HH:mm"
@@ -29,16 +27,28 @@
align="right">
</el-date-picker>
</div>
</div>
</div>-->
<div class="table-list" >
<div class="box-content" >
<el-row :gutter="20" class="row-width" style="height: calc(100% - 65px);">
<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 :span="0.5"><div>&nbsp;</div></el-col>
<el-col :span="13" style="height: calc(100% - 180px);overflow-y: auto;overflow-x: hidden;">
<el-row class="border-area" v-show="chartCount === 'single'">
<el-col :span="13" class="chart-preview-area">
<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">
<line-chart-block
:show-setting="false"
@@ -96,6 +106,7 @@ export default {
metricInfo: {}, // 保存参数信息
chartCount: 'single', // multiple
lineList: [], // 线列表
panelData: [], //panel列表
searchTime:[new Date().setHours(new Date().getHours()-1),new Date()],
//searchTime:[new Date().setMinutes(new Date().getMinutes()-1),new Date()],
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) {
this.chartCount = chartCount;
@@ -409,6 +427,7 @@ refresh_scroll() {
},
mounted: function() {
this.getInit();
this.getPanelData();
},
watch: {

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

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

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

@@ -45,22 +45,22 @@
<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 :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)}"
>{{chartSwitchWord}}</button>
>{{chartSwitchWord}}</button>-->
<!-- <Button type="primary" @click="addTarget">添加指标</Button> -->
</el-row>
<el-row class="nz-btn-metric-bottom">
<!-- <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}"
>{{$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}"
>{{$t('dashboard.metric.selectPanel')}}</button>
>{{$t('dashboard.metric.saveChart')}}</button>
<!-- <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}"
>{{$t('dashboard.metric.createPanel')}}</button>
@@ -70,9 +70,8 @@
</el-row>
<!-- options -->
<el-row class="mt-10 margin-b-10">
<!--<el-row class="mt-10 margin-b-10">
<div>Options</div>
<!-- <el-checkbox :disabled="saveDisabled" v-model="isSave" checked >options</el-checkbox> -->
</el-row>
<el-form :model="chartInfo" ref="chartInfo">
<el-row>
@@ -94,7 +93,6 @@
:rules="{ required: true, type: 'number', trigger: 'change' }">
<el-input v-model="chartInfo.height" :min="400" size="mini" class="w-select" placeholder=""></el-input>
<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>
</div>
</el-row>
@@ -114,25 +112,28 @@
</el-form-item>
</div>
</el-row>
</el-form>
</el-form>-->
</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>
</template>
<script>
//import axios from 'axios';
import bus from '../../../libs/bus';
import chartMetric from "./chartMetricForPreview";
import metricPrePanelBox from "../../common/rightBox/metricPrePanelBox";
import chartBox from "./chartBox";
//import metricPrePanelBox from "../../common/rightBox/metricPrePanelBox";
export default {
name: 'metricSet',
props: {
panelData: Array
},
components: {
'chart-metric':chartMetric,
'metric-pre-panel-box':metricPrePanelBox
'chart-box':chartBox,
//'metric-pre-panel-box':metricPrePanelBox
},
data() {
return {
@@ -141,12 +142,12 @@ export default {
chartModal: false, // 展示弹出框
elements: [1], // 指标部分 tarNum
// 新建信息
chartInfo: {
/*chartInfo: {
title: '', // 名称
span: 12, // 宽度
height: 400, // 高度
type: 'line', // 类型
},
},*/
chartId: 0,
elements: [1], // 指标部分 tarNum
elementTarget: {}, // 获取chartTag数据后保存
@@ -199,6 +200,23 @@ export default {
this.seriesData = data;
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() {
this.getSuggestMetric();
@@ -213,19 +231,24 @@ export default {
},
// 创建看板
createNew() {
this.$refs.panelBox.show(true);
/*this.$refs.panelBox.show(true);
//this.panel = {id: '', name: ''};
this.$refs.panelBox.setTitle(this.$t("dashboard.panel.createPanelTitle"));
this.$refs.panelBox.setIsCreatePanel(true);
this.$refs.panelBox.setChartTitle(this.metricInfo.metric);
this.$refs.panelBox.setChartTitle(this.metricInfo.metric);*/
},
// 选择看板
selectPanel() {
this.$refs.panelBox.show(true);
/*this.$refs.panelBox.show(true);
this.$refs.panelBox.setTitle(this.$t("dashboard.panel.selectPanelTitle"));
this.$refs.panelBox.setIsCreatePanel(false);
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) {
@@ -288,14 +311,14 @@ export default {
},
*/
// 初始化信息
initInfo() {
/*initInfo() {
this.chartInfo.title = '';
this.chartInfo.type = 1;
this.chartInfo.span = 12;
this.chartInfo.height = 400;
this.elements = [1];
this.elementTarget = {};
},
},*/
// 生成预览图表
preview(params) {
if (params === 'change') {
@@ -305,19 +328,20 @@ export default {
// 触发每个tag组件内部进行校验
this.$refs.chartTag.saveTarget(); // => getTartget
// 保存图表时进行参数认证
if (this.isSave) {
/*if (this.isSave) {
this.$refs.chartInfo.validate();
}
}*/
},
// 获取每个tag组件内部校验后数据,点击生成图表时触发
getTarget(target) {
// 由于条件限制，每次其实只有一个target
this.elementTarget = JSON.parse(JSON.stringify(target));
this.$refs.chartInfo.validate((valid) => {
if (valid) {
/*this.$refs.chartInfo.validate((valid) => {
if (valid) {*/
this.loading = true;
// 保存图表到看板
const params = Object.assign({}, this.chartInfo);
const params = {};
//const params = Object.assign({}, this.chartInfo);
//params.tags = this.tagsToString(this.elementTarget.tagList);
const elements = [];
@@ -344,8 +368,8 @@ export default {
this.saveDisabled = false; // 查询成功以后,可以进行保存操作
// 将参数返回,进行查询
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"));
},
panelReload() {
this.getTableData();
panelReload(clearShowPanel) {
this.getTableData(clearShowPanel);
},
refreshTime(st, et) {
const startTime = bus.timeFormate(st, 'yyyy-MM-dd hh:mm');
@@ -411,10 +411,16 @@
this.$get('panel?pageNo=1&pageSize=-1').then(response => {
if (response.code === 200) {
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 => {
if (response.code === 200) {
this.panelData = response.data.list;
@@ -423,7 +429,9 @@
this.showPanel.name = this.$store.state.showPanel.name;
this.showPanel.id = this.$store.state.showPanel.id;
}
if (clearShowPanel) {
this.showPanel.id = '';
}
if (this.showPanel.id === '') {
this.showPanel.id = response.data.list[0].id;
this.showPanel.name = response.data.list[0].name;
@@ -441,8 +449,8 @@
}
this.$store.state.showPanel.id = 0;
this.$store.state.showPanel.name = '';
}
}
})
},
//定期刷新