+
+
+
+
{{$t('dashboard.duplicate')}}
-
-
-
-
-
- {{ scope.row.element.alias?scope.row.element.alias:scope.row.element.element}}
-
-
-
-
- {{ unit.compute(scope.row.value,null,2)}}
-
-
-
+
+
+
+
+ {{ scope.row.element.alias?scope.row.element.alias:scope.row.element.element}}
+
+
+
+
+ {{ unit.compute(scope.row.value,null,2)}}
+
+
+
-
-
-
{{data.title}}
-
-
-
-
-
+
+
+
{{data.title}}
+
+
-
-
-
-
-
-
- {{ scope.row.element.alias?scope.row.element.alias:scope.row.element.element}}
-
-
-
-
- {{ unit.compute(scope.row.value,null,2)}}
-
-
-
-
-
-
+
-
+
+
+
diff --git a/nezha-fronted/src/components/charts/line-chart-block.scss b/nezha-fronted/src/components/charts/line-chart-block.scss
index 56abeb7d0..126881075 100644
--- a/nezha-fronted/src/components/charts/line-chart-block.scss
+++ b/nezha-fronted/src/components/charts/line-chart-block.scss
@@ -150,6 +150,7 @@
.resize-box {
border: 1px solid #d8dce1;
position: absolute;
+ box-sizing: border-box;
width: 100%;
height: 100%;
top: 0;
@@ -163,97 +164,108 @@
.resize-shadow-active {
background-color: #888;
}
-.line-chart-block {
- height: 100%;
- position: relative;
- background-color: white;
- .chartTitle:hover {
- background-color:#d8dce1;
+.resize-box {
+ .pagination {
+ padding-top: 0;
}
- .chartTitle {
- text-align: center;
+ .chart-table {
width: 100%;
- line-height: 28px;
- padding: 0 3px;
- box-sizing: border-box;
- .nz-chart-top{
- width:100%;
- }
- .el-dropdown-link {
- cursor: move;
- }
- .el-icon-arrow-down {
- font-size: 12px;
- }
- .chart-title {
- font-weight: bold;
- font-size: 18px;
- line-height: 26px;
- color: #333;
- display:flex;
- justify-content:center;
- align-items:center;
- .chart-title-text{
- max-width:calc(100% - 20px);
- text-overflow: ellipsis;
- overflow: hidden;
- white-space: nowrap;
- cursor: pointer;
+ .table-container {
+ padding: 0 6px;
+ box-sizing: border-box;
+ .nz-table {
+ margin-top: 6px;
+ box-sizing: border-box;
}
- .chart-title-icon{
- display: inline-block;
- cursor: pointer;
+ }
+ }
+ .line-chart-block, .chart-table {
+ height: 100%;
+ position: relative;
+ background-color: white;
+ .chartTitle:hover {
+ background-color:#d8dce1;
+ }
+ .chartTitle {
+ text-align: center;
+ width: 100%;
+ line-height: 28px;
+ padding: 0 3px;
+ box-sizing: border-box;
+ .nz-chart-top{
+ width:100%;
}
- }
- }
+ .el-dropdown-link {
+ cursor: move;
+ }
+ .el-icon-arrow-down {
+ font-size: 12px;
+ }
+ .chart-title {
+ font-weight: bold;
+ font-size: 18px;
+ line-height: 26px;
+ color: #333;
+ display:flex;
+ justify-content:center;
+ align-items:center;
+ .chart-title-text{
+ max-width:calc(100% - 20px);
+ text-overflow: ellipsis;
+ overflow: hidden;
+ white-space: nowrap;
+ cursor: pointer;
+ }
+ .chart-title-icon{
+ display: inline-block;
+ cursor: pointer;
+ }
+ }
+ }
- .line-area {
- box-sizing: border-box;
- background: #FFF;
- min-height: 95px;
- padding-left:8px;
- padding-right:8px;
- }
- /*.edit:after{
- display: block;
- content: "";
- clear: both;
- }*/
- .button-panel-height{
- height:26px;
- }
- .button-panel-height button{
- height:26px;
- }
- .edit {
- position: absolute;
- right: 20px;
- top: 17px;
- z-index: 10;
+ .line-area {
+ box-sizing: border-box;
+ background: #FFF;
+ min-height: 95px;
+ padding-left:8px;
+ padding-right:8px;
+ }
+ .button-panel-height{
+ height:26px;
+ }
+ .button-panel-height button{
+ height:26px;
+ }
+ .edit {
+ position: absolute;
+ right: 20px;
+ top: 17px;
+ z-index: 10;
- }
- .chart-select {
- position: absolute;
- left: 40px;
- top: 25px;
- z-index: 10;
- font-size: 14px;
- .chart-select-btn {
- margin-right: 10px;
- cursor: pointer;
- &.active {
- color: #5aacff;
+ }
+ .chart-select {
+ position: absolute;
+ left: 40px;
+ top: 25px;
+ z-index: 10;
+ font-size: 14px;
+ .chart-select-btn {
+ margin-right: 10px;
+ cursor: pointer;
+ &.active {
+ color: #5aacff;
+ }
}
}
- }
- /*没有数据显示*/
- .null {
- position: absolute;
- top: 50%;
- width: 100%;
- text-align: center;
- font-size: 24px;
- font-weight: 600;
+ /*没有数据显示*/
+ .null {
+ position: absolute;
+ top: 50%;
+ width: 100%;
+ text-align: center;
+ font-size: 24px;
+ font-weight: 600;
+ }
}
}
.dialog-tool {
diff --git a/nezha-fronted/src/components/charts/line-chart-block.vue b/nezha-fronted/src/components/charts/line-chart-block.vue
index bb1182f71..802d2f54d 100644
--- a/nezha-fronted/src/components/charts/line-chart-block.vue
+++ b/nezha-fronted/src/components/charts/line-chart-block.vue
@@ -4,7 +4,7 @@
-
+
@@ -16,16 +16,16 @@
popper-class="chart-error-popper">
{{errorContent}}
-
-
-
+
+
+
{{data.title}}
-
+
@@ -180,9 +180,6 @@
showLegend:true,
searchTime:[new Date().setHours(new Date().getHours()-1),new Date()],
oldSearchTime:[],
- minHeight:200,
- chartSpaceHeight:2,//top-border: 1,bottom-border: 1,padding-bottome:3
- titleHeight:28,
screenTitleHeight:58
};
},
@@ -366,7 +363,7 @@
_this.$put('panel/'+ _this.panelIdInner+'/charts/modify',modifyParams).then(response => {
if (response.code === 200) {
//更新当前图表数据
- _this.data.span= span;
+ _this.data.span= span;re
_this.data.height= containerHeight+_this.chartSpaceHeight;
_this.$emit('on-drag-chart', _this.data);
}else {
@@ -820,15 +817,15 @@
setTimeout(function () {
let divHeight = self.$refs.legendArea.offsetHeight;
if(!chartInfo.height){
- self.echartStore.resize({height:(400-divHeight-self.titleHeight-self.chartSpaceHeight)});
+ self.echartStore.resize({height:(400-divHeight-self.$chartResizeTool.titleHeight-self.$chartResizeTool.chartBlankHeight)});
}else {
- self.echartStore.resize({height:(chartInfo.height-divHeight-self.titleHeight-self.chartSpaceHeight)});
+ self.echartStore.resize({height:(chartInfo.height-divHeight-self.$chartResizeTool.titleHeight-self.$chartResizeTool.chartBlankHeight)});
}
self.echartStore.clear();
self.echartStore.setOption(option);//创建图表
self.$refs['localLoading'+self.chartIndex].endLoading();
self.firstShow = true; // 展示操作按键
- }, 100)
+ }, 100);
window.addEventListener('resize', function () {
self.echartStore.resize();
@@ -1042,11 +1039,6 @@
*/
}else{
this.legend = legend;
- //设置高度 chart-table
- this.$nextTick(() => {
- let chartBox = document.getElementById('lineChartDiv'+this.chartIndex);
- chartBox.style.height = `${this.$chartResizeTool.calculateHeight(chartItem.height)}px`;
- });
this.$refs['localLoading'+this.chartIndex].startLoading();
this.divFirstShow = true;
this.firstShow = true; // 展示操作按键
@@ -1062,11 +1054,14 @@
this.oldSearchTime[0] = this.searchTime[0];
this.oldSearchTime[1] = this.searchTime[1];
}
- //this.$refs['localLoading'+this.chartIndex].endLoading();
this.initChart(chartItem, seriesItem, this.$refs.lineChartArea, 'local',legend);
}
},
+ resize(chartItem) {
+ let chartBox = document.getElementById('lineChartDiv'+this.chartIndex);
+ chartBox.style.height = `${this.$chartResizeTool.calculateHeight(chartItem.height)}px`;
+ },
clearChart(){
if(this.echartStore){
this.echartStore.clear();
@@ -1359,11 +1354,11 @@
//设置高度
this.$nextTick(() => {
const chartBox = document.getElementById('lineChartDiv'+this.chartIndex);
- let height = Math.round(chartItem.height/10)*10;//图表高度四舍五入
- if(height stepWidth/2) { //放大shadow宽
+ widthChange = true;
+ shadow.style.width = `${shadow.offsetWidth+stepWidth}px`;
+ } else if (width <= 0-(stepWidth/2)) { //缩小shadow宽
+ widthChange = true;
+ shadow.style.width = `${shadow.offsetWidth-stepWidth}px`;
+ }
+ if (widthChange) {
+ shadowNewWidth = shadow.offsetWidth;
+ }
+ if (height > stepHeight/2) { //放大shadow宽
+ heightChange = true;
+ shadow.style.height = `${shadow.offsetHeight+stepHeight}px`;
+ } else if (height <= 0-(stepHeight/2)) { //缩小shadow宽
+ heightChange = true;
+ shadow.style.height = `${shadow.offsetHeight-stepHeight}px`;
+ }
+ if (heightChange) {
+ shadowNewHeight = shadow.offsetHeight;
+ }
+ if (widthChange || heightChange) {
+ //chart重绘
+ if (box.classList.contains("resize-box-echarts")) { //echarts类型
+ vm.echartStore.resize({width: shadow.offsetWidth-16, height: shadow.offsetHeight-titleHeight-vm.$refs.legendArea.offsetHeight});
+ } else if (box.classList.contains("resize-box-table")) { //table类型
+ vm.$nextTick(() => {
+ vm.resize({height: shadow.offsetHeight});
+ });
+ }
+ //chart外层宽高调整
+ let outerBox = document.getElementById(`chart-${data.id}`);
+ outerBox.style.height = `${shadow.offsetHeight}px`;
+ outerBox.style.width = `${shadow.offsetWidth+chartBlankWidth}px`;
+ }
}
}
}