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

fix:修改BUG

Browse Source 
dashboard模块
1.panel列表页面表格和曲线及对应全屏的loading的统一及加载时样式调整
2.全屏查询条件及数据更新时，不再与列表的数据和查询时间进行统一
说明：预览模块的预览及全屏的loading及数据同步等还需要调整
This commit is contained in:
hanyuxia
2020-02-19 21:33:54 +08:00
parent 15d6142453
commit 6663d6f733
11 changed files with 365 additions and 141 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
nezha-fronted/src/assets/img/loading.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 16 KiB

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

@@ -23,6 +23,7 @@
@on-remove-chart-block="removeChart"
@on-edit-chart-block="editData"
:panel-id="filter.panelId"
:chart-index="index"
:editChartId="'editChartId' + item.id"></line-chart-block>
<chart-table v-if="item.type === 'table'" ref="editChart" :key="'inner' + item.id"
@@ -31,6 +32,7 @@
@on-remove-chart-block="removeChart"
@on-edit-chart-block="editData"
:panel-id="filter.panelId"
:chart-index="index"
:editChartId="'editChartId' + item.id"></chart-table>
</div>
@@ -163,11 +165,13 @@ export default {
}else {
this.dataList = this.dataTotalList;
}
this.$nextTick(() => {
if (this.dataList.length > 0 && this.$refs.editChart) {
this.$refs.editChart.forEach((item) => {
item.showLoad();//之后要实现
this.$refs.editChart.forEach((item, i) => {
item.showLoad(this.dataList[i]);//之后要实现
});
}
});
this.dataSetFirst(this.dataList);
}
});
@@ -211,10 +215,10 @@ export default {
startTime = this.filter.start_time;
endTime = this.filter.end_time;
}
} else if(filterType==='searchTime'){
} else if(filterType==='showFullScreen'){//全屏时间查询
startTime = this.filter.start_time;
endTime = this.filter.end_time;
this.$parent.refreshTime(startTime,endTime);
//this.$parent.refreshTime(startTime,endTime);全屏查询，不更新panel列表的时间条件
}else {
startTime = this.filter.start_time;
endTime = this.filter.end_time;
@@ -324,25 +328,46 @@ export default {
}
});
if (chartItem.type === 'table') {//表格
if(filterType==='showFullScreen'){//table的全屏查询
this.$refs.editChart[index].setData(chartItem, tableData,
this.filter.panelId, this.filter,filterType);
}else {
this.$refs.editChart[index].setData(chartItem, tableData,
this.filter.panelId, this.filter);
}
} else if (chartItem.type === 'line' || chartItem.type === 'bar' || chartItem.type === 4) {
if (series.length && chartItem.type === 4) {//曲线汇总
//series.push(sumData);//后续需要
}
if(filterType==='showFullScreen'){//table的全屏查询
this.$refs.editChart[index].setData(chartItem, series,
this.filter.panelId, this.filter,legend,filterType);
}else {
this.$refs.editChart[index].setData(chartItem, series,
this.filter.panelId, this.filter,legend);
}
}
} else {
const type = chartItem.type;
if (type === 'table') {
if(filterType==='showFullScreen'){//table的全屏查询
this.$refs.editChart[index].setData(chartItem, [], this.filter.panelId,
this.filter,filterType);
}else {
this.$refs.editChart[index].setData(chartItem, [], this.filter.panelId,
this.filter);
}
} else if (type === 'line' || type === 'bar' || chartItem.type === 4) {
if(filterType==='showFullScreen'){//table的全屏查询
this.$refs.editChart[index].setData(chartItem, [], this.filter.panelId,
this.filter,filterType);
}else {
this.$refs.editChart[index].setData(chartItem, [], this.filter.panelId,
this.filter);
}
}
}
}).catch((error) => {
if (error) {
this.$message.error({
@@ -397,7 +422,7 @@ export default {
}
this.dataList.forEach((item, index) => {
if (item.id === chartId) {
this.getChartData(item, index, 'searchTime');
this.getChartData(item, index, 'showFullScreen');
}
});
}

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

@@ -7,6 +7,9 @@
.clearfix{
margin-bottom: 20px;
}
.loading-font{
color:#232f3e !important;
}
.dialog-tool {
margin-right: 40px;
}

200
nezha-fronted/src/components/charts/chart-table.vue
View File

@@ -2,40 +2,27 @@
@import './chart-table.scss';
</style>
<template>
<div class="chart-table" id="chartTableDiv">
<div class="chart-table" :id="'chartTableDiv'+chartIndex" v-show="divFirstShow">
<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">
<div class="table-title">
<div class="table-title" v-show="firstShow">
{{data.title}}
</div>
<div class="nz-btn-group nz-btn-group-light edit" v-if="firstShow">
<div class="nz-btn-group nz-btn-group-light edit" v-show="firstShow">
<button type="button" @click="refreshChart" style="padding: 6px 14px 5px 14px;" class="nz-btn nz-btn-size-large nz-btn-style-light"><i style="font-size: 16px;" class="global-active-color el-icon-refresh-right"></i></button><button
@click="editChart" type="button" class="nz-btn nz-btn-size-large nz-btn-style-light"><i class="nz-icon nz-icon-edit"></i></button><button
@click="removeChart" type="button" class="nz-btn nz-btn-size-large nz-btn-style-light"><i class="el-icon-delete"></i></button><button
@click="showAllScreen" type="button" class="nz-btn nz-btn-size-large nz-btn-style-light"><i class="el-icon-full-screen"></i></button>
</div>
<!--<div class="float-right">
<div class="edit">
<div class="list-icon">
<span @click="refreshChart" :title="$t('dashboard.refresh')" class="set-icon">
<i class="el-icon-refresh-right"></i>
</span>
<span @click="editChart" :title="$t('dashboard.edit')" class="set-icon">
<i class="el-icon-edit-outline"></i>
</span>
<span @click="removeChart" :title="$t('dashboard.delete')" class="set-icon">
<i class="el-icon-delete"></i>
</span>
<span @click="showAllScreen" :title="$t('dashboard.screen')" class="set-icon">
<i class="el-icon-full-screen"></i>
</span>
</div>
</div>
</div>-->
</div>
<div class="mt-10" v-cloak>
<!--
<el-table size="small" :loading="tableLoading">-->
<el-table class="nz-table" id="tableContainer" ref="tableContainer" :data="seriesItem" :height="350" border v-loading="tableLoading" tooltip-effect="light" v-cloak>
<div class="mt-10" v-cloak v-show="firstShow">
<el-table class="nz-table" :id="'tableContainer'+chartIndex" ref="tableContainer" :data="seriesItem" :height="350" border tooltip-effect="light" v-cloak>
<el-table-column sortable :show-overflow-tooltip="true" prop="metric" :label="$t('dashboard.panel.chartTableColumn.metric')" ></el-table-column>
<el-table-column sortable :show-overflow-tooltip="true" prop="label" :label="$t('dashboard.panel.chartTableColumn.label')" ></el-table-column>
<el-table-column sortable prop="time" :label="$t('dashboard.panel.chartTableColumn.time')" width="145" ></el-table-column>
@@ -43,7 +30,7 @@
</el-table>
</div>
<!--全屏-->
<el-dialog class="nz-dialog" :title="$t('dashboard.panel.view')" :visible.sync="screenModal" width="96%" @close="screenModal = false" >
<el-dialog class="nz-dialog" :title="$t('dashboard.panel.view')" :visible.sync="screenModal" width="96%" @close="screenModal = false;" >
<div slot="title">
<span class="nz-dialog-title">{{data.title}}</span>
<div class="float-right panel-calendar dialog-tool">
@@ -52,18 +39,26 @@
<!--<button @click="refreshChart" type="button" class="nz-btn nz-btn-size-normal nz-btn-style-light"><i style="font-size: 14px;" class="el-icon-refresh-right"></i></button>-->
</div>
</div>
<el-table style="padding-top: 30px;" class="nz-table" :data="seriesItem" :height="350" border v-loading="tableLoading" tooltip-effect="light">
<el-table style="margin-top: 30px;" class="nz-table" :data="seriesItemScreen" :height="350" border tooltip-effect="light">
<el-table-column sortable :show-overflow-tooltip="true" prop="metric" :label="$t('dashboard.panel.chartTableColumn.metric')" ></el-table-column>
<el-table-column sortable :show-overflow-tooltip="true" prop="label" :label="$t('dashboard.panel.chartTableColumn.label')" ></el-table-column>
<el-table-column sortable prop="time" :label="$t('dashboard.panel.chartTableColumn.time')" width="145" ></el-table-column>
<el-table-column sortable prop="value" :label="$t('dashboard.panel.chartTableColumn.value')" ></el-table-column>
</el-table>
<div v-show="showLoadingScreen" 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>
</el-dialog>
</div>
</template>
<script>
import bus from '../../libs/bus';
import {Loading} from 'element-ui';
export default {
name: 'chartTable',
@@ -74,13 +69,23 @@ export default {
type: Number,
default: 0,
},
editChartId: {
type: String,
default: 'editChartId',
},
chartIndex:{
type: Number,
default: 0,
}
},
data() {
return {
data: {}, // 该图表信息,chartItem
seriesItem: [], // 保存信息
seriesItemScreen:[],//全屏数据
images: '',
toolbox: false,
//toolbox: false,
loading:Object,
items: {
metric_name: [], // 每条数据列名称
xAxis: [],
@@ -88,6 +93,9 @@ export default {
},
panelIdInner: '', // 看板id=panelId,原写作chart,由set_data获取
firstLoad: false, // 是否第一次加载
showLoading:true,
showLoadingScreen:false,
//showTable:true,
chartType: 'table', // 图表类型
screenModal: false,
// 查询数据使用
@@ -97,7 +105,8 @@ export default {
},
stableFilter: {}, // 保存数据使用,初始化起止时间,单图or多图等
firstShow: false, // 默认不显示操作按钮,
tableLoading: false,
divFirstShow:false,
//tableLoading: false,
columns: [{
title: 'metric',
key: 'metric',
@@ -120,7 +129,7 @@ export default {
sortable: true,
render: (h, params) => h('span', this.getNumStr(params.row.value)),
}],
searchTime: [new Date().setHours(new Date().getHours() - 1), new Date()],
searchTime: [new Date().setHours(new Date().getHours() - 1), new Date()],//全屏显示的时间
oldSearchTime: [],
pickerOptions: {
shortcuts: [{
@@ -207,18 +216,59 @@ export default {
computed: {},
watch: {},
methods: {
startLoading(area){
if(area==='screen'){
this.showLoadingScreen = true;
}else {
this.showLoading = true;
}
/*
//this.loading = this.$loading({
this.loading = Loading.service({
lock:true,
text:'loading',
background:'rgba(0,0,0,0)',
customClass:'loading-font',
//fullscreen: false,
target:document.getElementById('chartTableDiv')
})
*/
},
endLoading(area){
if(area==='screen'){
this.showLoadingScreen = false;
}else {
this.showLoading = false;
}
},
clearData(){
},
showLoad() {
this.tableLoading = true;
showLoad(chartItem) {
//设置高度 chart-table
this.$nextTick(() => {
const chartBox = document.getElementById('chartTableDiv'+this.chartIndex);
let height = chartItem.height;
if(height<200){
height = 200;
}
chartBox.style.height = `${height-25}px`;
const tableBox = document.getElementById('tableContainer'+this.chartIndex);
tableBox.style.height = `${height-75}px`;
});
this.startLoading();
this.divFirstShow = true;
//this.tableLoading = true;
},
// 展示图表编辑区
/*
showTool() {
this.toolbox = !this.toolbox;
},
// 重新请求数据 刷新操作
*/
// 重新请求数据 刷新操作-local
refreshChart() {
this.tableLoading = true;
this.startLoading();
this.firstShow = false;
this.$emit('on-refresh-data', this.data.id);
},
// 编辑图表
@@ -229,39 +279,77 @@ export default {
removeChart() {
this.$emit('on-remove-chart-block', this.data.id);
},
//全屏时间条件查询
dateChange(time) {
this.filter.start_time = bus.timeFormate(this.searchTime[0], 'yyyy-MM-dd hh:mm:ss');
this.filter.end_time = bus.timeFormate(this.searchTime[1], 'yyyy-MM-dd hh:mm:ss');
this.tableLoading = true;
//this.filter.start_time = bus.timeFormate(this.searchTime[0], 'yyyy-MM-dd hh:mm:ss');
//this.filter.end_time = bus.timeFormate(this.searchTime[1], 'yyyy-MM-dd hh:mm:ss');
//this.showTable = false;
this.seriesItemScreen = [];
for(let i=0;i<8;i++){
this.seriesItemScreen.push({//表格数据
label: '',//label
metric: '',//metric列
time: '',//采集时间
value: '',//数值
});
}
this.startLoading('screen');
//this.tableLoading = true;
//this.firstShow = false;
this.$emit('on-search-data', this.data.id, this.searchTime);
},
// 全屏查看
showAllScreen() {
// 初始化同步时间
this.searchTime = this.oldSearchTime;
//this.searchTime = this.oldSearchTime;
//alert(JSON.stringify(this.oldSearchTime));
this.searchTime = [];
this.searchTime[0] = this.oldSearchTime[0];//将列表的查询时间复制给全屏的查询时间
this.searchTime[1] = this.oldSearchTime[1];
this.seriesItemScreen = this.seriesItem;
this.screenModal = true;
//this.startLoading('screen');
//this.endLoading('screen');
},
// 设置数据, filter区分
setData(chartItem, seriesItem, panelId, filter) {
this.firstShow = true; // 展示操作按键
this.tableLoading = false;
if (filter) { // 保存数据,用于同步时间
this.stableFilter = filter;
setData(chartItem, seriesItem, panelId, filter,area) {
if(area==='showFullScreen'){//全屏按时间查询
this.data = chartItem;
this.searchTime[0] = filter.start_time;//将列表的查询时间复制给全屏的查询时间
this.searchTime[1] = filter.end_time;
this.seriesItemScreen = seriesItem;
this.endLoading('screen');
}else{
//设置高度 chart-table
this.$nextTick(() => {
const chartBox = document.getElementById('chartTableDiv'+this.chartIndex);
let height = chartItem.height;
if(height<200){
height = 200;
}
chartBox.style.height = `${height-25}px`;
const tableBox = document.getElementById('tableContainer'+this.chartIndex);
tableBox.style.height = `${height-75}px`;
});
this.divFirstShow = true;
this.firstShow = true; // 展示操作按键
this.panelIdInner = panelId;
this.data = chartItem;
this.seriesItem = seriesItem;
this.searchTime[0] = filter.start_time;
this.seriesItemScreen = seriesItem;
if (filter) { // 保存数据,用于同步时间
this.searchTime[0] = filter.start_time;//将列表的查询时间复制给全屏的查询时间
this.searchTime[1] = filter.end_time;
this.oldSearchTime = this.searchTime;
//设置高度 chart-table
this.$nextTick(() => {
const chartBox = document.getElementById('chartTableDiv');
let height = chartItem.height;
chartBox.style.height = `${height-25}px`;
const tableBox = document.getElementById('tableContainer');
tableBox.style.height = `${height-75}px`;
});
this.oldSearchTime[0] = this.searchTime[0];
this.oldSearchTime[1] = this.searchTime[1];
}
this.endLoading();
//this.showTable = true;
//this.tableLoading = false;
}
},
// 获取格式
getNumStr(num) {
@@ -270,11 +358,11 @@ export default {
const kbNum = num / 1000;
if (kbNum >= 1000) {
const mbNum = kbNum / 1000;
if (mbNum > 1000) {
if (mbNum >= 1000) {
const gbNum = mbNum / 1000;
if (gbNum > 1000) {
if (gbNum >= 1000) {
const tbNum = gbNum / 1000;
if (tbNum > 1000) {
if (tbNum >= 1000) {
const pbNum = tbNum / 1000;
return `${pbNum.toFixed(2)}PB`;
}

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

@@ -95,6 +95,9 @@
margin-right: 40px;
}
.line-chart-block-modal {
.el-dialog{
height:480px;
}
.line-area {
box-sizing: border-box;
background: #FFF;

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

@@ -2,9 +2,10 @@
@import './line-chart-block.scss';
</style>
<template>
<div class="line-chart-block" id="lineChartDiv">
<div class="line-chart-block" :id="'lineChartDiv'+chartIndex" v-show="divFirstShow">
<loading :ref="'localLoading'+chartIndex"></loading>
<!--<div class="edit">
<div class="list-icon" v-if="firstShow">
<span @click="refreshChart" :title="$t('dashboard.refresh')" class="set-icon" v-if="showSetting">
<i class="el-icon-refresh-right"></i>
@@ -20,16 +21,16 @@
</span>
</div>
</div>-->
<div class="nz-btn-group nz-btn-group-light edit" v-if="firstShow">
<div class="nz-btn-group nz-btn-group-light edit" v-show="firstShow">
<button type="button" @click="refreshChart" style="padding: 6px 14px 5px 14px;" class="nz-btn nz-btn-size-large nz-btn-style-light" v-if="showSetting"><i style="font-size: 16px;" class="global-active-color el-icon-refresh-right"></i></button><button
@click="editChart" type="button" class="nz-btn nz-btn-size-large nz-btn-style-light" v-if="showSetting"><i class="nz-icon nz-icon-edit"></i></button><button
@click="removeChart" type="button" class="nz-btn nz-btn-size-large nz-btn-style-light" v-if="showSetting"><i class="el-icon-delete"></i></button><button
@click="showAllScreen" type="button" class="nz-btn nz-btn-size-large nz-btn-style-light"><i class="el-icon-full-screen"></i></button>
</div>
<div class="line-area" ref="lineChartArea" id="lineChartArea" ></div>
<div class="line-area" ref="lineChartArea" id="lineChartArea" v-show="firstShow"></div>
<div class="legend-container" id="legendArea" ref="legendArea">
<div class="legend-container" id="legendArea" ref="legendArea" v-show="firstShow">
<div v-for="(item, index) in legendList" :title="item.name" @click="clickLegend(item.name,index)" class="legend-item" :class="{'ft-gr':isGrey[index]}" :key="'legend_' + item.name+'_'+index">
<span class="legend-shape" :style="{background:(isGrey[index]?'#D3D3D3':bgColorList[index])}"></span>{{item.name}}
<br/><!--bgColorList[index]-->
@@ -61,12 +62,13 @@
</div>
</div>
<div class="line-area " ref="screenShowArea" id="screenShowArea" ></div>
<div class="legend-container" id="screenLegendArea" ref="screenLegendArea">
<div class="legend-container" id="screenLegendArea" ref="screenLegendArea" v-show="showLegend">
<div v-for="(item, index) in screenLegendList" :title="item.name" @click="clickScreenLegend(item.name,index)" class="legend-item" :class="{'ft-gr':isGreyScreen[index]}" :key="'legend_' + item.name+'_'+index">
<span class="legend-shape" :style="{background:(isGreyScreen[index]?'#D3D3D3':bgColorList[index])}"></span>{{item.name}}
<br/><!--bgColorList[index]-->
</div>
</div>
<loading :ref="'localLoadingScreen'+chartIndex"></loading>
</el-dialog>
<!--</Modal>-->
</div>
@@ -75,11 +77,12 @@
import axios from 'axios';
import echarts from 'echarts';
import bus from '../../libs/bus';
import loading from "../common/loading";
export default {
name: 'lineChartBlock',
components: {
//calendarSelect,
'loading': loading,
},
props: {
editChartId: {
@@ -91,6 +94,10 @@
type: Number,
default: 0,
},
chartIndex:{
type: Number,
default: 0,
},
// 展示设置内容
showSetting: {
type: Boolean,
@@ -101,6 +108,7 @@
return {
data: {}, // 该图表信息,chartItem
seriesItem: [], // 保存信息
seriesItemScreen:[],
images: '',
toolbox: false,
items: {
@@ -111,6 +119,7 @@
panelIdInner: '', // 看板id=panelId,原写作chart,由set_data获取
chartName: '',
firstLoad: false, // 是否第一次加载
divFirstShow:false,
highchartStore: null, // 保存图表数据
echartStore:null,// 保存图表数据
echartModalStore: null, // 全屏查看时数据
@@ -136,6 +145,7 @@
'#76624c', '#d71345', '#2468a2', '#ca8687', '#1b315e',
],
firstShow: false, // 默认不显示操作按钮,
showLegend:true,
searchTime:[new Date().setHours(new Date().getHours()-1),new Date()],
oldSearchTime:[],
pickerOptions: {
@@ -289,8 +299,6 @@
},
// chartSite用于区分是全屏显示还是局部显示
initChart(chartInfo, dataArg, ele, chartSite,legend) {
this.firstShow = true; // 展示操作按键
const self = this;
this.chartType = ''; // 图表类型
if ( chartInfo.type === 4) {//line,bar
@@ -644,8 +652,8 @@
this.echartStore.clear();
option.title = title;
this.echartStore.setOption(option);//创建图表
this.echartStore.hideLoading();
//this.echartStore.resize({height:chartInfo.height});//,width:`${ele.clientWidth-100}`}
//this.echartStore.hideLoading();
this.$refs['localLoading'+this.chartIndex].endLoading();
if(legend && legend.length>0){
this.legendList = [];
legend.forEach((item, i) => {
@@ -665,6 +673,7 @@
this.echartStore.resize({height:(chartInfo.height-divHeight-25)});
}
});
this.firstShow = true; // 展示操作按键
} else if (chartSite === 'screen') { // 全屏显示
/*
option.series = dataArg.map((item) => {// params.series = dataArg.map((item) => {
@@ -715,7 +724,9 @@
this.echartModalStore.clear();
option.title = {};
this.echartModalStore.setOption(option);//显示全屏界面
this.echartModalStore.hideLoading();
//this.echartModalStore.hideLoading();
this.showLegend = true;
this.$refs['localLoadingScreen'+this.chartIndex].endLoading();
//this.echartModalStore.resize({height:chartInfo.height});
if(legend && legend.length>0){
this.screenLegendList = [];
@@ -729,12 +740,16 @@
});
}
this.$nextTick(() => {
let divHeight = this.$refs.screenLegendArea.offsetHeight;
this.echartModalStore.resize({height:(400-divHeight)});
/*
let divHeight = this.$refs.screenLegendArea.offsetHeight;
if(!chartInfo.height){
this.echartModalStore.resize({height:(400-divHeight)});
}else {
this.echartModalStore.resize({height:(chartInfo.height-divHeight-25)});
}
*/
});
}
},
@@ -787,23 +802,47 @@
//return rlt;
},
// 设置数据, filter区分
setData(chartItem, seriesItem, panelId, filter,legend) {
if (filter) { // 保存数据,用于同步时间
this.stableFilter = filter;
}
setData(chartItem, seriesItem, panelId, filter,legend,area) {
if(area==='showFullScreen'){//全屏按时间查询
/*
this.legend = legend;
this.data = chartItem;
this.searchTime[0] = filter.start_time;//将列表的查询时间复制给全屏的查询时间
this.searchTime[1] = filter.end_time;
this.seriesItemScreen = seriesItem;
//this.$refs['localLoadingScreen'+this.chartIndex].endLoading();
this.initChart(chartItem, seriesItem, this.$refs.lineChartArea, 'screen',legend);
*/
}else{
this.legend = legend;
//设置高度 chart-table
this.$nextTick(() => {
const chartBox = document.getElementById('lineChartDiv'+this.chartIndex);
let height = chartItem.height;
if(height<200){
height = 200;
}
chartBox.style.height = `${height-25}px`;
});
this.$refs['localLoading'+this.chartIndex].startLoading();
this.divFirstShow = true;
this.firstShow = true; // 展示操作按键
this.panelIdInner = panelId;
this.data = chartItem;
this.seriesItem = seriesItem;
this.seriesItemScreen = seriesItem;
if (filter) { // 保存数据,用于同步时间
this.stableFilter = filter;
this.searchTime[0] = filter.start_time;
this.searchTime[1] = filter.end_time;
this.oldSearchTime = this.searchTime;
this.initChart(chartItem, seriesItem, this.$refs.lineChartArea, 'local',legend);
/*
if (chartItem.type === 'line' || chartItem.type === 'bar' || chartItem.type === 4) {
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);
}
*/
},
// 删除该图表
@@ -816,7 +855,8 @@
},
// 重新请求数据 刷新操作
refreshChart() {
this.echartStore.showLoading();
this.$refs['localLoading'+this.chartIndex].startLoading();
this.firstShow = false;
this.$emit('on-refresh-data', this.data.id);
},
initDialog(){
@@ -844,11 +884,23 @@
this.searchTime = this.oldSearchTime;
this.screenModal = true;
this.isGreyScreen=[];
this.seriesItemScreen = this.seriesItem;
/*
this.searchTime = [];
this.searchTime[0] = this.oldSearchTime[0];//将列表的查询时间复制给全屏的查询时间
this.searchTime[1] = this.oldSearchTime[1];
this.seriesItemScreen = this.seriesItem;
this.screenModal = true;
*/
//this.dateChange();
},
dateChange(time) {
this.filter.start_time = bus.timeFormate(this.searchTime[0], 'yyyy-MM-dd hh:mm:ss');
this.filter.end_time = bus.timeFormate(this.searchTime[1], 'yyyy-MM-dd hh:mm:ss');
this.echartModalStore.clear();
this.showLegend = false;
this.$refs['localLoadingScreen'+this.chartIndex].startLoading();
if (this.showSetting) {
this.getQueryChart('list');
} else {
@@ -857,9 +909,11 @@
},
// 查询数据,修改日期查询全屏数据
getQueryChart(type) {
/*
if (this.echartModalStore) {
this.echartModalStore.showLoading();
}
*/
let axiosArr = [];
this.$nextTick(() => {
let startTime = bus.timeFormate(this.searchTime[0], 'yyyy-MM-dd hh:mm:ss');
@@ -983,10 +1037,27 @@
});
});
},
showLoad() {
showLoad(chartItem) {
//设置高度
this.$nextTick(() => {
const chartBox = document.getElementById('lineChartDiv'+this.chartIndex);
let height = chartItem.height;
if(height<200){
height = 200;
}
chartBox.style.height = `${height-25}px`;
//const tableBox = document.getElementById('tableContainer');
// const chartBox = document.getElementById('lineChartDiv'+this.chartIndex);
//tableBox.style.height = `${height-75}px`;
});
this.$refs['localLoading'+this.chartIndex].startLoading();
this.divFirstShow = true;
/*
if (this.echartStore) {
this.echartStore.showLoading();
}
*/
},
// 获取格式
getNumStr(num) {

37
nezha-fronted/src/components/common/loading.vue Normal file
View File

@@ -0,0 +1,37 @@
<style scoped lang="scss">
.loading-font{
color:#232f3e !important;
}
</style>
<template>
<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>
</template>
<script>
export default {
name: "loading",
props: {
},
data() {
return {
showLoading:false,
};
},
methods: {
startLoading(){
this.showLoading = true;
},
endLoading(){
this.showLoading = false;
},
}
};
</script>

6
nezha-fronted/src/components/page/dashboard/chartMetric.vue
View File

@@ -24,7 +24,7 @@
}
.symbol-area {
position: relative;
height: 135px;
height: 100px;
}
.symbol-equal {
position: absolute;
@@ -48,9 +48,8 @@
color: #666;
}
.li-list-part-label-val-list {
height: 170px;
height: 176px;
border: 1px solid #dcdfe6;
margin-top: 33px;
border-radius: 4px;
padding: 0px 0 10px 15px;
}
@@ -149,7 +148,6 @@
<el-row v-if="elementInfo.metric && tableShow == 1"><!--v-if="elementInfo.tagList.length > 0"-->
<el-col :span="8">
<div class="metric-title-label too-long-split">{{elementInfo.metric}}</div>
<div class="li-list-part">
<el-scrollbar style="height: 100%">
<div class="li-cursor" v-if="!item.isSelect"

4
nezha-fronted/src/components/page/dashboard/chartMetricForPreview.vue
View File

@@ -47,7 +47,6 @@
.li-list-part-label-val-list {
height: 218px;
border: 1px solid #dcdfe6;
margin-top: 39px;
border-radius: 4px;
box-sizing:border-box;
padding: 15px 0 10px 15px;
@@ -84,7 +83,7 @@
}
.symbol-area {
position: relative;
height: 166px;
height: 111px;
}
.symbol-equal {
position: absolute;
@@ -216,7 +215,6 @@
<!--create chart组件显示框 -->
<el-row v-if="elementInfo.metric && tableShow == 1"><!--v-if="elementInfo.tagList.length > 0"-->
<el-col :span="9" style="margin-bottom: 20px;">
<div class="metric-title-label too-long-split">{{elementInfo.metric}}</div>
<div class="li-list-part">
<el-scrollbar style="height: 100%">
<div class="li-cursor" v-if="!item.isSelect"

3
nezha-fronted/src/components/page/dashboard/metricPreview.scss
View File

@@ -16,7 +16,8 @@
//width:calc(100% - 0px);
}
.chartBox {
width: 100%;
width: 100% !important;
height:400px;
}
.chartBoxMul {
width: 100%;

2
nezha-fronted/src/components/page/dashboard/metricPreview.vue
View File

@@ -358,7 +358,7 @@ export default {
// 将获取的数据运用于创建多个图表备用
this.$refs.metricSet.setSeries(response.data.result,series);
if (this.chartCount === 'single') {
this.setSize(chartItem.span, 0);
//this.setSize(chartItem.span, 0);
const filterParams = Object.assign({}, this.filter);
filterParams.chartCount = 'single';
this.$nextTick(() => {