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

NEZ-290 feat: panel-alertList样式调整、resize实现

Browse Source
This commit is contained in:
chenjinsong
2020-06-01 20:47:36 +08:00
parent cde04a6a68
commit b4d38263e4
7 changed files with 445 additions and 463 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -726,7 +726,7 @@ li{
.nz-table .el-table__virtual-wrapper {
width: 100% !important;
}
.chart-table .nz-table td {
.chart-table .nz-table td, .chart-alert-info .nz-table td {
background-color: white;
}
.nz-table td {

70
nezha-fronted/src/components/charts/chart-alert-list.vue
View File

@@ -1,22 +1,12 @@
<style lang="scss">
@import './chart.scss';
</style>
<style>
.max-width-90{
max-width: 90px;
}
@import './chart.scss';
</style>
<template>
<div class="chart-table" :id="'chartTableDiv'+chartIndex" v-show="divFirstShow" @mouseenter="caretShow=true" @mouseleave="caretShow=false" :style="{'border':isPreview?'unset':'1px solid #d8dce1','height':isPreview?'92%':'100%'}">
<div class="nz-chart-resize">
<div class="resize-shadow" ref="resizeShadow"></div>
<div class="resize-box resize-box-alert" ref="resizeBox">
<div class="chart-alert-info" :id="'chartTableDiv'+chartIndex" v-show="divFirstShow" @mouseenter="caretShow=true" @mouseleave="caretShow=false">
<loading :ref="'localLoading'+chartIndex"></loading>
<!--
<div v-show="showLoading" class="el-loading-mask" style="background-color: rgba(0, 0, 0, 0);">
<div class="el-loading-spinner">
<img width="42px" height="42px" src="../../assets/img/loading.gif"/>
<p class="el-loading-text loading-font">loading</p>
</div>
</div>
-->
<div class="clearfix chartTitle" :class="{'dragTitle':dragTitleShow}" :id="'chartTitle'+chartIndex">
<el-popover
v-if="isError"
@@ -25,7 +15,7 @@
trigger="hover"
popper-class="chart-error-popper">
<div >{{errorContent}}</div>
<span slot="reference" style="" class="panel-info-corner panel-info-corner--error">
<span slot="reference" class="panel-info-corner panel-info-corner--error">
<i class="nz-icon nz-icon-warning fa"></i>
<span class="panel-info-corner-inner"></span>
</span>
@@ -49,7 +39,6 @@
<i class="el-icon-copy-document" style="font-size: 16px;"></i>{{$t('dashboard.duplicate')}}</li>
</ul>
</el-dropdown>
</div>
<div class="mt-10 table-container" v-cloak v-show="firstShow || isPreview">
<transition name="el-zoom-in-bottom">
@@ -60,9 +49,9 @@
<el-table
:id="'tableContainer'+chartIndex"
class="nz-table"
:height="290"
:data="storedTableData"
border
:height="tableHeight"
ref="alertListTable"
tooltip-effect="light"
v-scrollBar:el-table="'large'"
@@ -247,7 +236,6 @@
</el-table>
<Pagination :pageObj="screenPageObj" @pageNo='screenPageNo' @pageSize='screenPageSize' ref="Pagination" ></Pagination>
<loading :ref="'localLoadingScreen'+chartIndex"></loading>
</el-dialog>
<div class="export-xlsx">
<el-dialog :visible.sync="deleteBox.show" :title="$t('overall.delete')" :modal-append-to-body='false' :show-close="true" width="300px" @close="closeDialog" class="nz-message">
@@ -279,7 +267,6 @@
</div>
<chart ref="messageChart" name="alertMessageChart" :unit="chartUnit"></chart>
</el-dialog>
<span class="vue-resizable-handle" @mousedown="dragResize" v-if="!isPreview"></span>
<element-set
path="/alertList"
:table-title="tableTitle"
@@ -288,6 +275,9 @@
ref="elementset"
></element-set>
</div>
<span class="vue-resizable-handle" @mousedown="startResize" v-if="!isPreview"></span>
</div>
</div>
</template>
<script>
@@ -323,12 +313,11 @@ export default {
type: Number,
default: 0,
},
chartInfo:{
}
chartInfo:{}
},
data() {
return {
tableHeight: 0,
data: {}, // 该图表信息,chartItem
unit:{},
isError:false,
@@ -461,8 +450,6 @@ export default {
isPreview:false,
};
},
created() {
},
computed: {
tagType() {
return (key) => {
@@ -498,6 +485,10 @@ export default {
}
},
methods: {
startResize(e) {
let vm = this;
this.$chartResizeTool.start(vm, this.data, e);
},
labelsClassName(row) {
if (row.column.label == this.$t("alert.list.labels")) {
return "alert-message-list-labels";
@@ -636,6 +627,7 @@ export default {
}
},
getAlertList: function (filterType,isPreview=false) {
this.resize();
this.isPreview = isPreview;
let queryParam={
pageSize:this.pageObj.pageSize,
@@ -944,31 +936,23 @@ export default {
this.$refs['localLoading'+this.chartIndex].endLoading();
}
},
clearData(){
resize(chartItem) {
let deHeight = this.$chartResizeTool.titleHeight+this.$chartResizeTool.chartTableBlankHeight;
let container = document.querySelector('#chartTableDiv' + this.chartIndex + " .table-container");
container.style.height = `calc(100% - ${deHeight}px)`;
this.tableHeight = `calc(100% - 34px)`;
this.$nextTick(() => {
container.querySelector(".el-table__body-wrapper")._ps_.update();
});
},
showLoad(chartItem) {
//设置高度 chart-table
this.$nextTick(() => {
const chartBox = document.getElementById('chartTableDiv'+this.chartIndex);
let height = Math.round(chartItem.height/10)*10;//图表高度四舍五入
if(height<this.minHeight){
height = this.minHeight;
}
chartBox.style.height = `${height-this.chartSpaceHeight}px`;
const tableBox = document.getElementById('tableContainer'+this.chartIndex);
//tableBox.style.height = `${height-75-32}px`;
tableBox.style.height = `${height-this.chartSpaceHeight-this.titleHeight-this.pageHeight}px`;// -75-32
this.resize(chartItem);
});
this.startLoading();
this.divFirstShow = true;
//this.tableLoading = true;
},
// 展示图表编辑区
/*
showTool() {
this.toolbox = !this.toolbox;
},
*/
// 重新请求数据 刷新操作-local
refreshChart() {
this.dropdownMenuShow=false;
@@ -1045,7 +1029,7 @@ export default {
},
// 设置数据, filter区分
setData(chartItem, seriesItem, panelId, filter,area,errorMsg) {
console.info(chartItem,title)
},
},

2
nezha-fronted/src/components/charts/chart-asset-info.vue
View File

@@ -14,7 +14,7 @@
placement="top-start"
trigger="hover"
popper-class="chart-error-popper">
<div >{{errorContent}}</div>
<div>{{errorContent}}</div>
<span slot="reference" class="panel-info-corner panel-info-corner--error">
<i class="nz-icon nz-icon-warning fa"></i>
<span class="panel-info-corner-inner"></span>

1
nezha-fronted/src/components/charts/chart-list.vue
View File

@@ -110,6 +110,7 @@
<chart-alert-list :ref="'editChart'+item.id"
:panel-id="filter.panelId"
:chart-index="index"
v-if="item.type === 'alertList'"
:editChartId="'editChartId' + item.id"
:chart-info="item"
@on-refresh-data="refreshChart"

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

@@ -173,7 +173,7 @@
.pagination {
padding-top: 0;
}
.chart-table {
.chart-table, .chart-alert-info {
width: 100%;
.table-container {
padding: 0 6px;
@@ -268,6 +268,9 @@
min-height: 26px;
line-height: 26px;
}
.el-table__body {
background-color: white;
}
.el-table__body tr:last-of-type td {
border: none;
}
@@ -287,7 +290,7 @@
}
}
}
.line-chart-block, .chart-table, .chart-single-stat, .chart-url, .chart-asset-info {
.line-chart-block, .chart-table, .chart-single-stat, .chart-url, .chart-asset-info, .chart-alert-info {
height: 100%;
position: relative;
background-color: white;

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

@@ -15,7 +15,7 @@
trigger="hover"
popper-class="chart-error-popper">
<div >{{errorContent}}</div>
<span slot="reference" style="" class="panel-info-corner panel-info-corner--error">
<span slot="reference" class="panel-info-corner panel-info-corner--error">
<i class="nz-icon nz-icon-warning fa"></i>
<span class="panel-info-corner-inner"></span>
</span>

6
nezha-fronted/src/tools.js
View File

@@ -466,12 +466,6 @@ export const chartResizeTool = {
//step时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类型
//刷新滚动条
let scrollbar = box.querySelector(".el-table__body-wrapper")._ps_;
if (scrollbar) {
scrollbar.update();
}
}
//chart外层宽高调整
let outerBox = document.getElementById(`chart-${data.id}`);