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

feat:新增功能

Browse Source 
1.panel图表的创建
2.panel图表的展示
3.create+增加了创建panel菜单
This commit is contained in:
hanyuxia
2020-01-03 17:17:09 +08:00
parent ffdb21531b
commit 0530d0c9cf
16 changed files with 2862 additions and 243 deletions
Download Patch File Download Diff File Expand all files Collapse all files

496
nezha-fronted/src/components/page/dashboard/chartBox.vue Normal file
View File

@@ -0,0 +1,496 @@
<style scoped>
.el-row {
margin-bottom: 20px;
}
.el-row:last-child {
margin-bottom: 0;
}
.el-col {
border-radius: 4px;
}
.bg-purple {
background: white;
}
.grid-content {
border-radius: 4px;
min-height: 36px;
}
.common-float-left {
float: left;
display:inline-block;
}
.el-inner {
width: 200px;
border-top-width: 0px;
border-left-width: 0px;
border-right-width: 0px;
border-bottom-width: 10px;
border-color:red;
/*outline: medium;*/
}
.element-bottom-border {
padding-bottom: 5px;
border-bottom: 1px solid #dfe7f2;
margin-top:-25px;
}
/*metric样式--begin*/
.element-item {
padding-bottom: 20px;
border-bottom: 1px dashed #dfe7f2;
}
/*metric样式--end*/
.label-center{
margin-top:6px;
}
</style>
<template key="chartBox">
<transition name="right-box">
<div class="right-box right-box-add-chart" v-if="rightBox.show" >
<!-- begin--顶部按钮-->
<div class="right-box-top-btns">
<button type="button" v-if="chart.id != ''" @click="del(chart)" class="nz-btn nz-btn-size-normal nz-btn-style-light">
<span class="top-tool-btn-txt">{{$t('overall.delete')}}</span>
</button>
<button type="button" @click="confirmAdd" class="nz-btn nz-btn-size-normal nz-btn-style-normal">
<span class="top-tool-btn-txt">{{$t('overall.save')}}</span>
</button>
<button type="button" @click="esc" class="nz-btn nz-btn-size-normal nz-btn-style-light nz-btn-style-square">
<span class="top-tool-btn-txt"><i class="el-icon-close"></i></span>
</button>
</div>
<!-- end--顶部按钮-->
<!-- begin--标题-->
<div class="right-box-title">{{rightBox.title}}</div>
<!-- end--标题-->
<!-- begin--表单-->
<el-scrollbar class="right-box-form-box">
<el-form class="right-box-form" :model="chart" label-position="top" :rules="rules" ref="chartForm">
<el-form-item :label='$t("dashboard.panel.chartForm.chartName")' prop="title">
<el-input size="mini" maxlength="64" show-word-limit v-model="chart.title"></el-input>
</el-form-item>
<el-row :gutter="10">
<el-col :span="2" >
<div class="label-center" >{{$t('dashboard.panel.chartForm.type')}}</div>
</el-col>
<el-col :span="4">
<div class="grid-content ">
<el-form-item prop="type">
<el-select class="right-box-row-with-btn" value-key="chartType" popper-class="" v-model="chart.type" placeholder="" size="small">
<el-option v-for="item in chartTypeList" :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>
</el-col>
<el-col :span="2.1">
<div class="label-center" >{{$t('dashboard.panel.chartForm.width')}}</div>
</el-col>
<el-col :span="5">
<div class="grid-content ">
<el-form-item prop="span">
<el-select class="right-box-row-with-btn" value-key="chartSpan" popper-class="" v-model="chart.span" placeholder="" size="small">
<el-option v-for="item in spanList" :key="item" :label="'span-' + item" :value="item">
<span class="panel-dropdown-label-txt" > span-{{item}}</span>
</el-option>
</el-select>
</el-form-item>
</div>
</el-col>
<el-col :span="2">
<div class="label-center" >{{$t('dashboard.panel.chartForm.high')}}</div>
</el-col>
<el-col :span="8">
<div class="grid-content ">
<el-form-item prop="heigh">
<el-input-number :min="10" label="" v-model="chart.height" placeholder="" size="small"></el-input-number>px
</el-form-item>
</div>
</el-col>
</el-row>
<el-row class="element-bottom-border" >
<div >{{$t('dashboard.panel.chartForm.metric')}}</div>
</el-row>
<el-row class="element-item" v-for="(elem, index) in elements" :key="'ele' + index">
<chart-metric ref="chartTag"
:product-id="productId"
:pointer="index"
:metric-list="metricList"
:count-total="elements.length"
@on-delete-target="deleteTarget"
@sub-save-ok="subOk"
@on-add-target-success="getTarget"
></chart-metric>
</el-row>
<el-row :gutter="20">
<el-col :span="20">
<button type="button" @click="addTarget" class="nz-btn nz-btn-size-normal nz-btn-style-normal">
<span class="top-tool-btn-txt">{{$t('dashboard.panel.chartForm.addMetric')}}</span>
</button>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="20">
&nbsp;
</el-col>
</el-row>
</el-form>
</el-scrollbar>
<!--
<div class="right-box-form">
<div class="right-box-form-row">
<div class="right-box-form-label">{{$t('dashboard.panel.chartForm.chartName')}}</div>
<div class="right-box-form-content">
<el-input placeholder="" maxlength="64" show-word-limit v-model="chart.title" size="small"></el-input>
</div>
</div>
<div class="right-box-form-row">
<el-row :gutter="20">
<el-col :span="8"><div class="grid-content bg-purple">1</div></el-col>
<el-col :span="8"><div class="grid-content bg-purple">2</div></el-col>
<el-col :span="8"><div class="grid-content bg-purple">3</div></el-col>
</el-row>
</div>
</div>
-->
<!-- end--表单-->
<!-- begin--底部按钮-->
<!--
<div class="right-box-bottom-btns">
<div @click="esc" class="right-box-bottom-btn right-box-bottom-btn-cancel right-box-bottom-btn-50">{{$t('overall.cancel')}}</div><div @click="save" class="right-box-bottom-btn right-box-bottom-btn-50">{{$t('overall.create')}}</div>
</div>
-->
<!-- end--底部按钮-->
</div>
</transition>
</template>
<script>
import bus from '../../../libs/bus';
import ChartMetric from "./chartMetric";
export default {
name: "chartBox",
props: {
},
data() {
return {
rightBox: {
show: false,
title: this.$t('dashboard.panel.createChartTitle'),
},
chart: {
id:'',
title: '',
type:'line',
span:12,
height:400,
elements:{
id: '',
expression: '',
type: ''
}
},
rules: {
title: [
{required: true, trigger: 'blur'}
],
/*
heigh: [
{required: true, message: this.$t('validate.required'), trigger: 'blur'}
]
*/
},
chartTypeList: [
{
id:"line",
name:this.$t("dashboard.panel.chartForm.typeVal.line.label")
},
{
id:"bar",
name:this.$t("dashboard.panel.chartForm.typeVal.bar.label")
},
{
id:"table",
name:this.$t("dashboard.panel.chartForm.typeVal.table.label")
}
],
elements: [1], // 指标部分 tarNum
elementTarget: [], // 本地保存数据
spanList: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
// 是否为编辑已有信息
isedit: false,
productId: 0,//不需要这个参数，可以删除
panelId: 0,
metricList: [], // metric列表
deleteIndex: '', // 要删除的指标模块
subCount: 0, // subSave保存data到bus计数器
}
},
components:{
'chart-metric':ChartMetric
},
methods: {
show(show) {
this.rightBox.show = show;
},
save() {
this.$refs['chartForm'].validate((valid) => {
if (valid) {
if (this.chart.id) {//修改
this.$put('panel/'+this.chart.id+'/charts', this.project).then(response => {
if (response.code === 200) {
this.esc();
this.$message({duration: 1000, type: 'success', message: this.$t("tip.saveSuccess")});
} else {
this.$message.error(response.msg);
}
});
} else {//新增
this.$post('panel/charts', this.chart).then(response => {
if (response.code === 200) {
this.esc();
this.$message({duration: 1000, type: 'success', message: this.$t("tip.saveSuccess")});
} else {
this.$message.error(response.msg);
}
});
}
} else {
console.log('error submit!!');
return false;
}
});
},
del: function(u) {
this.$confirm(this.$t("tip.confirmDelete"), {
confirmButtonText: this.$t("tip.yes"),
cancelButtonText: this.$t("tip.no"),
type: 'warning'
}).then(() => {
this.$delete("panel/"+u.id+"/charts").then(response => {
if (response.code === 200) {
this.esc();
this.$message({duration: 1000, type: 'success', message: this.$t("tip.deleteSuccess")});
} else {
this.$message.error(response.msg);
}
})
});
},
//----------------------------------
/*关闭弹框*/
esc() {
this.rightBox.show = false;
//this.editParamBox.show = false;
},
/*metric部分相关方法--begin*/
// 增加指标,tarNum
addTarget() {
this.elements.push(1);
},
// 删除指标,第一步, 新方法
deleteTarget(index) {
this.deleteIndex = index;
this.$refs.chartTag.forEach((item) => {
// 子组件保存内容到bus
item.subSave();
});
},
// subSave保存成功后回调,第二步
subOk() {
// 每个模块均有返回,当全部模块返回完成时,将sub计数器重置
this.subCount += 1;
if (this.subCount === this.elements.length) {
this.subCount = 0;
// 保存完成,进行删除操作
this.elements.splice(this.deleteIndex, 1);
this.elementTarget.splice(this.deleteIndex, 1);
bus.chartAddInfo.metricTarget.splice(this.deleteIndex, 1);
this.$nextTick(() => {
this.$refs.chartTag.forEach((item, index) => {
item.setSubdata(index); // 将数据从bus重新赋值
});
});
}
},
// 格式化tag为字符串表达式
tagsToString(metric,arr) {
let str = metric;
arr.forEach((item, index) => {
if (index === 0) {
str +="{"
if(item.value.length===1){
str += `${item.name}='${item.value.join('|')}'`;
}else if(item.value.length>1){
str += `${item.name}=~'${item.value.join('|')}'`;
}
} else {
if(item.value.length===1){
str += `,${item.name}='${item.value.join('|')}'`;
}else if(item.value.length>1){
str += `,${item.name}=~'${item.value.join('|')}'`;
}
}
});
str +="}";
return str;
},
// 新建图表
addCharts(params) {
this.$post('panel/'+this.panelId+'/charts', params).then(response => {
if (response.code === 200) {
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);
} else {
this.$message.error(response.msg);
}
});
},
// 更新图表
updateCharts(params) {
/*
const obj = params;
obj.id = this.chartId;
updateCharts(obj).then((res) => {
if (res.status === 200) {
this.chartModal = false;
this.initInfo();
this.$refs.chartInfo.resetFields();
this.$emit('on-create-success', 'update', res.data);
}
});
*/
},
// 获取每个tag组件内部校验后数据,点击生成图表时触发
getTarget(target) {
this.elementTarget.push(target);
if (this.elementTarget.length === this.elements.length) {
this.$refs.chartForm.validate((valid) => {
const params = {
// productId: this.productId,
//panelId: this.panelId,
title: this.chart.title,//this.chart
span: this.chart.span,
height: this.chart.height,
type: this.chart.type,
};
//生成指标数组
const elements = [];
this.elementTarget.forEach((elem,index) => {
if(elem.type==='normal'){
const metricStr = this.tagsToString(elem.metric,elem.selectedTagList);
elements.push({
//id:index+1,
//metric: elem.metric,//指标名称
expression: metricStr,//指标对应Label及Value组成的表达式字符串
type:elem.type,//指标类型
});
}else if(elem.type==='expert'){
elements.push({
//id:index+1,
//metric: elem.metric,//指标名称
expression: elem.expression,//指标对应Label及Value组成的表达式字符串
type:elem.type,//指标类型
});
}
});
params.elements = elements;
if (valid) {
if (this.isedit) {
params.id = this.chartId;
this.updateCharts(params);
} else {
this.addCharts(params);
}
}
});
}
},
// 生成图表
confirmAdd() {
this.elementTarget = []; // 初始化清空参数
this.$refs.chartTag.forEach((item, index) => {//循环指标列表
// 触发每个tag组件内部进行校验
item.saveTarget(index);
});
this.$refs.chartForm.validate();
},
// 获取metric列表
getSuggestMetric() {
this.$get('metric', {pageNo: 1, pageSize: 9999}).then(response => {
if (response.code === 200) {
this.metricList = response.data.list;
}else {
this.metricList = [];
}
})
},
// 创建打开
createData(panelId) {
this.panelId = panelId;
this.isedit = false;
this.initInfo(); // 初始化图表信息
//this.chartModal = true;//????控制弹出框显示和隐藏的，不需要了
this.initOpen(); // 获取metric, productId数据
},
// 初始化信息
initInfo() {
this.chart.title = '';
this.chart.type = 'line';
this.chart.span = 12;
this.chart.height = 400;
this.elements = [1];
this.elementTarget = [];
bus.chartAddInfo.metricTarget = [];
},
// 创建时打开,用于清空chart-tag数据
initOpen() {
bus.$emit('clear_history');
/* 项目不需要produce
if (this.$route.params.productId) {
this.productId = parseInt(this.$route.params.productId, 10);
}
*/
this.getSuggestMetric();//this.getSuggestMetric(this.productId);
},
/*metric部分相关方法--end*/
},
created() {
},
watch: {
}
}
</script>