diff --git a/nezha-fronted/src/components/charts/chart-single-stat.vue b/nezha-fronted/src/components/charts/chart-single-stat.vue index 6a896cd01..5679cb2a5 100644 --- a/nezha-fronted/src/components/charts/chart-single-stat.vue +++ b/nezha-fronted/src/components/charts/chart-single-stat.vue @@ -41,7 +41,7 @@
-
+
{{serieSingleStat}}
No Data
@@ -58,7 +58,7 @@
-
+
{{serieSingleStat}}
No Data
@@ -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)); - this.serieSingleStat = chartDataFormat.getUnit(chartItem.unit?chartItem.unit:2).compute(singleStatTmp,null,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); diff --git a/nezha-fronted/src/components/charts/chart.scss b/nezha-fronted/src/components/charts/chart.scss index 2d4569f8b..a2da3f13f 100644 --- a/nezha-fronted/src/components/charts/chart.scss +++ b/nezha-fronted/src/components/charts/chart.scss @@ -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; diff --git a/nezha-fronted/src/components/common/js/tools.js b/nezha-fronted/src/components/common/js/tools.js index b6b288bc6..94415bc3f 100644 --- a/nezha-fronted/src/components/common/js/tools.js +++ b/nezha-fronted/src/components/common/js/tools.js @@ -72,7 +72,9 @@ export const clickoutside = { if (binding.arg) { binding.value(e, binding.arg); } else { - binding.value(e); + if(binding.value){ + binding.value(e); + } } } diff --git a/nezha-fronted/src/components/page/dashboard/chartBox.vue b/nezha-fronted/src/components/page/dashboard/chartBox.vue index 1b22e1f85..66e8c20e2 100644 --- a/nezha-fronted/src/components/page/dashboard/chartBox.vue +++ b/nezha-fronted/src/components/page/dashboard/chartBox.vue @@ -58,279 +58,420 @@ .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; + }