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

style:legend option 样式调整

Browse Source
This commit is contained in:
wangwenrui
2020-09-18 11:04:44 +08:00
parent 52a7bf6ee2
commit af13b0902b
3 changed files with 11 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -41,6 +41,9 @@
.legend-container .option-th:hover{ .legend-container .option-th:hover{
cursor:pointer; cursor:pointer;
} }
.legend-option-cell{
white-space: nowrap;padding: 0px 5px 0px 5px;
}
.nz-icon-warning{ .nz-icon-warning{
color: #e6a23c; color: #e6a23c;
} }

4
nezha-fronted/src/components/charts/chartPreview.vue
View File

@@ -93,7 +93,7 @@
<table style="width: 100%"> <table style="width: 100%">
<th style="max-width: 100%"></th> <th style="max-width: 100%"></th>
<template v-for="legendOption in screenLegendOptions"> <template v-for="legendOption in screenLegendOptions">
<th v-if="legendOption.value == 'on'" class="option-th"> <th v-if="legendOption.value == 'on'" class="option-th legend-option-cell" >
<span @click="legendValueSort(legendOption,screenLegendList,screenLegendOptions)">{{legendOption.option}}</span> <span @click="legendValueSort(legendOption,screenLegendList,screenLegendOptions)">{{legendOption.option}}</span>
<span ><i style="font-size: 12px !important;" :class="{'nz-icon nz-icon-arrow-down':legendOption.sort =='asc','nz-icon nz-icon-arrow-up':legendOption.sort=='desc'}" ></i></span> <span ><i style="font-size: 12px !important;" :class="{'nz-icon nz-icon-arrow-down':legendOption.sort =='asc','nz-icon nz-icon-arrow-up':legendOption.sort=='desc'}" ></i></span>
</th> </th>
@@ -106,7 +106,7 @@
</div> </div>
</td> </td>
<template v-for="legendOption in screenLegendOptions"> <template v-for="legendOption in screenLegendOptions">
<td v-if="legendOption.value == 'on'">{{formatLegendData(item[legendOption.option])}}</td> <td v-if="legendOption.value == 'on'" class="legend-option-cell">{{formatLegendData(item[legendOption.option])}}</td>
</template> </template>
</tr> </tr>
</tbody> </tbody>

12
nezha-fronted/src/components/charts/line-chart-block.vue
View File

@@ -67,9 +67,9 @@
<template v-else> <template v-else>
<div class='legend-container' ref="legendArea" v-show="firstShow" v-scrollBar:legend> <div class='legend-container' ref="legendArea" v-show="firstShow" v-scrollBar:legend>
<table style="width: 100%"> <table style="width: 100%">
<th style="max-width: 100%"></th> <th style="width: 100%"></th>
<template v-for="legendOption in legendOptions"> <template v-for="legendOption in legendOptions">
<th v-if="legendOption.value == 'on'" class="option-th"> <th v-if="legendOption.value == 'on'" class="option-th legend-option-cell" >
<span @click="legendValueSort(legendOption,legendListMore,legendOptions)">{{legendOption.option}}</span> <span @click="legendValueSort(legendOption,legendListMore,legendOptions)">{{legendOption.option}}</span>
<span ><i style="font-size: 12px !important;" :class="{'nz-icon nz-icon-arrow-down':legendOption.sort =='asc','nz-icon nz-icon-arrow-up':legendOption.sort=='desc'}" ></i></span> <span ><i style="font-size: 12px !important;" :class="{'nz-icon nz-icon-arrow-down':legendOption.sort =='asc','nz-icon nz-icon-arrow-up':legendOption.sort=='desc'}" ></i></span>
</th> </th>
@@ -82,7 +82,7 @@
</div> </div>
</td> </td>
<template v-for="legendOption in legendOptions"> <template v-for="legendOption in legendOptions">
<td v-if="legendOption.value == 'on'">{{formatLegendData(item[legendOption.option])}}</td> <td v-if="legendOption.value == 'on'" class="legend-option-cell">{{formatLegendData(item[legendOption.option])}}</td>
</template> </template>
</tr> </tr>
</tbody> </tbody>
@@ -145,9 +145,9 @@
<template v-else> <template v-else>
<div class="legend-container legend-container-screen" :id="'screenLegendArea'+chartIndex" @mouseenter="mouseEnterFullChart" @mouseleave="mouseLeaveFullChart" v-show="showLegend" v-scrollBar:legend> <div class="legend-container legend-container-screen" :id="'screenLegendArea'+chartIndex" @mouseenter="mouseEnterFullChart" @mouseleave="mouseLeaveFullChart" v-show="showLegend" v-scrollBar:legend>
<table style="width: 100%"> <table style="width: 100%">
<th style="max-width: 100%"></th> <th style="width: 100%"></th>
<template v-for="legendOption in screenLegendOptions"> <template v-for="legendOption in screenLegendOptions">
<th v-if="legendOption.value == 'on'" class="option-th"> <th v-if="legendOption.value == 'on'" class="option-th legend-option-cell" >
<span @click="legendValueSort(legendOption,screenLegendListMore,screenLegendOptions)">{{legendOption.option}}</span> <span @click="legendValueSort(legendOption,screenLegendListMore,screenLegendOptions)">{{legendOption.option}}</span>
<span ><i style="font-size: 12px !important;" :class="{'nz-icon nz-icon-arrow-down':legendOption.sort =='asc','nz-icon nz-icon-arrow-up':legendOption.sort=='desc'}" ></i></span> <span ><i style="font-size: 12px !important;" :class="{'nz-icon nz-icon-arrow-down':legendOption.sort =='asc','nz-icon nz-icon-arrow-up':legendOption.sort=='desc'}" ></i></span>
</th> </th>
@@ -160,7 +160,7 @@
</div> </div>
</td> </td>
<template v-for="legendOption in screenLegendOptions"> <template v-for="legendOption in screenLegendOptions">
<td v-if="legendOption.value == 'on'">{{formatLegendData(item[legendOption.option])}}</td> <td v-if="legendOption.value == 'on'" class="legend-option-cell">{{formatLegendData(item[legendOption.option])}}</td>
</template> </template>
</tr> </tr>
</tbody> </tbody>