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

feat: panel拖拽、缩放（部分）

Browse Source
This commit is contained in:
chenjinsong
2020-05-29 21:06:55 +08:00
parent 371d6e4a20
commit b5eecd5926
8 changed files with 1349 additions and 1661 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

File diff suppressed because it is too large Load Diff

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

@@ -39,8 +39,7 @@
background: #FFF;
border: 1px solid #d8dce1;
padding: 0px 0px;
margin-bottom: 10px;
padding-bottom: 3px;
box-sizing: border-box;
.single-stat-container{
padding-left: 8px;
padding-right: 8px;

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

@@ -9,14 +9,6 @@
<template>
<div class="chart-table" :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"
@@ -53,8 +45,6 @@
</div>
<div class="mt-10 table-container" v-cloak v-show="firstShow">
<el-table class="nz-table" :id="'tableContainer'+chartIndex" ref="tableContainer" :height="290" :data="seriesItem" border tooltip-effect="light" v-cloak v-scrollBar:el-table>
<!-- <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')" min-width="100" ></el-table-column>
<el-table-column sortable prop="element" :show-overflow-tooltip="true" :label="$t('dashboard.panel.chartTableColumn.element')" min-width="260">
<template slot-scope="scope">

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

@@ -40,8 +40,7 @@
background: #FFF;
border: 1px solid #d8dce1;
padding: 0px 0px;
margin-bottom: 10px;
padding-bottom: 3px;
box-sizing: border-box;
.url-container{
padding-left: 8px;
padding-right: 8px;

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

@@ -34,7 +34,7 @@
bottom: 0px;
line-height: 18px;
position: absolute;
padding-bottom:5px;
padding-bottom:3px;
}
.legend-container-screen.legend-container {
max-height: 80px;
@@ -142,45 +142,40 @@
max-width:280px;
border: 1px solid #e02f44;
}
.nz-chart-resize {
height: 100%;
width: 100%;
position: relative;
}
.resize-box {
border: 1px solid #d8dce1;
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
.resize-shadow {
height: 100%;
width: 100%;
position: absolute;
}
.resize-shadow-active {
background-color: #888;
}
.line-chart-block {
height: 100%;
//min-height: 0px;
position: relative;
background: #FFF;
border: 1px solid #d8dce1;
padding: 0px 0px;
margin-bottom: 10px;
padding-bottom: 3px;
.vue-resizable-handle {
position: absolute;
width: 20px;
height: 20px;
bottom: 0;
right: 0;
cursor: se-resize;
box-sizing: border-box;
}
.vue-resizable-handle:after {
border-right: 2px solid #555;
border-bottom: 2px solid #555;
content: "";
position: absolute;
right: 3px;
bottom: 3px;
width: 5px;
height: 5px;
/*border-right: 2px solid rgba(0,0,0,.4);
border-bottom: 2px solid rgba(0,0,0,.4);*/
box-sizing: inherit;
}
background-color: white;
.chartTitle:hover {
background-color:#d8dce1;
}
.chartTitle {
text-align: center;
width: 100%;
line-height: 28px;
text-align: center;
width: 100%;
line-height: 28px;
padding: 0 3px;
box-sizing: border-box;
.nz-chart-top{
width:100%;
}
@@ -195,7 +190,6 @@
font-size: 18px;
line-height: 26px;
color: #333;
margin: -3px 0 3px 3px;
display:flex;
justify-content:center;
align-items:center;

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

@@ -2,145 +2,95 @@
@import './line-chart-block.scss';
</style>
<template>
<div class="line-chart-block" :id="'lineChartDiv'+chartIndex" v-show="divFirstShow" @mouseenter="mouseEnterChart" @mouseleave="mouseLeaveChart">
<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>
<div class="nz-chart-resize">
<div class="resize-shadow" ref="resizeShadow"></div>
<div class="resize-box" ref="resizeBox">
<div class="line-chart-block" :id="'lineChartDiv'+chartIndex" v-show="divFirstShow" @mouseenter="mouseEnterChart" @mouseleave="mouseLeaveChart">
<loading :ref="'localLoading'+chartIndex"></loading>
<div class="clearfix chartTitle" :id="'chartTitle'+chartIndex" >
<el-popover
v-if="isError"
placement="top-start"
:close-delay=10
trigger="hover"
popper-class="chart-error-popper">
<div >{{errorContent}}</div>
<span slot="reference" style="" 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>
<span @click="editChart" :title="$t('dashboard.edit')" class="set-icon" v-if="showSetting">
<i class="el-icon-edit-outline"></i>
</span>
<span @click="removeChart" :title="$t('dashboard.delete')" class="set-icon" v-if="showSetting">
<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 class="clearfix chartTitle" :id="'chartTitle'+chartIndex" >
<el-popover
v-if="isError"
placement="top-start"
:close-delay=10
trigger="hover"
popper-class="chart-error-popper">
<div >{{errorContent}}</div>
<span slot="reference" style="" 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>
</el-popover>
<el-dropdown trigger="click" v-show="firstShow" class="nz-chart-top" :key="'chartDropdown'+chartIndex" v-clickoutside="clickos">
<el-dropdown-menu style="display: none"></el-dropdown-menu>
<span class="el-dropdown-link chart-title" @click="dropdownMenuShow=!dropdownMenuShow">
<span class="chart-title-text">{{data.title}}</span>
<span class="chart-title-icon"><i class="el-icon-caret-bottom el-icon--right" :class="{'visible':caretShow,'hidden':!caretShow}"></i></span>
</span>
<!--
<el-dropdown-menu slot="dropdown" class="nz-chart-dropdown" :popper-append-to-body="false">
<el-dropdown-item @click.native="refreshChart" ><i style="font-size: 16px;" class="global-active-color el-icon-refresh-right"></i>{{$t('dashboard.refresh')}}</el-dropdown-item>
<el-dropdown-item @click.native="editChart"><i style="font-size: 14px;margin-right: 11px;margin-left: 1px;" class="nz-icon nz-icon-edit"></i>{{$t('dashboard.edit')}}</el-dropdown-item>
<el-dropdown-item @click.native="removeChart" ><i style="font-size: 16px;" class="el-icon-delete"></i>{{$t('dashboard.delete')}}</el-dropdown-item>
<el-dropdown-item @click.native="showAllScreen" ><i style="font-size: 16px;" class="el-icon-full-screen"></i>{{$t('dashboard.screen')}}</el-dropdown-item>
</el-dropdown-menu>
-->
<ul slot="dropdown" v-show="dropdownMenuShow" :id="'dropdownUl'+chartIndex" :class="{'el-dropdown-menu nz-chart-dropdown':!isExplore,'el-dropdown-menu nz-chart-dropdown-one':isExplore}" style="position: absolute; top: 30px; left: calc(50% - 79px); transform-origin: center top; z-index: 1000;" >
<li v-show="!isExplore" @click="refreshChart" class="el-dropdown-menu__item">
<i class="global-active-color el-icon-refresh-right" style="font-size: 16px;"></i><span>{{$t('dashboard.refresh')}}</span></li>
<li v-show="!isExplore" @click="editChart" class="el-dropdown-menu__item">
<i class="nz-icon nz-icon-edit" style="font-size: 14px; margin-right: 11px; margin-left: 1px;"></i>{{$t('dashboard.edit')}}</li>
<li v-show="!isExplore" @click="removeChart" class="el-dropdown-menu__item">
<i class="el-icon-delete" style="font-size: 16px;"></i>{{$t('dashboard.delete')}}</li>
<li @click="showAllScreen" class="el-dropdown-menu__item">
<i class="el-icon-full-screen" style="font-size: 16px;"></i>{{$t('dashboard.screen')}}</li>
<li v-show="!isExplore" @click="duplicate" class="el-dropdown-menu__item">
<i class="el-icon-copy-document" style="font-size: 16px;"></i>{{$t('dashboard.duplicate')}}</li>
</ul>
</el-dropdown>
<!--
<div class="chart-title" v-show="firstShow">
{{data.title}}
</div>
<div class="nz-btn-group nz-btn-group-light edit button-panel-height" 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>
<div class="line-area" ref="lineChartArea" :id="'lineChartArea'+chartIndex" v-show="firstShow" style="width:100%;"></div>
<div class="legend-container" id="legendArea" ref="legendArea" v-show="firstShow" v-scrollBar:legend>
<div v-for="(item, index) in legendList" :title="item.alias?item.alias: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.alias?item.alias:item.name}}
</div>
</div>
<!--
<Modal title="查看" v-model="screenModal" width="96%" class="line-chart-block-modal">-->
<el-dialog class="line-chart-block-modal nz-dialog"
:title="$t('dashboard.panel.view')"
:visible.sync="screenModal"
width="90%"
@close="screenModal = false"
style="margin-top: 1vh !important;"
@opened="initDialog">
<el-popover
v-if="isError"
placement="top-start"
:close-delay=10
trigger="hover"
popper-class="chart-error-popper">
<div >{{errorContent}}</div>
<span slot="reference" class="panel-info-corner panel-info-corner--error">
<i class="nz-icon nz-icon-warning fa-model" ></i>
<span class="panel-info-corner-inner"></span>
</el-popover>
<el-dropdown trigger="click" v-show="firstShow" class="nz-chart-top" :key="'chartDropdown'+chartIndex" v-clickoutside="clickos">
<el-dropdown-menu style="display: none"></el-dropdown-menu>
<span class="el-dropdown-link chart-title" @click="dropdownMenuShow=!dropdownMenuShow">
<span class="chart-title-text">{{data.title}}</span>
<span class="chart-title-icon"><i class="el-icon-caret-bottom el-icon--right" :class="{'visible':caretShow,'hidden':!caretShow}"></i></span>
</span>
</el-popover>
<div slot="title" >
<span class="nz-dialog-title" v-show="!isExplore">{{data.title}}</span>
<span class="nz-dialog-title" v-show="isExplore">&nbsp;</span>
<div class="float-right panel-calendar dialog-tool">
<time-picker ref="calendarPanel" class="nz-dashboard-picker" style="margin-top: -12px;" @change="dateChange"></time-picker>
<!--
<el-date-picker ref="calendar" prefix-icon=" " size="mini" class="nz-dashboard-picker"
format="yyyy/MM/dd HH:mm"
@change="dateChange"
v-model="searchTime"
type="datetimerange"
:picker-options="pickerOptions"
:range-separator="$t('dashboard.panel.to')"
:start-placeholder="$t('dashboard.panel.startTime')"
:end-placeholder="$t('dashboard.panel.endTime')"
align="right">
</el-date-picker>-->
<!--<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>-->
<ul slot="dropdown" v-show="dropdownMenuShow" :id="'dropdownUl'+chartIndex" :class="{'el-dropdown-menu nz-chart-dropdown':!isExplore,'el-dropdown-menu nz-chart-dropdown-one':isExplore}" style="position: absolute; top: 30px; left: calc(50% - 79px); transform-origin: center top; z-index: 1000;" >
<li v-show="!isExplore" @click="refreshChart" class="el-dropdown-menu__item">
<i class="global-active-color el-icon-refresh-right" style="font-size: 16px;"></i><span>{{$t('dashboard.refresh')}}</span></li>
<li v-show="!isExplore" @click="editChart" class="el-dropdown-menu__item">
<i class="nz-icon nz-icon-edit" style="font-size: 14px; margin-right: 11px; margin-left: 1px;"></i>{{$t('dashboard.edit')}}</li>
<li v-show="!isExplore" @click="removeChart" class="el-dropdown-menu__item">
<i class="el-icon-delete" style="font-size: 16px;"></i>{{$t('dashboard.delete')}}</li>
<li @click="showAllScreen" class="el-dropdown-menu__item">
<i class="el-icon-full-screen" style="font-size: 16px;"></i>{{$t('dashboard.screen')}}</li>
<li v-show="!isExplore" @click="duplicate" class="el-dropdown-menu__item">
<i class="el-icon-copy-document" style="font-size: 16px;"></i>{{$t('dashboard.duplicate')}}</li>
</ul>
</el-dropdown>
</div>
</div>
<div class="line-area" ref="screenShowArea" id="screenShowArea" style="margin-top:0px;" @mouseenter="mouseEnterFullChart" @mouseleave="mouseLeaveFullChart"></div>
<div class="legend-container legend-container-screen" :id="'screenLegendArea'+chartIndex" @mouseenter="mouseEnterFullChart" @mouseleave="mouseLeaveFullChart" v-show="showLegend" v-scrollBar:legend>
<div v-for="(item, index) in screenLegendList" :title="item.alias?item.alias: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.alias?item.alias:item.name}}
<br/><!--bgColorList[index]-->
<div class="line-area" ref="lineChartArea" :id="'lineChartArea'+chartIndex" v-show="firstShow" style="width:100%;"></div>
<div class="legend-container" id="legendArea" ref="legendArea" v-show="firstShow" v-scrollBar:legend>
<div v-for="(item, index) in legendList" :title="item.alias?item.alias: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.alias?item.alias:item.name}}
</div>
</div>
</div>
<!--
<Modal title="查看" v-model="screenModal" width="96%" class="line-chart-block-modal">-->
<el-dialog class="line-chart-block-modal nz-dialog"
:title="$t('dashboard.panel.view')"
:visible.sync="screenModal"
width="90%"
@close="screenModal = false"
style="margin-top: 1vh !important;"
@opened="initDialog">
<el-popover
v-if="isError"
placement="top-start"
:close-delay=10
trigger="hover"
popper-class="chart-error-popper">
<div >{{errorContent}}</div>
<span slot="reference" class="panel-info-corner panel-info-corner--error">
<i class="nz-icon nz-icon-warning fa-model" ></i>
<span class="panel-info-corner-inner"></span>
</span>
</el-popover>
<div slot="title" >
<span class="nz-dialog-title" v-show="!isExplore">{{data.title}}</span>
<span class="nz-dialog-title" v-show="isExplore">&nbsp;</span>
<div class="float-right panel-calendar dialog-tool">
<loading :ref="'localLoadingScreen'+chartIndex"></loading>
</el-dialog>
<!--</Modal>-->
<!--style="touch-action: none;" -->
<span class="vue-resizable-handle" @mousedown="dragResize"></span>
<time-picker ref="calendarPanel" class="nz-dashboard-picker" style="margin-top: -12px;" @change="dateChange"></time-picker>
</div>
</div>
<div class="line-area" ref="screenShowArea" id="screenShowArea" style="margin-top:0px;" @mouseenter="mouseEnterFullChart" @mouseleave="mouseLeaveFullChart"></div>
<div class="legend-container legend-container-screen" :id="'screenLegendArea'+chartIndex" @mouseenter="mouseEnterFullChart" @mouseleave="mouseLeaveFullChart" v-show="showLegend" v-scrollBar:legend>
<div v-for="(item, index) in screenLegendList" :title="item.alias?item.alias: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.alias?item.alias:item.name}}
<br/><!--bgColorList[index]-->
</div>
</div>
<loading :ref="'localLoadingScreen'+chartIndex"></loading>
</el-dialog>
</div>
<span class="vue-resizable-handle" @mousedown="startResize"></span>
</div>
</div>
</template>
<script>
@@ -151,7 +101,6 @@
import chartDataFormat from './chartDataFormat'
import {randomcolor} from '../common/js/radomcolor/randomcolor.js'
import timePicker from '../common/timePicker'
export default {
name: 'lineChartBlock',
components: {
@@ -159,9 +108,8 @@
'time-picker':timePicker
},
props: {
editChartId: {
type: String,
default: 'editChartId',
chartData: {
type: Object
},
// 看板id
panelId: {
@@ -180,7 +128,8 @@
isExplore:{
type:Boolean,
default:false,
}
},
stepHeight: {type: Number}
},
data() {
return {
@@ -232,24 +181,17 @@
searchTime:[new Date().setHours(new Date().getHours()-1),new Date()],
oldSearchTime:[],
minHeight:200,
chartSpaceHeight:5,//top-border: 1,bottom-border: 1,padding-bottome:3
chartSpaceHeight:2,//top-border: 1,bottom-border: 1,padding-bottome:3
titleHeight:28,
screenTitleHeight:58,
legendHeight:80,
screenTitleHeight:58
};
},
computed: {
/*
typeVisible() {
if (this.data.type === 'line' || this.data.type === 'bar' || this.data.type === 4) {
return true;
}
return false;
},
*/
},
watch: {},
methods: {
startResize(e) {
let vm = this;
this.$chartResizeTool.start(vm, this.chartData, e);
},
setDivFirstShow(showDiv){
this.divFirstShow = showDiv;
},
@@ -292,6 +234,10 @@
}
},
dragResize:function(e){
this.$refs.shadow.classList.add("resize-shadow-active");
var diffWidth = 20;//界面的宽度空白的地方的宽度
var chartBoxPadding = 20;
var targetDiv= document.getElementById('lineChartDiv'+this.chartIndex); //
@@ -438,14 +384,6 @@
}
},
clickLegend(legendName,index){
// if (this.echartStore) {
// this.echartStore.dispatchAction({
// type: 'legendToggleSelect',
// name: legendName
// });
// let isGreyTmp = this.isGrey[index];
// this.$set(this.isGrey, index, !isGreyTmp);
// }
//点击图表某一个legend，图表只显示当前点击的曲线或柱状图，其它隐藏，再次点击已选中的legend ，显示全部
let curIsGrey=this.isGrey[index];
@@ -494,14 +432,6 @@
}
},
clickScreenLegend(legendName,index){
// if (this.echartModalStore) {
// this.echartModalStore.dispatchAction({
// type: 'legendToggleSelect',
// name: legendName
// });
// let isGreyTmp = this.isGreyScreen[index];
// this.$set(this.isGreyScreen, index, !isGreyTmp);
// }
//点击图表某一个legend，图表只显示当前点击的曲线或柱状图，其它隐藏，再次点击已选中的legend ，显示全部
let curIsGrey=this.isGreyScreen[index];
if(this.echartModalStore){
@@ -715,11 +645,6 @@
//let str = `<div style='white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis;min-width:150px;max-width:600px;display:inline-block;line-height: 18px;font-size:12px;font-family: Roboto,Helvetica Neue,Arial,sans-serif;'>`;
let sum = 0;
params.forEach((item, i) => {
//alert('tooltip====='+JSON.stringify(item))
//let tip=legend.find((element)=>{
//alert('legend====='+JSON.stringify(element))
//return element.name == item.seriesName;
//});
let tip=legend[item.seriesIndex];
let color = self.bgColorList[item.seriesIndex];
if(i===0){
@@ -740,13 +665,6 @@
str += chartDataFormat.getUnit(chartInfo.unit?chartInfo.unit:2).compute(val,null,2);
str += `</div>`;
str += `</div>`;
/*str += `<div style='max-width:500px;display:inline-block;white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis;line-height: 18px;font-size:12px;font-family: Roboto,Helvetica Neue,Arial,sans-serif;'>`;
str +=`<span style='display:inline-block;margin-right:5px;border-radius:10px;width:15px;height:5px;background-color: ${item.color};}'></span>${tip?(tip.alias?tip.alias:tip.name):item.seriesName}: `;
str +=`</div>`;*/
// str +=`<div style="display: inline-block;max-width: 10px; min-width: 5px;line-height: 18px;"></div>`;
/*str += `<div style='max-width:90px;min-width:20px;display:inline-block;white-space:nowrap;overflow-x:hidden;text-overflow:ellipsis;line-height: 18px;font-size:12px;font-family: Roboto,Helvetica Neue,Arial,sans-serif;'>`;
str +=chartDataFormat.getUnit(chartInfo.unit?chartInfo.unit:2).compute(val,null,2);
str +=`</div>`;*/
});
if(self.data.type==='stackArea' || self.isStackArea){
sum = parseFloat(Number(sum).toFixed(2));
@@ -762,7 +680,6 @@
str +=`</div>`;
return str;
// return `<div style='width:100%;display:block;word-break:break-all;word-wrap:break-word;white-space:normal'><span style='display:inline-block;margin-right:5px;border-radius:10px;width:15px;height:5px;background-color: ${params[0].color};}'></span> ${params[0].seriesName}:${params[0].data[1]}</div>`;
},
},
legend: {
@@ -773,7 +690,6 @@
itemHeight:5,
itemWidth:15,
formatter:function(name){
//console.log('==========='+name);
if(!name){
return '';
}
@@ -805,9 +721,6 @@
tooltip:{
show:true,
formatter:function(params){
//alert(params.length);
//alert(JSON.stringify(params));
return `<div style='width:100%;display:block;word-break:break-all;word-wrap:break-word;white-space:normal'> ${params.name}</div>`;
},
},
@@ -815,8 +728,6 @@
orient:'vertical',
x:'center',
y:'bottom',
//top:'5%',
//bottom:0
},
grid: {
top: 30,
@@ -825,26 +736,10 @@
containLabel: true,
bottom:8,//156
},
/*
dataZoom: [{
type: 'slider',
show:true,
xAxisIndex: [0],
start: 0,
end: 100,
height:25,
bottom:10,//96
left:40,
right:48,
}
],*/
xAxis: {
type: 'time',
// boundaryGap: false,//line-false; bar-true;
//data: ['20190101', '20190102', '周三', '周四', '周五', '周六', '周日']
axisLabel: {
interval: '0',
//showMinLabel:false,
showMaxLabel:false,
rotate: 0,
formatter: function (value) {
@@ -1118,24 +1013,6 @@
var charNum = `${(chartWidth-100)/(txtWidth/str.length)}`;
return str.slice(0,charNum)+'...';
}
/*
if(txtWidth < (chartWidth-30)){
return str;
}else {
var charNum = `${(chartWidth-200)/(txtWidth/str.length)}`;//一行的字符数
charNum = parseInt(charNum);
if(str.length>charNum){
let num = `${str.length/charNum}`;
num = parseInt(num)+1;
for(let i=0;i<num;i++){
rlt += str.substring(charNum*i,charNum*(i+1))+'\n';
}
}else {
return str;
}
}
*/
//return rlt;
},
setColor(colorNum){
this.bgColorList = [];
@@ -1167,13 +1044,8 @@
this.legend = legend;
//设置高度 chart-table
this.$nextTick(() => {
const chartBox = document.getElementById('lineChartDiv'+this.chartIndex);
let height = Math.round(chartItem.height/10)*10;//图表高度四舍五入
if(height<this.minHeight){
height = this.minHeight;
}
chartBox.style.height = `${height-this.chartSpaceHeight}px`;
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;
@@ -1468,11 +1340,6 @@
}
}
});
/*
if (series.length && this.data.type === 4) {
series.push(sumData);
}
*/
this.setColor(legend.length);
this.initChart(this.data, series, this.$refs.screenShowArea, 'screen',legend);
}
@@ -1497,20 +1364,11 @@
height = this.minHeight;
}
chartBox.style.height = `${height-this.chartSpaceHeight}px`;
//const tableBox = document.getElementById('tableContainer');
// const chartBox = document.getElementById('lineChartDiv'+this.chartIndex);
//tableBox.style.height = `${height-75}px`;
});
this.clearData();
this.firstShow = false;
this.$refs['localLoading'+this.chartIndex].startLoading();
this.divFirstShow = true;
/*
if (this.echartStore) {
this.echartStore.showLoading();
}
*/
},
dealLegendAlias:function(legend,expression){
if(/\{\{.+\}\}/.test(expression)){
@@ -1538,15 +1396,6 @@
const mbNum = kbNum / 1000;
if (mbNum > 1000) {
const gbNum = mbNum / 1000;
/*
if (gbNum > 1000) {
const tbNum = gbNum / 1000;
if (tbNum > 1000) {
const pbNum = tbNum / 1000;
return `${pbNum.toFixed(2)}PB`;
}
return `${tbNum.toFixed(2)}TB`;
}*/
return `${gbNum.toFixed(2)}B`;
}
return `${mbNum.toFixed(2)}M`;
@@ -1559,14 +1408,6 @@
},
mounted() {
this.firstLoad = false;
/*
let Myecharts2 = echarts.init(document.getElementById('lineChartArea'));
console.log(Myecharts2);
setTimeout(function () {
Myecharts2.resize()
}, 500)
*/
},
beforeDestroy() {
this.clearChart();

3
nezha-fronted/src/main.js
View File

@@ -19,7 +19,7 @@ import plTable from 'pl-table'
import 'pl-table/themes/index.css'
import {post, get, put, del} from './http.js'
import {toTop, clickoutside, scrollBar, bottomBoxWindow,stringTimeParseToUnix,unixTimeParseToString} from './tools.js'
import {toTop, clickoutside, scrollBar, bottomBoxWindow, stringTimeParseToUnix, unixTimeParseToString, chartResizeTool} from './tools.js'
import Pagination from "./components/common/pagination"; //引入全局分页组件
@@ -81,6 +81,7 @@ Vue.prototype.$toTop = toTop; //toTop置顶按钮方法
Vue.prototype.$bottomBoxWindow = bottomBoxWindow; //底部上滑框控制
Vue.prototype.$stringTimeParseToUnix = stringTimeParseToUnix;
Vue.prototype.$unixTimeParseToString = unixTimeParseToString;
Vue.prototype.$chartResizeTool = chartResizeTool;
Vue.prototype.$tableHeight = { //列表页表格的高度
normal: 'calc(100% - 100px)', //常规高度，特例在下方定义
openSubList: { //打开二级列表后的高度

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

@@ -358,3 +358,80 @@ export function unixTimeParseToString(unixTime,fmt='yyyy-MM-dd hh:mm:ss'){
fmt = fmt.replace(RegExp.$1, (RegExp.$1.length==1) ? (o[k]) : (("00"+ o[k]).substr((""+ o[k]).length)));
return fmt;
}
//chart-resize工具
export const chartResizeTool = {
minHeight: 200, //图表最小高度
chartBlankHeight: 2, //图表空白占位高度
chartBlankWidth: 20, //图表空白占位宽度
containerBlankWidth: 25, //容器空白占位宽度（#listContainer的padding）
titleHeight: 28, //标题dom高度
stepHeight: 50, //单元高度
stepWidth(containerWidth) { //单元宽度，参数为容器总宽度
return (containerWidth-this.containerBlankWidth)/12;
},
calculateHeight(original) {
let height = Math.round(original/this.stepHeight)*this.stepHeight;
if (height < this.minHeight) {
height = this.minHeight;
}
return height-this.chartSpaceHeight;
},
start(vm, data, event) {
let shadow; //缩放时底部阴影dom
let box; //图表内容dom
try {
shadow = vm.$refs.resizeShadow;
} catch (e) {
shadow = vm.$refs[0].resizeShadow;
}
try {
box = vm.$refs.resizeBox;
} catch (e) {
box = vm.$refs[0].resizeBox;
}
let chartBlankWidth = this.chartBlankWidth;
let chartBlankHeight = this.chartBlankHeight;
let stepWidth = this.stepWidth(document.getElementById('listContainer').offsetWidth);
let stepHeight = this.stepHeight;
let containerAvailableWidth = document.getElementById('listContainer').offsetWidth-this.containerBlankWidth;
let mouseOriginalX = event.clientX; //鼠标初始坐标
let mouseOriginalY = event.clientY;
let originalHeight = data.height; //图表初始宽高
let originalWidth = stepWidth*data.span;
//console.info("mouseOrigX %s, mouseOrigY %s, chartOrigX %s, chartOrigY %s", mouseOriginalX, mouseOriginalY, originalHeight, originalWidth)
//1.激活背景阴影
shadow.classList.add("resize-shadow-active");
//2.鼠标移动时调整resize-box的宽高，同时监听宽高的变化，变化量每达到step的50%时改变resize-shadow的尺寸并重绘resize-box内容
document.addEventListener("mousemove", moveListener);
//3.鼠标松开，将resize-box宽高改为resize-shadow宽高，结束
document.addEventListener("mouseup", mouseupListener);
function moveListener(e) {
let mouseX = e.clientX;
let mouseY = e.clientY;
//调整resize-box的宽高
box.style.height = `${originalHeight+(mouseY-mouseOriginalY)-chartBlankHeight}px`;
box.style.width = `${originalWidth+(mouseX-mouseOriginalX)-chartBlankWidth}px`;
//监听宽高的变化，变化量每达到step的50%时改变resize-shadow的尺寸并重绘resize-box内容
let remainderWidth = (box.offsetWidth+chartBlankWidth)%stepWidth; //宽的余数
let remainderHeight = (box.offsetHeight+chartBlankHeight)%stepHeight; //高的余数
}
function mouseupListener(e) {
let remainderWidth = (box.offsetHeight+chartBlankHeight)%stepHeight; //高的余数
let remainderHeight = (box.offsetHeight+chartBlankHeight)%stepHeight; //高的余数
data.height = box.offsetHeight+chartBlankHeight;
data.span = (box.offsetWidth+chartBlankWidth)/(containerAvailableWidth/12);
//关闭背景阴影
shadow.classList.remove("resize-shadow-active");
document.removeEventListener("mousemove", moveListener);
document.removeEventListener("mouseup", mouseupListener);
}
function boxStepHandler(type, op) {
}
}
}