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

feat：chart type为singleStat 是 value Mapping 可以设置字体颜色 和背景颜色

Browse Source
This commit is contained in:
zhangyu
2020-12-04 15:24:59 +08:00
parent c48b02839a
commit 728416de04
4 changed files with 496 additions and 258 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
nezha-fronted/src/components/charts/chart-single-stat.vue
View File

@@ -41,7 +41,7 @@
</el-dropdown>
</div>
<div class="mt-10 single-stat-container" v-cloak v-show="firstShow" >
<div :id="'chartContainer'+chartIndex" ref="chartContainer" class="single-stat-content" >
<div :id="'chartContainer'+chartIndex" ref="chartContainer" class="single-stat-content" :style="{color:mapping?mapping.color.text:'#000',background:mapping?mapping.color.bac:'#fff'}">
{{serieSingleStat}}
<div class="chart-no-data" v-show="noData">No Data</div>
</div>
@@ -58,7 +58,7 @@
<span class="float-right dialog-tool" @click="screenRefreshChart" style="margin-right: 15px"><i class="global-active-color nz-icon nz-icon-refresh"/></span>
</div>
<div class="single-stat-screen-container" >
<div id="chartScreenContainer" ref="chartScreenContainer" class="single-stat-content" >
<div id="chartScreenContainer" ref="chartScreenContainer" class="single-stat-content" :style="{color:mapping?mapping.color.text:'#000',background:mapping?mapping.color.bac:'#fff'}">
{{serieSingleStat}}
<div class="chart-no-data" v-show="noData">No Data</div>
</div>
@@ -112,6 +112,7 @@ export default {
seriesItem: [], // 保存信息
seriesItemScreen:[],//全屏数据
serieSingleStat:'',
mapping:'',//满足valueMapping时 mapping的值
images: '',
loading:Object,
items: {
@@ -409,8 +410,24 @@ export default {
this.data = chartItem;
this.unit = chartDataFormat.getUnit(this.data.unit);
if(Number(seriesItem)){
let singleStatTmp =parseFloat(Number(seriesItem).toFixed(2));
let singleStatTmp =parseFloat(Number(seriesItem).toFixed(2));//parseFloat ：如果没有小数点，或者小数点后都是零，parseFloat() 会返回整数。
if(chartItem.param.valueMapping && chartItem.param.valueMapping.type){
let type=chartItem.param.valueMapping.type;
let mappings=chartItem.param.valueMapping.mapping?chartItem.param.valueMapping.mapping:[];
let mapping;
if(type == 'value'){
mapping=mappings.find(item=>{return item.value == singleStatTmp})
}else{
mapping=mappings.find(item=>{return item.from <= singleStatTmp&& item.to >= singleStatTmp});
}
this.mapping=mapping;
if(this.mapping&&!this.mapping.color){
this.mapping.color={bac:'#fff',text:'#000'}
}
this.serieSingleStat = mapping?mapping.text:chartDataFormat.getUnit(chartItem.unit?chartItem.unit:2).compute(singleStatTmp,null,2);
}else{
this.serieSingleStat = chartDataFormat.getUnit(chartItem.unit?chartItem.unit:2).compute(singleStatTmp,null,2);
}
}else {
this.serieSingleStat =seriesItem;
}
@@ -439,6 +456,10 @@ export default {
}else{
mapping=mappings.find(item=>{return item.from <= singleStatTmp&& item.to >= singleStatTmp});
}
this.mapping=mapping;
if(this.mapping&&!this.mapping.color){
this.mapping.color={bac:'#fff',text:'#000'}
}
this.serieSingleStat = mapping?mapping.text:chartDataFormat.getUnit(chartItem.unit?chartItem.unit:2).compute(singleStatTmp,null,2);
}else{
this.serieSingleStat = chartDataFormat.getUnit(chartItem.unit?chartItem.unit:2).compute(singleStatTmp,null,2);

15
nezha-fronted/src/components/charts/chart.scss
View File

@@ -249,8 +249,7 @@
.chart-single-stat {
width: 100%;
.single-stat-container {
padding-left: 8px;
padding-right: 8px;
padding: 8px;
display: table;
text-align: center;
width: calc(100% - 16px);
@@ -262,6 +261,18 @@
}
}
}
.single-stat-screen-container{
height: 100%;
.single-stat-content{
font-size: 30px;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
flex-direction: column;
height: 100%;
}
}
.chart-container.chart-detail {
height: 100%;
position: relative;

2
nezha-fronted/src/components/common/js/tools.js
View File

@@ -72,8 +72,10 @@ export const clickoutside = {
if (binding.arg) {
binding.value(e, binding.arg);
} else {
if(binding.value){
binding.value(e);
}
}
}
}

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

@@ -58,9 +58,91 @@
.save-chart-box{
z-index: 2900;
}
.mc{
position: fixed;
width: 100vw;
height: 100vh;
top: 0;
left: 0;
z-index: 410;
}
/deep/ .el-color-picker{
position: absolute;
}
.range /deep/ .el-color-picker{
left: -17px;
}
.color-content{
height: 0;
width: 0;
overflow: hidden;
position: absolute;
top: -280px;
left: 140px;
}
.color-tab{
position: absolute;
top: -268px;
left: -14px;
height: 28px;
border-radius: 5px 5px 0 0;
width: 312px;
border: 1px solid #EBEEF5;
border-bottom: none;
background-color: #FFF;
display: flex;
justify-content: space-between;
box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
}
.color-tab div{
text-align: center;
flex: 1;
color: #909399;
transition: all .3s cubic-bezier(.645,.045,.355,1);
background: #E4E7ED;
cursor: pointer;
}
.color-tab div:first-child{
border-right-color: #DCDFE6;
}
.color-tab div:hover{
color: #409EFF;
}
.color-tab .color-active{
color: #409EFF;
background-color: #FFF;
}
.color{
position: relative;
}
.color-show{
border: 1px solid #E7EAED;
border-radius: 5px;
align-items: center;
width: 28px;
height: 28px;
display: inline-block;
vertical-align: middle;
position: relative;
}
.color-show-left{
width: 28px;
height: 28px;
border-radius: 5px;
text-align: center;
line-height: 28px;
}
.color-arrows{
color: #fff;
font-weight: bold;
}
.color-arrows .nz-icon{
font-size: 12px;
}
</style>
<template key="chartBox">
<div v-clickoutside="clickOutside" class="right-box right-box-add-chart z-top right-box-chart" :class="boxClass">
<div class="mc" @click.self="clickOutside">
<div class="right-box right-box-add-chart z-top right-box-chart" :class="boxClass">
<transition name="right-box">
<panel-box :panel="panel" @reload="panelReload" ref="panelBox2" v-if="!showPanel.type"></panel-box>
</transition>
@@ -200,7 +282,7 @@
@removeExpression="removeExpression"
:showRemove="false"
></promql-input>
<!--
<!--
<promql-input
:ref="'promql-'+(index-1)"
:id="promqlKeys[index-1]"
@@ -215,7 +297,7 @@
@removeExpression="removeExpression"
:showRemove="false"
></promql-input>
-->
-->
<el-row>
<template v-if="editChart.type != 'singleStat'">
<el-col style="width: 120px; padding-right: 20px; text-align: right; color: #666">
@@ -263,7 +345,36 @@
<el-input size="mini" type="input" v-model="mapping.value" style="display: inline-block;;"></el-input>
</el-form-item>
<el-form-item :label="$t('dashboard.panel.chartForm.valMapping.text')" prop="span" class="half-form-item-other half-form-item-other-two">
<el-input size="mini" type="input" v-model="mapping.text" style="display: inline-block;width:calc(100% - 40px);"></el-input>
<el-input size="mini" type="input" v-model="mapping.text" style="display: inline-block;width:calc(100% - 80px);"></el-input>
<!--颜色选择器 start-->
<div class="color-show" @click="colorPickerClick(index)" v-clickoutside="(e)=>{colorOut(index,e)}">
<div class="color-show-left" :style="{background:mapping.color.bac}">
<span class="color-arrows" :style="{color:mapping.color.text}">
<!--<i class="nz-icon nz-icon-arrow-down" v-show="!showPicker[index].bac && !showPicker[index].text" :style="{color:mapping.color.text}"></i>-->
<!--<i class="nz-icon nz-icon-arrow-up" v-show="showPicker[index].bac || showPicker[index].text" :style="{color:mapping.color.text}"></i>-->
T
</span>
</div>
</div>
<div class="color-content" ref="color-content">
<el-color-picker
v-model="showPicker[index].bac?mapping.color.bac:mapping.color.text"
:ref="'colorPickerBac'+index"
@active-change="(val)=>colorChange(mapping,showPicker[index].bac,val)"
>
</el-color-picker>
<!--<el-color-picker-->
<!--v-model="mapping.color.text"-->
<!--:ref="'colorPickerText'+index"-->
<!--@active-change="(val)=>colorChange(mapping,'text',val)"-->
<!--&gt;-->
<!--</el-color-picker>-->
</div>
<div v-show="showPicker[index].bac || showPicker[index].text" class="color-tab">
<div @click="changeShowPicker(index ,'text')" :class="{'color-active':showPicker[index].text}">Text</div>
<div @click="changeShowPicker(index , 'bac')" :class="{'color-active':showPicker[index].bac}">Background</div>
</div>
<!--颜色选择器 end-->
<span @click="delMapping(index)" class="nz-icon-minus-medium" style="margin-left: 7px;padding: 6px"><i class="nz-icon nz-icon-minus" style="color: #EC7F66"></i></span>
</el-form-item>
</template>
@@ -278,8 +389,37 @@
<el-input size="mini" type="input" v-model="mapping.to"></el-input>
</el-form-item>
</div>
<el-form-item :label="$t('dashboard.panel.chartForm.valMapping.text')" prop="span" class="half-form-item-other-two">
<el-input size="mini" type="input" v-model="mapping.text" style="display: inline-block;width:calc(100% - 40px);" ></el-input>
<el-form-item :label="$t('dashboard.panel.chartForm.valMapping.text')" prop="span" class="half-form-item-other-two range">
<el-input size="mini" type="input" v-model="mapping.text" style="display: inline-block;width:calc(100% - 80px);" ></el-input>
<!--颜色选择器 start-->
<div class="color-show" @click="colorPickerClick(index)" v-clickoutside="(e)=>{colorOut(index,e)}">
<div class="color-show-left" :style="{background:mapping.color.bac}">
<span class="color-arrows" :style="{color:mapping.color.text}">
<!--<i class="nz-icon nz-icon-arrow-down" v-show="!showPicker[index].bac && !showPicker[index].text" :style="{color:mapping.color.text}"></i>-->
<!--<i class="nz-icon nz-icon-arrow-up" v-show="showPicker[index].bac || showPicker[index].text" :style="{color:mapping.color.text}"></i>-->
T
</span>
</div>
</div>
<div class="color-content" ref="color-content">
<el-color-picker
v-model="showPicker[index].bac?mapping.color.bac:mapping.color.text"
:ref="'colorPickerBac'+index"
@active-change="(val)=>colorChange(mapping,showPicker[index].bac,val)"
>
</el-color-picker>
<!--<el-color-picker-->
<!--v-model="mapping.color.text"-->
<!--:ref="'colorPickerText'+index"-->
<!--@active-change="(val)=>colorChange(mapping,'text',val)"-->
<!--&gt;-->
<!--</el-color-picker>-->
</div>
<div v-show="showPicker[index].bac || showPicker[index].text" class="color-tab">
<div @click="changeShowPicker(index ,'text')" :class="{'color-active':showPicker[index].text}">Text</div>
<div @click="changeShowPicker(index , 'bac')" :class="{'color-active':showPicker[index].bac}">Background</div>
</div>
<!--颜色选择器 end-->
<span @click="delMapping(index)" class="nz-icon-minus-medium" style="margin-left: 7px;padding: 6px"><i class="nz-icon nz-icon-minus" style="color: #EC7F66"></i></span>
</el-form-item>
</template>
@@ -332,6 +472,7 @@
<!--preview -->
<chart-preview :panelId="panelId" ref="chartsPreview" ></chart-preview>
</div>
</div>
</template>
<script>
@@ -461,6 +602,7 @@
sortedOptionKeys:[{key:'min',label:'Min'},{key:'max',label:'Max'},{key:'avg',label:'Avg'},{key:'last',label:'Last'},{key:'total',label:'Total'}],
textShow:false,
metricOptions: [],
showPicker:[],
//metricStore: []
}
},
@@ -1131,7 +1273,7 @@
param.last=0;
param.url='';
param.threshold='';
param.valueMapping={type:'text',mapping:[{value:'',text:''}]};
param.valueMapping={type:'text',mapping:[{value:'',text:'',color:{bac:'#fff',text:'#000'}}]};
param.legendValue={min:'off',max:'off',avg:'off',last:'off',total:'off'};
param.nullType='connected';
this.$set(this.editChart, "param", param);
@@ -1188,9 +1330,10 @@
statistics:'',
valueMapping:{
type:'value',
mapping:[{text:'',value:''}]
mapping:[{text:'',value:'',color:{bac:'#fff',text:'#000'}}]
}
}
this.showPicker=[{bac:false,text:false}];
}else {
this.setIsOtherChart();
if(chartType === 'bar'||chartType === 'line'||chartType === 'stackArea'){
@@ -1201,9 +1344,10 @@
statistics:'',
valueMapping:{
type:'value',
mapping:[{text:'',value:''}]
mapping:[{text:'',value:'',color:{bac:'#fff',text:'#000'}}]
}
}
this.showPicker=[{bac:false,text:false}];
}
/*if(this.$refs.chartTag){
this.$refs.chartTag.forEach((item, index) => {
@@ -1371,18 +1515,66 @@
},
valueMappingChange:function(value){
if(this.editChart.param.valueMapping.type == 'value'){
this.editChart.param.valueMapping.mapping =[{text:'',value:''}];
this.editChart.param.valueMapping.mapping =[{text:'',value:'',color:{bac:'#fff',text:'#000'}}];
this.showPicker=[{bac:false,text:false}]
}else{
this.editChart.param.valueMapping.mapping =[{from:'',to:'',text:''}];
this.editChart.param.valueMapping.mapping =[{from:'',to:'',text:'',color:{bac:'#fff',text:'#000'}}];
this.showPicker=[{bac:false,text:false}]
}
},
addMapping:function(){
if(this.editChart.param.valueMapping.type == 'value'){
this.editChart.param.valueMapping.mapping .push({text:'',value:''});
this.editChart.param.valueMapping.mapping .push({text:'',value:'',color:{bac:'#fff',text:'#000'}});
this.showPicker.push({bac:false,text:false})
}else{
this.editChart.param.valueMapping.mapping .push({from:'',to:'',text:''});
this.editChart.param.valueMapping.mapping .push({from:'',to:'',text:'',color:{bac:'#fff',text:'#000'}});
this.showPicker.push({bac:false,text:false})
}
},
colorPickerClick(index){
if(this.showPicker[index].bac|| this.showPicker[index].text){//再次点击关闭
this.showPicker[index].bac=false;
this.showPicker[index].text=false;
return
}
this.showPicker[index].bac=true;
this.$refs['colorPickerBac'+ index][0].showPicker=true;
},
changeShowPicker(index,atr){
this.$refs['colorPickerBac' + index][0].showPicker=true;
this.showPicker[index].bac=false;
this.showPicker[index].text=false;
this.showPicker[index][atr]=true;
// atr=atr.toLowerCase().replace(/( |^)[a-z]/g,(L)=>L.toUpperCase());
},
colorChange(mapping,flag,val){
if(flag){
mapping.color['bac']=this.colorRGBtoHex(val)
}else{
mapping.color['text']=this.colorRGBtoHex(val)
}
},
colorRGBtoHex(color) {
let rgb = color.split(',');
let r = parseInt(rgb[0].split('(')[1]);
let g = parseInt(rgb[1]);
let b = parseInt(rgb[2].split(')')[0]);
let hex = "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
return hex;
},
colorOut(index,e){
let flag=false;
e.path.forEach((item)=>{
if(item.className==='el-color-dropdown el-color-picker__panel' || item.className==='color-tab'){
flag=true
}
})
if(flag){
return
}
this.showPicker[index].bac=false;
this.showPicker[index].text=false;
},
delMapping:function(index){
this.editChart.param.valueMapping.mapping.splice(index,1)
},
@@ -1437,6 +1629,15 @@
immediate: true,
handler(n) {
//console.log(n);
if((n.param&&n.param.valueMapping)&&(n.type === 'singleStat' || n.type === 'table')){
n.param.valueMapping.mapping.forEach(item=>{
this.showPicker.push({bac:false,text:false})
if(!item.color){
item.color={bac:'#fff',text:'#000'};
}
})
}
if(n.title){
this.isEdit=true;
}
@@ -1449,11 +1650,11 @@
} else if(n.type === 'alertList'){
this.setIsAlertList();
} else if(n.type === 'singleStat'){
n.param&&!n.param.valueMapping&&this.$set(this.editChart.param,'valueMapping',{type:'value',mapping:[{text:'',value:''}]})
n.param&&!n.param.valueMapping&&this.$set(this.editChart.param,'valueMapping',{type:'value',mapping:[{text:'',value:'',color:{bac:'#fff',text:'#000'}}]})
this.setIsSingleStat();
} else if(n.type === 'table'){
n.param.last?this.$set(this.editChart.param,'last',n.param.last):this.$set(this.editChart.param,'last',0)
n.param&&!n.param.valueMapping&&this.$set(this.editChart.param,'valueMapping',{type:'value',mapping:[{text:'',value:''}]})
n.param&&!n.param.valueMapping&&this.$set(this.editChart.param,'valueMapping',{type:'value',mapping:[{text:'',value:'',color:{bac:'#fff',text:'#000'}}]});
}else {
this.setIsOtherChart();
n.param&&!n.param.legendValue&&this.$set(this.editChart.param,'legendValue',{min:'off',max:'off',avg:'off',last:'off',total:'off'})
@@ -1508,5 +1709,8 @@
.val-mapping-type .no-fill span{
background-color: unset !important;
}
.el-color-picker__panel{
border-radius: 0 0 5px 5px;
}
</style>