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

feat：合并dev-3.3-icon内容

Browse Source
This commit is contained in:
18317449825
2022-05-23 09:52:37 +08:00
parent 1b985cf5ab c6b64baaed
commit e8595a6705
33 changed files with 706 additions and 134 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
nezha-fronted/config/index.js
View File

@@ -19,8 +19,8 @@ module.exports = {
} }
}, },
// Various Dev Server settings // Various Dev Server settings
// host: '0.0.0.0', // can be overwritten by process.env.HOST
host: '0.0.0.0', // can be overwritten by process.env.HOST host: '0.0.0.0', // can be overwritten by process.env.HOST
// host: 'localhost', // can be overwritten by process.env.HOST
port: 80, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined port: 80, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
autoOpenBrowser: false, autoOpenBrowser: false,
errorOverlay: true, errorOverlay: true,
@@ -71,5 +71,5 @@ module.exports = {
// `npm run build --report` // `npm run build --report`
// Set to `true` or `false` to always turn it on or off // Set to `true` or `false` to always turn it on or off
bundleAnalyzerReport: process.env.npm_config_report bundleAnalyzerReport: process.env.npm_config_report
}, }
} }

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

@@ -1,23 +1,32 @@
.temp-dropdown{
border: none;
}
.panel-chart { .panel-chart {
border: 1px solid $--chart-box-border-color; border: 1px solid $--chart-box-border-color;
height: 100%; height: 100%;
display: flex; display: flex;
position: relative; position: relative;
flex-direction: column; flex-direction: column;
&:hover .chart-header--float{
background-color: $--chart-title-hover-background-color;
height: 39px !important;
opacity: 1 !important;
}
.chart-header { .chart-header {
&.chart-header--float { &.chart-header--float {
position: absolute; position: absolute;
top: 0;
width: 100%; width: 100%;
z-index: 100; z-index: 500;
box-sizing: border-box; box-sizing: border-box;
height: 10px; height: 0px;
opacity: 0; opacity: 0;
transition: all linear .2s; transition: all linear .3s;
.chart-header__tools {
&:hover { .chart-header__tool .tool__icon {
height: 39px; visibility: visible;
opacity: 1; }
} }
} }
display: flex; display: flex;
@@ -25,15 +34,12 @@
align-items:center; align-items:center;
padding: 0 10px; padding: 0 10px;
height: 39px; height: 39px;
font-size: 14px; font-size: 14px;
line-height: 40px; line-height: 40px;
color: $--color-text-primary; color: $--color-text-primary;
transition: all 0.2s; transition: all 0.2s;
&:hover { &:hover {
background-color: $--chart-title-hover-background-color; background-color: $--chart-title-hover-background-color;
.chart-header__tools { .chart-header__tools {
.chart-header__tool .tool__icon { .chart-header__tool .tool__icon {
visibility: visible; visibility: visible;
@@ -105,20 +111,19 @@
width: 100%; width: 100%;
box-sizing: border-box; box-sizing: border-box;
margin-top: 15px; margin-top: 15px;
&.chart-header--float { // &.chart-header--float {
position: absolute; // position: absolute;
width: 100%; // width: 100%;
z-index: 100; // z-index: 500;
box-sizing: border-box; // box-sizing: border-box;
height: 10px; // height: 10px;
opacity: 0; // opacity: 0;
transition: all linear .2s; // transition: all linear .3s;
// &:hover {
&:hover { // height: 39px;
height: 39px; // opacity: 1;
opacity: 1; // }
} // }
}
.chart-header__title { .chart-header__title {
max-width: calc(100% - 100px); max-width: calc(100% - 100px);
text-overflow: ellipsis; text-overflow: ellipsis;
@@ -535,4 +540,5 @@
font-size: 12px; font-size: 12px;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center;
} }

3
nezha-fronted/src/assets/css/components/common/nezhaColor.scss
View File

@@ -65,7 +65,8 @@
border-radius: 5px; border-radius: 5px;
display: flex; display: flex;
align-items: center; align-items: center;
height: 30px; height: 32px;
box-sizing: border-box;
} }
.color-show .color-text { .color-show .color-text {

115
nezha-fronted/src/assets/css/components/common/rightBox/chartRightBox/chartRightBox.scss
View File

@@ -148,6 +148,40 @@
padding-left: 10px; padding-left: 10px;
box-sizing: border-box; box-sizing: border-box;
} }
.mapping-display-input{
input{
padding-left: 42px;
}
.el-input__prefix{
display: flex;
align-items: center;
left: 10px;
}
}
.mapping-iconSelect {
width: 22px;
height: 22px;
box-sizing: border-box;
border: 1px dotted #fa901c;
border-radius: 2px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
i{
font-size: 12px;
color: #fa901c;
}
}
.mapping-icon{
font-size: 18px;
width: 22px;
height: 22px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
} }
.thresholds-add{ .thresholds-add{
border: 1px solid $--border-color-light; border: 1px solid $--border-color-light;
@@ -156,18 +190,26 @@
margin-bottom: 10px; margin-bottom: 10px;
padding: 3px 10px; padding: 3px 10px;
} }
.prev-mapping-icon{
font-size: 16px;
height: 100%;
display: flex;
align-items: center;
position: absolute;
left: 200px;
}
.prev-mapping-box{ .prev-mapping-box{
border: 1px solid $--border-color-light;
display: inline-block; display: inline-block;
min-width: 18px; min-width: 18px;
height: 25px; height: 30px;
line-height: 25px; line-height: 30px;
border-radius: 5px; border-radius: 5px;
padding: 0 3px; padding: 0 3px;
text-align: center; text-align: center;
position: absolute; position: absolute;
top: 0; top: 0;
left: 200px; left: 230px;
box-sizing: border-box;
} }
.element-item { .element-item {
padding: 0; padding: 0;
@@ -227,10 +269,65 @@
height: 100%; height: 100%;
width: calc(60% - 10px); width: calc(60% - 10px);
} }
//.el-select__tags > span {
// display: flex;
// width: 100%;
// overflow-x: auto;
//}
} }
} }
.mapping-iconPop{
.mapping-iconList{
width: 240px;
height: 130px;
overflow-y: auto;
display: flex;
flex-wrap: wrap;
.mapping-iconItem{
width: 40px;
height: 40px;
border: 1px solid $--button-icon-border-color;
background-color: $--right-box-sub-title-background-color;
border-radius: 2px;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
margin-left: 5px;
margin-top: 5px;
i{
font-size: 18px;
}
&:nth-of-type(5n+1){
margin-left: 0;
}
&:nth-of-type(-n+5){
margin-top: 0;
}
}
.mapping-iconItem:hover{
color: #fa901c;
}
.mapping-iconItem.active{
border-color: #fa901c ;
color: #fa901c;
}
}
}
.choose-header-btn{
width: 32px;
height: 32px;
box-sizing: border-box;
border: 1px solid $--border-color-light;
border-radius: 2px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
color: $--color-text-regular;
.nz-icon-mimakejian{
font-size: 16px;
}
.nz-icon-mimabukejian{
font-size: 18px;
}
}

2
nezha-fronted/src/assets/css/components/page/dashboard/chartBox.scss
View File

@@ -111,7 +111,7 @@
.color-show{ .color-show{
display: inline-block; display: inline-block;
position: relative; position: relative;
top: 1px; top: 0px;
} }
.topology-box{ .topology-box{
width: 100%; width: 100%;

58
nezha-fronted/src/assets/css/font/iconfont.css
View File

@@ -1,8 +1,8 @@
@font-face { @font-face {
font-family: "nz-icon"; /* Project id 2030432 */ font-family: "nz-icon"; /* Project id 2030432 */
src: url('iconfont.woff2?t=1651733602600') format('woff2'), src: url('iconfont.woff2?t=1652772229392') format('woff2'),
url('iconfont.woff?t=1651733602600') format('woff'), url('iconfont.woff?t=1652772229392') format('woff'),
url('iconfont.ttf?t=1651733602600') format('truetype'); url('iconfont.ttf?t=1652772229392') format('truetype');
} }
.nz-icon { .nz-icon {
@@ -13,6 +13,50 @@
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
} }
.nz-icon-mimakejian:before {
content: "\e77a";
}
.nz-icon-mimabukejian:before {
content: "\e77b";
}
.nz-icon-kongtianjiaicon:before {
content: "\e77c";
}
.nz-icon-arrow-down:before {
content: "\e777";
}
.nz-icon-arrow-left:before {
content: "\e778";
}
.nz-icon-arrow-right:before {
content: "\e779";
}
.nz-icon-arrow-up:before {
content: "\e776";
}
.nz-icon-scan:before {
content: "\e774";
}
.nz-icon-shuru:before {
content: "\e772";
}
.nz-icon-Ping:before {
content: "\e773";
}
.nz-icon-Trace:before {
content: "\e775";
}
.nz-icon-queren:before { .nz-icon-queren:before {
content: "\e771"; content: "\e771";
} }
@@ -705,19 +749,19 @@
content: "\e6b6"; content: "\e6b6";
} }
.nz-icon-arrow-up:before { .nz-icon-arrow-up6:before {
content: "\e6af"; content: "\e6af";
} }
.nz-icon-arrow-down:before { .nz-icon-arrow-down6:before {
content: "\e6b0"; content: "\e6b0";
} }
.nz-icon-arrow-right:before { .nz-icon-arrow-right6:before {
content: "\e6ad"; content: "\e6ad";
} }
.nz-icon-arrow-left:before { .nz-icon-arrow-left6:before {
content: "\e6ae"; content: "\e6ae";
} }

2
nezha-fronted/src/assets/css/font/iconfont.js
View File

File diff suppressed because one or more lines are too long

85
nezha-fronted/src/assets/css/font/iconfont.json
View File

@@ -5,6 +5,83 @@
"css_prefix_text": "nz-icon-", "css_prefix_text": "nz-icon-",
"description": "", "description": "",
"glyphs": [ "glyphs": [
{
"icon_id": "29755584",
"name": "密码可见",
"font_class": "mimakejian",
"unicode": "e77a",
"unicode_decimal": 59258
},
{
"icon_id": "29755585",
"name": "密码不可见",
"font_class": "mimabukejian",
"unicode": "e77b",
"unicode_decimal": 59259
},
{
"icon_id": "29755586",
"name": "空添加icon",
"font_class": "kongtianjiaicon",
"unicode": "e77c",
"unicode_decimal": 59260
},
{
"icon_id": "29684748",
"name": "下",
"font_class": "arrow-down",
"unicode": "e777",
"unicode_decimal": 59255
},
{
"icon_id": "29684749",
"name": "左",
"font_class": "arrow-left",
"unicode": "e778",
"unicode_decimal": 59256
},
{
"icon_id": "29684750",
"name": "右",
"font_class": "arrow-right",
"unicode": "e779",
"unicode_decimal": 59257
},
{
"icon_id": "29684477",
"name": "上",
"font_class": "arrow-up",
"unicode": "e776",
"unicode_decimal": 59254
},
{
"icon_id": "29610781",
"name": "scan",
"font_class": "scan",
"unicode": "e774",
"unicode_decimal": 59252
},
{
"icon_id": "29610763",
"name": "输入",
"font_class": "shuru",
"unicode": "e772",
"unicode_decimal": 59250
},
{
"icon_id": "29610764",
"name": "Ping",
"font_class": "Ping",
"unicode": "e773",
"unicode_decimal": 59251
},
{
"icon_id": "29610766",
"name": "Trace",
"font_class": "Trace",
"unicode": "e775",
"unicode_decimal": 59253
},
{ {
"icon_id": "29460715", "icon_id": "29460715",
"name": "确认", "name": "确认",
@@ -1219,28 +1296,28 @@
{ {
"icon_id": "16915855", "icon_id": "16915855",
"name": "上", "name": "上",
"font_class": "arrow-up", "font_class": "arrow-up6",
"unicode": "e6af", "unicode": "e6af",
"unicode_decimal": 59055 "unicode_decimal": 59055
}, },
{ {
"icon_id": "16915856", "icon_id": "16915856",
"name": "下", "name": "下",
"font_class": "arrow-down", "font_class": "arrow-down6",
"unicode": "e6b0", "unicode": "e6b0",
"unicode_decimal": 59056 "unicode_decimal": 59056
}, },
{ {
"icon_id": "16915721", "icon_id": "16915721",
"name": "右", "name": "右",
"font_class": "arrow-right", "font_class": "arrow-right6",
"unicode": "e6ad", "unicode": "e6ad",
"unicode_decimal": 59053 "unicode_decimal": 59053
}, },
{ {
"icon_id": "16915722", "icon_id": "16915722",
"name": "左", "name": "左",
"font_class": "arrow-left", "font_class": "arrow-left6",
"unicode": "e6ae", "unicode": "e6ae",
"unicode_decimal": 59054 "unicode_decimal": 59054
}, },

BIN
nezha-fronted/src/assets/css/font/iconfont.ttf
View File

Binary file not shown.

BIN
nezha-fronted/src/assets/css/font/iconfont.woff
View File

Binary file not shown.

BIN
nezha-fronted/src/assets/css/font/iconfont.woff2
View File

Binary file not shown.

75
nezha-fronted/src/assets/css/nzIcon.css
View File

File diff suppressed because one or more lines are too long

2
nezha-fronted/src/assets/stylus/main.scss
View File

@@ -1157,13 +1157,11 @@ li {
margin-right: 5px; margin-right: 5px;
color: $--color-success; color: $--color-success;
font-size: 14px; font-size: 14px;
background: $--background-color-empty;
} }
.nz-icon-import-failed { .nz-icon-import-failed {
margin-right: 5px; margin-right: 5px;
color: $--color-danger; color: $--color-danger;
font-size: 14px; font-size: 14px;
background: $--background-color-empty;
} }
.result-detail { .result-detail {
opacity: 0.9; opacity: 0.9;

3
nezha-fronted/src/components/chart/ChartScreenHeader.vue
View File

@@ -1,5 +1,6 @@
<template> <template>
<div :class="{'chart-header--float': !chartInfo.param.showHeader}" class="chart-screen-header list-page"> <!-- <div :class="{'chart-header--float': !chartInfo.param.showHeader}" class="chart-screen-header list-page"> -->
<div class="chart-screen-header list-page">
<span v-if="isError" class="chart-header-error"> <span v-if="isError" class="chart-header-error">
<el-popover <el-popover
placement="top-start" placement="top-start"

3
nezha-fronted/src/components/chart/chart.vue
View File

@@ -1,6 +1,7 @@
<template> <template>
<div :style="showHeader&&chartInfo.param.showHeader ? '' : 'padding-top: 15px;'" class="nz-chart" :class="showHeader&&chartInfo.param.showHeader ? '' : 'no-header'" > <!-- <div :style="showHeader&&chartInfo.param.showHeader ? '' : 'padding-top: 15px;'" class="nz-chart" :class="showHeader&&chartInfo.param.showHeader ? '' : 'no-header'" > -->
<div class="nz-chart" :class="chartInfo.param.showHeader===0 ? '' : 'no-header'">
<loading :loading="loading"></loading> <loading :loading="loading"></loading>
<chart-no-data v-if="isNoData || isError || chartChildrenData || (isExportHtml&&(isAutotopology(chartInfo.type) || isDiagram(chartInfo.type) || isMap(chartInfo.type)))"></chart-no-data> <chart-no-data v-if="isNoData || isError || chartChildrenData || (isExportHtml&&(isAutotopology(chartInfo.type) || isDiagram(chartInfo.type) || isMap(chartInfo.type)))"></chart-no-data>
<template v-else> <template v-else>

11
nezha-fronted/src/components/chart/chart/chartBar.vue
View File

@@ -28,7 +28,7 @@ import { formatScientificNotation, getMetricTypeValue } from '@/components/commo
import chartDataFormat from '@/components/chart/chartDataFormat' import chartDataFormat from '@/components/chart/chartDataFormat'
import { initColor } from '@/components/chart/chart/tools' import { initColor } from '@/components/chart/chart/tools'
import lodash from 'lodash' import lodash from 'lodash'
import bus from "@/libs/bus"; import bus from '@/libs/bus'
export default { export default {
name: 'chart-bar', name: 'chart-bar',
@@ -178,8 +178,13 @@ export default {
<div class="tooltip-title" style="max-width: 500px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom: 5px">${params.data.alias}</div> <div class="tooltip-title" style="max-width: 500px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom: 5px">${params.data.alias}</div>
<div style="font-size:12px;display:flex;justify-content: space-between;"> <div style="font-size:12px;display:flex;justify-content: space-between;">
<div>value</div> <div>value</div>
<div style="display: ${params.data.mapping && params.data.mapping.display ? 'none' : 'inline-block'}">${params.data.showValue}</div> <div>
<div style="display: ${params.data.mapping && params.data.mapping.display ? 'inline-block' : 'none'}">${self.handleDisplay(params.data.mapping.display, { ...params.data.labels, value: params.data.showValue })}</div> <div style="display: ${params.data.mapping && params.data.mapping.icon ? 'inline-block' : 'none'}">
<i class="${params.data.mapping && params.data.mapping.icon}" style="color: ${params.data.mapping && params.data.mapping.color && params.data.mapping.color.icon}"></i>
</div>
<div style="display: ${params.data.mapping && params.data.mapping.display ? 'none' : 'inline-block'}">${params.data.showValue}</div>
<div style="display: ${params.data.mapping && params.data.mapping.display ? 'inline-block' : 'none'}">${self.handleDisplay(params.data.mapping.display, { ...params.data.labels, value: params.data.showValue })}</div>
</div>
</div> </div>
</div> </div>
</div> </div>

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

@@ -26,7 +26,6 @@ import { getMetricTypeValue } from '@/components/common/js/tools'
import chartDataFormat from '@/components/chart/chartDataFormat' import chartDataFormat from '@/components/chart/chartDataFormat'
import * as echarts from 'echarts' import * as echarts from 'echarts'
import lodash from 'lodash' import lodash from 'lodash'
import { getChart } from '@/components/common/js/common'
import { initColor } from '@/components/chart/chart/tools' import { initColor } from '@/components/chart/chart/tools'
import { randomcolor } from '@/components/common/js/radomcolor/randomcolor' import { randomcolor } from '@/components/common/js/radomcolor/randomcolor'
@@ -166,7 +165,7 @@ export default {
const chartId = this.isFullscreen ? 'chart-gauge-screen-' : 'chart-gauge-' const chartId = this.isFullscreen ? 'chart-gauge-screen-' : 'chart-gauge-'
const myChart = echarts.init(document.getElementById(chartId + this.chartInfo.id + '-' + index)) const myChart = echarts.init(document.getElementById(chartId + this.chartInfo.id + '-' + index))
const option = lodash.cloneDeep(this.chartOption) const option = lodash.cloneDeep(this.chartOption)
option.tooltip = {} // option.tooltip = {}
option.series[0].data.push(item) option.series[0].data.push(item)
option.series[0].max = item.max option.series[0].max = item.max
option.series[0].detail = { option.series[0].detail = {
@@ -229,8 +228,13 @@ export default {
<div class="tooltip-title" style="max-width: 500px;white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis;margin-bottom: 5px">${params.data.alias}</div> <div class="tooltip-title" style="max-width: 500px;white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis;margin-bottom: 5px">${params.data.alias}</div>
<div style="font-size:12px;display:flex;justify-content: space-between;"> <div style="font-size:12px;display:flex;justify-content: space-between;">
<div>value</div> <div>value</div>
<div style="display: ${params.data.mapping && params.data.mapping.display ? 'none' : 'inline-block'}">${params.data.showValue}</div> <div>
<div style="display: ${params.data.mapping && params.data.mapping.display ? 'inline-block' : 'none'}">${self.handleDisplay(params.data.mapping.display, { ...params.data.labels, value: params.data.showValue })}</div> <div style="display: ${params.data.mapping && params.data.mapping.icon ? 'inline-block' : 'none'}">
<i class="${params.data.mapping && params.data.mapping.icon}" style="color: ${params.data.mapping && params.data.mapping.color && params.data.mapping.color.icon}"></i>
</div>
<div style="display: ${params.data.mapping && params.data.mapping.display ? 'none' : 'inline-block'}">${params.data.showValue}</div>
<div style="display: ${params.data.mapping && params.data.mapping.display ? 'inline-block' : 'none'}">${self.handleDisplay(params.data.mapping.display, { ...params.data.labels, value: params.data.showValue })}</div>
</div>
</div> </div>
</div> </div>
</div> </div>

64
nezha-fronted/src/components/chart/chart/chartHexagonD3.vue
View File

@@ -7,7 +7,12 @@
</div> </div>
<div class="chart-canvas-tooltip-content"> <div class="chart-canvas-tooltip-content">
<div>value</div> <div>value</div>
<div>{{tooltip.value}}</div> <div>
<div v-if="tooltip.mapping && tooltip.mapping.icon" style="display: inline-block">
<i :class="tooltip.mapping.icon" :style="{color: tooltip.mapping.color.icon}"></i>
</div>
<div style="display: inline-block">{{tooltip.value}}</div>
</div>
</div> </div>
</div> </div>
</div> </div>
@@ -15,7 +20,6 @@
<script> <script>
import * as d3 from 'd3' import * as d3 from 'd3'
import { SVG } from '@svgdotjs/svg.js'
import hexbin from '@/components/chart/chart/options/chartHexagonD3' import hexbin from '@/components/chart/chart/options/chartHexagonD3'
import chartMixin from '@/components/chart/chartMixin' import chartMixin from '@/components/chart/chartMixin'
import chartFormat from '@/components/chart/chartFormat' import chartFormat from '@/components/chart/chartFormat'
@@ -38,6 +42,7 @@ export default {
y: 0, y: 0,
title: 0, title: 0,
value: 0, value: 0,
mapping: {},
show: false show: false
}, },
svgDom: null, svgDom: null,
@@ -185,6 +190,7 @@ export default {
hexagonOver (that, e) { // 移入六边形 hexagonOver (that, e) { // 移入六边形
this.tooltip.title = that.alias this.tooltip.title = that.alias
this.tooltip.value = that.showValue this.tooltip.value = that.showValue
this.tooltip.mapping = that.mapping
this.tooltip.show = true this.tooltip.show = true
this.setPosition(e) this.setPosition(e)
}, },
@@ -271,14 +277,31 @@ export default {
const scrollDiv = fObj.append('xhtml:div') const scrollDiv = fObj.append('xhtml:div')
scrollDiv scrollDiv
.html(`<div style="color:${textColor};width:${hexWidth}px;overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 16px;box-sizing: border-box;padding: 0 10px;text-align: center">${str}</div>`) .html(`<div style="color:${textColor};width:${hexWidth}px;overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 16px;box-sizing: border-box;padding: 0 10px;text-align: center">${str}</div>`)
group.append('text') // group.append('text')
.attr('x', vals[0]) // .attr('x', vals[0])
.attr('y', vals[1] + 16) // .attr('y', vals[1] + 16)
.text(valueStr) // .text(valueStr)
// .attr('text-anchor', 'middle')
// .attr('alignment-baseline', 'central')
// .style('font-size', fontSize)
// .style('fill', textColor)
const fObj2 = group.append('foreignObject')
.attr('width', hexWidth || 60)
.attr('height', 24)
fObj2
.attr('x', vals[0] - hexWidth / 2)
.attr('y', vals[1])
// .text(str)
.attr('text-anchor', 'middle') .attr('text-anchor', 'middle')
.attr('alignment-baseline', 'central') .attr('alignment-baseline', 'central')
.style('font-size', fontSize) .style('font-size', fontSize)
.style('fill', textColor) .style('fill', textColor)
const scrollDiv2 = fObj2.append('xhtml:div')
scrollDiv2
.html(
`<div style="color:${textColor};width:${hexWidth}px;overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 16px;box-sizing: border-box;padding: 0 10px;text-align: center">
<i class="${point.mapping && point.mapping.icon}" style="color: ${point.mapping && point.mapping.color && point.mapping.color.icon}"></i> ${valueStr}
</div>`)
return return
} }
if (str) { if (str) {
@@ -295,18 +318,37 @@ export default {
.style('fill', textColor) .style('fill', textColor)
const scrollDiv = fObj.append('xhtml:div') const scrollDiv = fObj.append('xhtml:div')
scrollDiv scrollDiv
.html(`<div style="color:${textColor};width:${hexWidth}px;overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 16px;box-sizing: border-box;padding: 0 10px;text-align: center">${str}</div>`) .html(
`<div style="color:${textColor};width:${hexWidth}px;overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 16px;box-sizing: border-box;padding: 0 10px;text-align: center">
<i class="${point.mapping && point.mapping.icon}" style="color: ${point.mapping && point.mapping.color && point.mapping.color.icon}"></i> ${str}
</div>`)
return return
} }
if (valueStr) { if (valueStr) {
group.append('text') // group.append('text')
.attr('x', vals[0]) // .attr('x', vals[0])
.attr('y', vals[1]) // .attr('y', vals[1])
.text(valueStr) // .text(valueStr)
// .attr('text-anchor', 'middle')
// .attr('alignment-baseline', 'central')
// .style('font-size', fontSize)
// .style('fill', textColor)
const fObj = group.append('foreignObject')
.attr('width', hexWidth || 60)
.attr('height', 24)
fObj
.attr('x', vals[0] - hexWidth / 2)
.attr('y', vals[1] - 10)
.attr('text-anchor', 'middle') .attr('text-anchor', 'middle')
.attr('alignment-baseline', 'central') .attr('alignment-baseline', 'central')
.style('font-size', fontSize) .style('font-size', fontSize)
.style('fill', textColor) .style('fill', textColor)
const scrollDiv = fObj.append('xhtml:div')
scrollDiv
.html(
`<div style="color:${textColor};width:${hexWidth}px;overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 16px;box-sizing: border-box;padding: 0 10px;text-align: center">
<i class="${point.mapping && point.mapping.icon}" style="color: ${point.mapping && point.mapping.color && point.mapping.color.icon}"></i> ${valueStr}
</div>`)
} }
}, },
getCenter (hexaRadius, row, col) { getCenter (hexaRadius, row, col) {

9
nezha-fronted/src/components/chart/chart/chartPie.vue
View File

@@ -143,8 +143,13 @@ export default {
<div class="tooltip-title" style="max-width: 500px;white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis;margin-bottom: 5px">${params.data.alias}</div> <div class="tooltip-title" style="max-width: 500px;white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis;margin-bottom: 5px">${params.data.alias}</div>
<div style="font-size:12px;display:flex;justify-content: space-between;"> <div style="font-size:12px;display:flex;justify-content: space-between;">
<div>value</div> <div>value</div>
<div style="display: ${params.data.mapping && params.data.mapping.display ? 'none' : 'inline-block'}">${params.data.showValue}</div> <div>
<div style="display: ${params.data.mapping && params.data.mapping.display ? 'inline-block' : 'none'}">${self.handleDisplay(params.data.mapping.display, { ...params.data.labels, value: params.data.showValue })}</div> <div style="display: ${params.data.mapping && params.data.mapping.icon ? 'inline-block' : 'none'}">
<i class="${params.data.mapping && params.data.mapping.icon}" style="color: ${params.data.mapping && params.data.mapping.color && params.data.mapping.color.icon}"></i>
</div>
<div style="display: ${params.data.mapping && params.data.mapping.display ? 'none' : 'inline-block'}">${params.data.showValue}</div>
<div style="display: ${params.data.mapping && params.data.mapping.display ? 'inline-block' : 'none'}">${self.handleDisplay(params.data.mapping.display, { ...params.data.labels, value: params.data.showValue })}</div>
</div>
</div> </div>
<div style="font-size:12px;display:flex;justify-content: space-between;"> <div style="font-size:12px;display:flex;justify-content: space-between;">
<div>percent</div> <div>percent</div>

24
nezha-fronted/src/components/chart/chart/chartStat.vue
View File

@@ -16,18 +16,29 @@
> >
<span v-if="chartInfo.param.text==='all'"> <span v-if="chartInfo.param.text==='all'">
<span v-if="item.mapping" :style="{color:item.mapping.color.text}"> <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> {{item.legend}}<br/>
<template v-if="item.mapping && item.mapping.icon">
<i :class="item.mapping.icon" :style="{color: item.mapping.color.icon,fontSize:'1em'}"></i>
</template>
<span>{{handleDisplay(item.mapping.display, { ...item.label, value: item.showValue })}}</span>
</span> </span>
<span v-else>{{item.legend}}<br/><span>{{item.showValue}}</span></span> <span v-else>{{item.legend}}<br/><span>{{item.showValue}}</span></span>
</span> </span>
<span v-if="chartInfo.param.text==='legend'"> <span v-if="chartInfo.param.text==='legend'">
<span v-if="item.mapping" :style="{color:item.mapping.color.text}"> <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> {{item.legend}}<br/>
<template v-if="item.mapping && item.mapping.icon">
<i :class="item.mapping.icon" :style="{color: item.mapping.color.icon,fontSize:'1em'}"></i>
</template>
<span>{{handleDisplay(item.mapping.display, { ...item.label, value: item.showValue })}}</span>
</span> </span>
<span v-else>{{item.legend}}</span> <span v-else>{{item.legend}}</span>
</span> </span>
<span v-if="chartInfo.param.text==='value'|| !chartInfo.param.text"> <span v-if="chartInfo.param.text==='value'|| !chartInfo.param.text">
<span v-if="item.mapping" :style="{color:item.mapping.color.text}"> <span v-if="item.mapping" :style="{color:item.mapping.color.text}">
<template v-if="item.mapping && item.mapping.icon">
<i :class="item.mapping.icon" :style="{color: item.mapping.color.icon,fontSize:'1em'}"></i>
</template>
{{handleDisplay(item.mapping.display, { ...item.label, value: item.showValue })}} {{handleDisplay(item.mapping.display, { ...item.label, value: item.showValue })}}
</span> </span>
<span v-else>{{item.showValue}}</span> <span v-else>{{item.showValue}}</span>
@@ -40,7 +51,12 @@
</div> </div>
<div class="chart-canvas-tooltip-content"> <div class="chart-canvas-tooltip-content">
<div>value</div> <div>value</div>
<div>{{tooltip.value}}</div> <div>
<div v-if="tooltip.mapping && tooltip.mapping.icon" style="display: inline-block">
<i :class="tooltip.mapping.icon" :style="{color: tooltip.mapping.color.icon}"></i>
</div>
<div style="display: inline-block">{{tooltip.value}}</div>
</div>
</div> </div>
</div> </div>
</div> </div>
@@ -70,6 +86,7 @@ export default {
y: 0, y: 0,
title: 0, title: 0,
value: 0, value: 0,
mapping: {},
show: false show: false
}, },
fontSize: 12, fontSize: 12,
@@ -149,6 +166,7 @@ export default {
statMouseEnter (that) { statMouseEnter (that) {
this.tooltip.title = that.legend this.tooltip.title = that.legend
this.tooltip.value = that.showValue this.tooltip.value = that.showValue
this.tooltip.mapping = that.mapping
this.tooltip.show = true this.tooltip.show = true
}, },
statMouseleave (taht) { statMouseleave (taht) {

5
nezha-fronted/src/components/chart/chart/chartTable.vue
View File

@@ -1,5 +1,5 @@
<template> <template>
<div class="nz-table2" style="height: 100%;padding: 0 10px 10px 10px;box-sizing: border-box"> <div class="nz-table2" style="height: 100%;padding: 10px;box-sizing: border-box">
<el-table <el-table
ref="dataTable" ref="dataTable"
class="chart-table" class="chart-table"
@@ -30,6 +30,9 @@
}" }"
class="value-mapping-table" class="value-mapping-table"
> >
<template v-if="scope.row.valueMapping && scope.row.valueMapping[col.title + 'mapping']">
<i :class="scope.row.valueMapping[col.title + 'mapping'].icon" :style="{color: scope.row.valueMapping[col.title + 'mapping'].color.icon}"></i>
</template>
{{showValueMapping(scope.row,col.title)}} {{showValueMapping(scope.row,col.title)}}
</div> </div>
<div class="value-mapping-table" v-else> <div class="value-mapping-table" v-else>

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

@@ -150,9 +150,14 @@ export default {
<div class="tooltip-title" style="max-width: 500px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom: 5px">${params.data.alias}</div> <div class="tooltip-title" style="max-width: 500px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom: 5px">${params.data.alias}</div>
<div style="font-size:12px;display:flex;justify-content: space-between;"> <div style="font-size:12px;display:flex;justify-content: space-between;">
<div>value</div> <div>value</div>
<div style="display: ${(params.data.mapping && params.data.mapping.display) ? 'none' : 'inline-block'}">${params.data.showValue}</div> <div>
<div style="display: ${(params.data.mapping && params.data.mapping.display) ? 'inline-block' : 'none'}"> <div style="display: ${params.data.mapping && params.data.mapping.icon ? 'inline-block' : 'none'}">
${(params.data.mapping && params.data.mapping.display) ? self.handleDisplay(params.data.mapping.display, { ...params.data.labels, value: params.data.showValue }) : ''} <i class="${params.data.mapping && params.data.mapping.icon}" style="color: ${params.data.mapping && params.data.mapping.color && params.data.mapping.color.icon}"></i>
</div>
<div style="display: ${(params.data.mapping && params.data.mapping.display) ? 'none' : 'inline-block'}">${params.data.showValue}</div>
<div style="display: ${(params.data.mapping && params.data.mapping.display) ? 'inline-block' : 'none'}">
${(params.data.mapping && params.data.mapping.display) ? self.handleDisplay(params.data.mapping.display, { ...params.data.labels, value: params.data.showValue }) : ''}
</div>
</div> </div>
</div> </div>
</div> </div>

16
nezha-fronted/src/components/chart/chart/options/chartGauge.js
View File

@@ -21,14 +21,14 @@ const chartGaugeOption = {
show: true, show: true,
width: 30 width: 30
}, },
tooltip: { // tooltip: {
trigger: 'axis', // trigger: 'axis',
confine: false, // confine: false,
extraCssText: 'z-index:1000;', // extraCssText: 'z-index:1000;',
z: 9, // z: 9,
animation: false, // animation: false,
appendToBody: true // appendToBody: true
}, // },
pointer: { pointer: {
show: false show: false
}, },

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

@@ -43,10 +43,6 @@ export function getOption (type) {
chartOption = lodash.cloneDeep(chartTreemapOption) chartOption = lodash.cloneDeep(chartTreemapOption)
break break
} }
case chartType.gauge: {
chartOption = lodash.cloneDeep(chartGaugeOption)
break
}
case chartType.clock: { case chartType.clock: {
chartOption = lodash.cloneDeep(chartClockOption) chartOption = lodash.cloneDeep(chartClockOption)
break break

5
nezha-fronted/src/components/chart/chartHeader.vue
View File

@@ -1,5 +1,6 @@
<template> <template>
<div :class="{'chart-header--float': !chartInfo.param.showHeader}" class="chart-header"> <!-- <div :class="{'chart-header--float': !chartInfo.param.showHeader}" class="chart-header"> -->
<div :class="{'chart-header--float': chartInfo.param.showHeader===0}" class="chart-header">
<span v-if="isError" class="chart-header-error"> <span v-if="isError" class="chart-header-error">
<el-popover <el-popover
placement="top-start" placement="top-start"
@@ -59,7 +60,7 @@
<span class="chart-header__tool"> <span class="chart-header__tool">
<el-dropdown v-clickoutside="clickos" v-has="['main_edit','main_delete','main_add']" trigger="click"> <el-dropdown v-clickoutside="clickos" v-has="['main_edit','main_delete','main_add']" trigger="click">
<i class="el-icon-more tool__icon" @click.stop="dropdownMenuShow = !dropdownMenuShow"></i> <i class="el-icon-more tool__icon" @click.stop="dropdownMenuShow = !dropdownMenuShow"></i>
<el-dropdown-menu style="display: none"></el-dropdown-menu> <el-dropdown-menu style="display: none" class="temp-dropdown"></el-dropdown-menu>
<ul v-show="dropdownMenuShow" slot="dropdown" class="el-dropdown-menu nz-chart-dropdown"> <ul v-show="dropdownMenuShow" slot="dropdown" class="el-dropdown-menu nz-chart-dropdown">
<li class="el-dropdown-menu__item" v-has="'main_edit'" @click="editChart"> <li class="el-dropdown-menu__item" v-has="'main_edit'" @click="editChart">
<i class="nz-icon nz-icon-edit" style="font-size: 16px;"></i> <i class="nz-icon nz-icon-edit" style="font-size: 16px;"></i>

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

@@ -463,7 +463,7 @@ export default {
// console.info(e) // console.info(e)
// } // }
height = (item.type === 'group' && item.param.collapse) ? this.headerH : item.height height = (item.type === 'group' && item.param.collapse) ? this.headerH : item.height
param.showHeader = true // param.showHeader = true
if (param.valueMapping) { if (param.valueMapping) {
param.valueMapping.forEach(valueMapping => { param.valueMapping.forEach(valueMapping => {
if (!valueMapping.show) { if (!valueMapping.show) {

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

@@ -428,7 +428,7 @@ export default {
case 'metrics': case 'metrics':
case 'logs': { case 'logs': {
this.chartData = [] this.chartData = []
elements.forEach((element,index) => { elements.forEach((element, index) => {
this.chartData.push(this.dataJson[this.chartInfo.id + '_' + index].data.result) this.chartData.push(this.dataJson[this.chartInfo.id + '_' + index].data.result)
}) })
break break

7
nezha-fronted/src/components/common/nezhaColor.vue
View File

@@ -27,7 +27,7 @@
</template> </template>
<script> <script>
import { randomcolor } from '@/components/common/js/radomcolor/randomcolor'
import { Sketch } from 'vue-color' import { Sketch } from 'vue-color'
export default { export default {
name: 'nezhaColor', name: 'nezhaColor',
@@ -91,8 +91,9 @@ export default {
} }
}, },
mounted () { mounted () {
this.colors = this.valueArr[0].value
this.keyName = this.valueArr[0].name this.keyName = this.valueArr[0].name
this.colors = this.valueArr[0].value || randomcolor() + 'FF'
this.$emit('colorChange', this.colors, this.keyName)
}, },
methods: { methods: {
updateValue (color) { updateValue (color) {
@@ -134,7 +135,7 @@ export default {
}, },
colorTabChange (item) { colorTabChange (item) {
this.keyName = item.name this.keyName = item.name
this.colors = this.colorVal[item.name] this.colors = this.colorVal[item.name] || randomcolor() + 'FF'
}, },
exitColor () { exitColor () {
this.showColorPicker = false this.showColorPicker = false

33
nezha-fronted/src/components/common/rightBox/chart/chartConfig.vue
View File

@@ -560,6 +560,9 @@
<span v-if="item.type === 'regx'"> <span v-if="item.type === 'regx'">
{{item.regx}} {{item.regx}}
</span> </span>
<div class="prev-mapping-icon">
<i :class="item.icon" :style="{ color: item.color.icon }"></i>
</div>
<div :style="{background:item.color.bac}" class="prev-mapping-box"> <div :style="{background:item.color.bac}" class="prev-mapping-box">
<span :style="{color:item.color.text}"> <span :style="{color:item.color.text}">
{{item.display || "T"}} {{item.display || "T"}}
@@ -666,9 +669,35 @@
<div class='mapping-display'>{{$t('dashboard.panel.chartForm.display')}}</div> <div class='mapping-display'>{{$t('dashboard.panel.chartForm.display')}}</div>
</div> </div>
<el-form-item :prop="'param.valueMapping.' + index + '.display'" :rules="{ required: true, message: $t('validate.required'), trigger: 'blur'}" class="thresholds-from-item"> <el-form-item :prop="'param.valueMapping.' + index + '.display'" :rules="{ required: true, message: $t('validate.required'), trigger: 'blur'}" class="thresholds-from-item">
<el-input v-model="item.display" style="margin-right: 10px" :placeholder="$t('placeholder.chart.display')" size="small" @change="change('valueMapping', index)"/> <el-input v-model="item.display" style="margin-right: 10px" :placeholder="$t('placeholder.chart.display')" size="small" @change="change('valueMapping', index)" class="mapping-display-input">
<el-popover
slot="prefix"
placement="top-start"
trigger="manual"
popper-class="mapping-iconPop no-style-class"
v-clickoutside="()=>{closeChoose(index)}"
v-model="isChoose[index]"
>
<ul class="mapping-iconList">
<li class="mapping-iconItem" :class="{active:item.icon===subItem.value}" v-for="subItem in mappingIconList" @click="iconActive(item,subItem,index)" :key="subItem.value">
<i :class="subItem.value"></i>
</li>
</ul>
<div slot="reference" @click="chooseIcon(isChoose[index],index)">
<i v-if="item.icon" class="mapping-icon" :class="item.icon" :style="{ color: item.color.icon }"></i>
<div v-else class="mapping-iconSelect">
<i class="nz-icon nz-icon-create-square"></i>
</div>
</div>
</el-popover>
</el-input>
</el-form-item> </el-form-item>
<nezhaColor :color-val="item.color" :single="false" :value-arr="[{name:'bac',value:item.color.bac,key:'bac'},{name:'text',value:item.color.text,key:'text'}]" @colorChange="(val,key)=>{colorChange(val, key, index)}"/> <nezhaColor
:color-val="item.color"
:single="false"
:value-arr="[{name:'icon',value:item.color.icon,key:'icon'},{name:'bac',value:item.color.bac,key:'bac'},{name:'text',value:item.color.text,key:'text'}]"
@colorChange="(val,key)=>{colorChange(val, key, index)}"
/>
</el-row> </el-row>
</transition-group> </transition-group>
</div> </div>

30
nezha-fronted/src/components/common/rightBox/chart/chartRightBox.vue
View File

@@ -16,7 +16,17 @@
<div class="right-box-form-box right-box__container chart-right-box"> <div class="right-box-form-box right-box__container chart-right-box">
<el-form ref="chartForm" :model="editChart" :rules="rules" label-position= "top" label-width="120px"> <el-form ref="chartForm" :model="editChart" :rules="rules" label-position= "top" label-width="120px">
<el-form-item :label='$t("dashboard.panel.chartForm.name")' prop="name"> <el-form-item :label='$t("dashboard.panel.chartForm.name")' prop="name">
<el-input maxlength="64" show-word-limit size="small" v-model="editChart.name" id="chart-box-title"></el-input> <div style="display:flex;align-items:center">
<el-input style="flex:1;margin-right:10px" maxlength="64" show-word-limit size="small" v-model="editChart.name" id="chart-box-title"></el-input>
<!-- 显示头部 -->
<div class="choose-header-btn" v-if="editChart.param&&editChart.param.showHeader!==0" @click="switchHeader(0)">
<i class="nz-icon nz-icon-mimakejian"></i>
</div>
<!-- 隐藏头部 -->
<div class="choose-header-btn" v-else @click="switchHeader(1)">
<i class="nz-icon nz-icon-mimabukejian"></i>
</div>
</div>
</el-form-item> </el-form-item>
<div class="form-items--half-width-group"> <div class="form-items--half-width-group">
@@ -196,6 +206,12 @@ export default {
} }
}, },
methods: { methods: {
switchHeader (value) {
// 1为显示 0为隐藏
this.$set(this.editChart.param, 'showHeader', value)
},
clickOutside () { clickOutside () {
this.esc(false) this.esc(false)
}, },
@@ -356,7 +372,8 @@ export default {
legend: true, legend: true,
valueMapping: false valueMapping: false
}, },
thresholds: [{ value: undefined, color: '#eeeeeeff' }] thresholds: [{ value: undefined, color: '#eeeeeeff' }],
showHeader: this.editChart.param.showHeader
} }
} }
} }
@@ -374,7 +391,8 @@ export default {
}, },
elements: [{ expression: '', legend: '', type: 'expert', id: '', name: 'A' }], elements: [{ expression: '', legend: '', type: 'expert', id: '', name: 'A' }],
param: { param: {
limit: 100 limit: 100,
showHeader: this.editChart.param.showHeader
} }
} }
} }
@@ -409,7 +427,8 @@ export default {
legend: '' legend: ''
} }
], ],
valueMapping: [] valueMapping: [],
showHeader: this.editChart.param.showHeader
} }
} }
delete this.editChart.elements delete this.editChart.elements
@@ -426,7 +445,8 @@ export default {
valueMapping: false valueMapping: false
}, },
param: { param: {
url: '' url: '',
showHeader: this.editChart.param.showHeader
} }
} }
delete this.editChart.elements delete this.editChart.elements

150
nezha-fronted/src/components/common/rightBox/chart/publicConfig.js
View File

@@ -58,6 +58,127 @@ export default {
value: 'regx' value: 'regx'
} }
], ],
mappingIconList: [
{
value: undefined
}, {
value: 'nz-icon nz-icon-Router'
}, {
value: 'nz-icon nz-icon-Computer'
}, {
value: 'nz-icon nz-icon-a-Networkdevices'
}, {
value: 'nz-icon nz-icon-Other'
}, {
value: 'nz-icon nz-icon-a-Virtualmachine'
}, {
value: 'nz-icon nz-icon-Switch'
}, {
value: 'nz-icon nz-icon-Server'
}, {
value: 'nz-icon nz-icon-ADC'
}, {
value: 'nz-icon nz-icon-Firewall'
}, {
value: 'nz-icon nz-icon-guide'
}, {
value: 'nz-icon nz-icon-Silence'
}, {
value: 'nz-icon nz-icon-fast-silence'
}, {
value: 'nz-icon nz-icon-mute'
}, {
value: 'nz-icon nz-icon-overview-alert'
}, {
value: 'nz-icon nz-icon-overview-endpoint'
}, {
value: 'nz-icon nz-icon-Alertrule'
}, {
value: 'nz-icon nz-icon-import-success1'
}, {
value: 'nz-icon nz-icon-import-failed1'
}, {
value: 'nz-icon nz-icon-stop'
}, {
value: 'nz-icon nz-icon-failed'
}, {
value: 'nz-icon nz-icon-unknown-error'
}, {
value: 'nz-icon nz-icon-role1'
}, {
value: 'nz-icon nz-icon-Cabinet1'
}, {
value: 'nz-icon nz-icon-user1'
}, {
value: 'nz-icon nz-icon-Datacenter2'
}, {
value: 'nz-icon nz-icon-overview-project'
}, {
value: 'nz-icon nz-icon-project'
}, {
value: 'nz-icon nz-icon-overview-module'
}, {
value: 'el-icon-share'
}, {
value: 'el-icon-d-caret'
}, {
value: 'el-icon-caret-left'
}, {
value: 'el-icon-caret-right'
}, {
value: 'el-icon-caret-bottom'
}, {
value: 'el-icon-caret-top'
}, {
value: 'el-icon-bottom-left'
}, {
value: 'el-icon-bottom-right'
}, {
value: 'el-icon-back'
}, {
value: 'el-icon-right'
}, {
value: 'el-icon-bottom'
}, {
value: 'el-icon-top'
}, {
value: 'el-icon-top-left'
}, {
value: 'el-icon-top-right'
}, {
value: 'el-icon-arrow-left'
}, {
value: 'el-icon-arrow-right'
}, {
value: 'el-icon-arrow-down'
}, {
value: 'el-icon-arrow-up'
}, {
value: 'el-icon-d-arrow-left'
}, {
value: 'el-icon-d-arrow-right'
}, {
value: 'el-icon-video-pause'
}, {
value: 'el-icon-video-play'
}, {
value: 'el-icon-refresh'
}, {
value: 'el-icon-refresh-right'
}, {
value: 'el-icon-refresh-left'
}, {
value: 'el-icon-finished'
}, {
value: 'el-icon-sort'
}, {
value: 'el-icon-sort-up'
}, {
value: 'el-icon-sort-down'
}, {
value: 'el-icon-rank'
}
], // 获取icon列表
letter: [ letter: [
'A', 'B', 'C', 'D', 'E', 'F', 'G', 'A', 'B', 'C', 'D', 'E', 'F', 'G',
'H', 'I', 'J', 'K', 'L', 'M', 'N', 'H', 'I', 'J', 'K', 'L', 'M', 'N',
@@ -178,12 +299,32 @@ export default {
value: 'server', value: 'server',
label: this.$t('dashboard.panel.chartForm.typeVal.server') label: this.$t('dashboard.panel.chartForm.typeVal.server')
} }
] ],
isChoose: []
} }
}, },
mixins: [rz], mixins: [rz],
methods: { methods: {
isStat, isStat,
// 隐藏icon列表
closeChoose (index) {
this.$set(this.isChoose, index, false)
},
// 显示icon列表
chooseIcon (value, index) {
this.$set(this.isChoose, index, !value)
},
// icon点击
iconActive (item, subItem, index) {
if (item.icon === subItem.value) {
this.chartConfig.param.valueMapping[index].icon = undefined
this.$set(this.chartConfig.param.valueMapping, index, this.chartConfig.param.valueMapping[index])
} else {
this.chartConfig.param.valueMapping[index].icon = subItem.value
this.$set(this.chartConfig.param.valueMapping, index, this.chartConfig.param.valueMapping[index])
}
this.change()
},
expressionChange: function () { expressionChange: function () {
if (this.expressions.length) { if (this.expressions.length) {
this.chartConfig.elements = [] this.chartConfig.elements = []
@@ -327,7 +468,8 @@ export default {
display: '', display: '',
color: { color: {
bac: bacColor + 'FF', bac: bacColor + 'FF',
text: ColorReverse(bacColor) + 'FF' text: ColorReverse(bacColor) + 'FF',
icon: randomcolor() + 'FF'
} }
} }
if (this.chartConfig.type === 'table') { if (this.chartConfig.type === 'table') {
@@ -388,6 +530,10 @@ export default {
this.chartConfig.param.valueMapping[index].color.text = val this.chartConfig.param.valueMapping[index].color.text = val
this.$set(this.chartConfig.param.valueMapping, index, this.chartConfig.param.valueMapping[index]) this.$set(this.chartConfig.param.valueMapping, index, this.chartConfig.param.valueMapping[index])
} }
if (key === 'icon') {
this.chartConfig.param.valueMapping[index].color.icon = val
this.$set(this.chartConfig.param.valueMapping, index, this.chartConfig.param.valueMapping[index])
}
this.change() this.change()
}, },
change (key, index) { change (key, index) {

44
nezha-fronted/src/components/common/rightBox/chart/systemChartConfig.vue
View File

@@ -522,11 +522,14 @@
<span v-if="item.type === 'regx'"> <span v-if="item.type === 'regx'">
{{item.regx}} {{item.regx}}
</span> </span>
<div :style="{background:item.color.bac}" class="prev-mapping-box"> <div class="prev-mapping-icon">
<span :style="{color:item.color.text}"> <i :class="item.icon" :style="{ color: item.color.icon }"></i>
{{item.display || "T"}} </div>
</span> <div :style="{background:item.color.bac}" class="prev-mapping-box">
</div> <span :style="{color:item.color.text}">
{{item.display || "T"}}
</span>
</div>
</span> </span>
</span> </span>
<span> <span>
@@ -628,9 +631,36 @@
<div class='mapping-display'>{{$t('dashboard.panel.chartForm.display')}}</div> <div class='mapping-display'>{{$t('dashboard.panel.chartForm.display')}}</div>
</div> </div>
<el-form-item :prop="'param.valueMapping.' + index + '.display'" :rules="{ required: true, message: $t('validate.required'), trigger: 'blur'}" class="thresholds-from-item"> <el-form-item :prop="'param.valueMapping.' + index + '.display'" :rules="{ required: true, message: $t('validate.required'), trigger: 'blur'}" class="thresholds-from-item">
<el-input v-model="item.display" style="margin-right: 10px" :placeholder="$t('placeholder.chart.display')" size="small" @change="change('valueMapping', index)"/> <el-input v-model="item.display" style="margin-right: 10px" :placeholder="$t('placeholder.chart.display')" size="small" @change="change('valueMapping', index)" class="mapping-display-input">
<el-popover
slot="prefix"
placement="top-start"
trigger="manual"
popper-class="mapping-iconPop no-style-class"
v-clickoutside="()=>{closeChoose(index)}"
v-model="isChoose[index]"
>
<ul class="mapping-iconList">
<li class="mapping-iconItem" :class="{active:item.icon===subItem.value}" v-for="subItem in mappingIconList" @click="iconActive(item,subItem,index)" :key="subItem.value">
<i :class="subItem.value"></i>
</li>
</ul>
<div slot="reference" @click="chooseIcon(isChoose[index],index)">
<i v-if="item.icon" class="mapping-icon" :class="item.icon" :style="{ color: item.color.icon }"></i>
<div v-else class="mapping-iconSelect">
<i class="nz-icon nz-icon-create-square"></i>
</div>
</div>
</el-popover>
</el-input>
</el-form-item> </el-form-item>
<nezhaColor :color-val="item.color" :single="false" :value-arr="[{name:'bac',value:item.color.bac,key:'bac'},{name:'text',value:item.color.text,key:'text'}]" @colorChange="(val,key)=>{colorChange(val, key, index)}"/> <nezhaColor
:color-val="item.color"
:single="false"
:value-arr="[{name:'icon',value:item.color.icon,key:'icon'},{name:'bac',value:item.color.bac,key:'bac'},{name:'text',value:item.color.text,key:'text'}]"
@colorChange="(val,key)=>{colorChange(val, key, index)}"
style="margin-right:1px"
/>
</el-row> </el-row>
</transition-group> </transition-group>
</div> </div>

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

@@ -208,7 +208,8 @@ export default {
thresholds: false thresholds: false
}, },
thresholdShow: true, thresholdShow: true,
thresholds: [{ value: undefined, color: randomcolor() }] thresholds: [{ value: undefined, color: randomcolor() }],
showHeader: 1
}, },
elements: [{ expression: '', legend: '', type: 'expert', id: '', name: 'A' }], elements: [{ expression: '', legend: '', type: 'expert', id: '', name: 'A' }],
panel: '', panel: '',