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

fix：修改仪表板 legend显示的位置

Browse Source
This commit is contained in:
zhangyu
2021-12-27 14:24:35 +08:00
parent 7b4bb68db3
commit ca6a95d51b
6 changed files with 39 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
nezha-fronted/src/assets/css/components/chart/chart.scss
View File

@@ -445,6 +445,7 @@
box-sizing: border-box;
.chart-gauge-item{
display: flex;
position: relative;
justify-content: center;
align-items: center;
font-size: 30px;
@@ -454,6 +455,25 @@
padding: 2px;
overflow: hidden;
color: $--color-text-regular;
flex-direction: column;
}
.chart-gauge-content {
flex: 1;
width: 100%;
}
.chart-gauge-legend{
position: absolute;
bottom: 28%;
height: 24px;
line-height: 24px;
font-size: 16px;
width: 100%;
box-sizing: border-box;
padding: 0 10px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
text-align: center;
}
}
.chart-diagram{

46
nezha-fronted/src/components/chart/chart/chartGauge.vue
View File

@@ -3,32 +3,18 @@
<div
v-for="(item,index) in gaugeData" :key="index"
class="chart-gauge-item"
:id="isFullscreen?('chart-gauge-screen-' + chartInfo.id + '-' + index):('chart-gauge-' + chartInfo.id + '-' + index)"
:style="{height:item.height+'px',width:item.width + 'px'}"
>
<!-- :style="{background:item.mapping ? item.mapping.color.bac : false,height:item.height+'px',width:item.width + 'px'}"-->
<!-- <span v-if="chartInfo.param.text==='all'">-->
<!-- <span v-if="item.mapping" :style="{color:item.mapping.color.text}">-->
<!-- {{item.legend}}<br/><span>{{handleDisplay(item.mapping.display, { ...item.label, value: item.showValue })}}</span>-->
<!-- </span>-->
<!-- <span v-else>{{item.legend}}<br/><span>{{item.showValue}}</span></span>-->
<!-- </span>-->
<!-- <span v-if="chartInfo.param.text==='legend'">-->
<!-- <span v-if="item.mapping" :style="{color:item.mapping.color.text}">-->
<!-- {{item.legend}}<br/><span>{{handleDisplay(item.mapping.display, { ...item.label, value: item.showValue })}}</span>-->
<!-- </span>-->
<!-- <span v-else>{{item.legend}}</span>-->
<!-- </span>-->
<!-- <span v-if="chartInfo.param.text==='value'|| !chartInfo.param.text">-->
<!-- <span v-if="item.mapping" :style="{color:item.mapping.color.text}">-->
<!-- {{handleDisplay(item.mapping.display, { ...item.label, value: item.showValue })}}-->
<!-- </span>-->
<!-- <span v-else>{{item.showValue}}</span>-->
<!-- </span>-->
<!-- <span v-if="chartInfo.param.text==='none'">-->
<!-- ' '-->
<!-- </span>-->
<div
:id="isFullscreen?('chart-gauge-screen-' + chartInfo.id + '-' + index):('chart-gauge-' + chartInfo.id + '-' + index)"
class="chart-gauge-content"
></div>
<div
v-if="item.height > 48 && chartInfo.param &&( chartInfo.param.text === 'legend' || chartInfo.param.text === 'all' )"
class="chart-gauge-legend"
>
{{item.alias}}
</div>
</div>
</div>
</template>
@@ -184,18 +170,10 @@ export default {
showValue = self.handleDisplay(item.mapping.display, { ...item.label, value: showValue })
}
let str = ''
if (this.chartInfo.param.text === 'all') {
str += showValue
str += '\n'
str += item.alias
}
if (this.chartInfo.param.text === 'value' || !this.chartInfo.param.text) {
if (this.chartInfo.param.text === 'all' || this.chartInfo.param.text === 'value' || !this.chartInfo.param.text) {
str += showValue
}
if (this.chartInfo.param.text === 'legend') {
str += item.alias
}
if (this.chartInfo.param.text === 'none') {
if (this.chartInfo.param.text === 'none' || this.chartInfo.param.text === 'legend') {
str += ''
}
str += ''

2
nezha-fronted/src/components/chart/chart/chartTreemap.vue
View File

@@ -103,7 +103,7 @@ export default {
const showValue = chartDataFormat.getUnit(chartInfo.unit ? chartInfo.unit : 2).compute(value, null, -1, 2)
const mapping = this.selectMapping(value, chartInfo.param.valueMapping, chartInfo.param.enable && this.chartInfo.param.enable.valueMapping)
// eslint-disable-next-line vue/no-mutating-props
mapping && (this.chartOption.color[colorIndex] = mapping.color.bac)
this.chartOption.color && mapping && (this.chartOption.color[colorIndex] = mapping.color.bac)
s.data.push({
value: value,
realValue: value,

4
nezha-fronted/src/components/chart/chart/tools.js
View File

@@ -46,7 +46,9 @@ export function getOption (type) {
chartOption = lodash.cloneDeep(chartGaugeOption)
break
}
default: break
default:
chartOption = {}
break
}
return chartOption
}

2
nezha-fronted/src/components/chart/panelChart.vue
View File

@@ -423,7 +423,7 @@ export default {
immediate: true,
deep: true,
handler (n) {
console.log(n)
// console.log(n)
}
}
},

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

@@ -80,8 +80,8 @@
</template>
</div>
<div id="tableList" class="table-list" style='overflow-y: unset'>
<div id="dashboardScrollbar" class="table-list-box">
<div class="box-content" v-loading="chartListLoading" ref="dashboardScrollbar" style='overflow-y: auto'>
<div class="table-list-box">
<div id="dashboardScrollbar" class="box-content" v-loading="chartListLoading" ref="dashboardScrollbar" style='overflow-y: auto'>
<chart-list
ref="chartList"
name="panel"