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

feat:图表全屏时添加定时刷新，修改图表legend交互等

Browse Source
This commit is contained in:
wangwenrui
2020-12-15 18:47:30 +08:00
parent d349756d75
commit 935d37e611
24 changed files with 212 additions and 71 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
nezha-fronted/src/assets/css/font/iconfont.eot
View File

Binary file not shown.

6
nezha-fronted/src/assets/css/font/iconfont.svg
View File

@@ -20,6 +20,12 @@ Created by iconfont
/>
<missing-glyph />
<glyph glyph-name="unlock" unicode="&#59113;" d="M439.44650239 141.46849166000004a33.32868125 33.32868125 0 0 1 35.31474761 35.25268364V282.66541904999997a35.31474761 35.31474761 0 0 1-70.62949614 0v-105.94424375a33.32868125 33.32868125 0 0 1 35.31474853-35.25268364zM577.1678125 517.8281253H222.40665386A145.231125 145.231125 0 0 1 77.54791636 372.96938780000005V83.37604166000006a145.231125 145.231125 0 0 1 144.8587375-144.8587375h434.45208364A145.231125 145.231125 0 0 1 801.65541011 83.37604166000006V372.96938780000005A145.231125 145.231125 0 0 1 656.8587375 517.8281253H577.1678125z m152.05822886-144.8587375V83.37604166000006a72.6155625 72.6155625 0 0 0-72.36730386-72.36730386h-434.45208364A72.6155625 72.6155625 0 0 0 149.97728511 83.37604166000006V372.96938780000005a72.6155625 72.6155625 0 0 0 72.42936875 72.42936875h434.45208364A72.6155625 72.6155625 0 0 0 729.22604136 372.96938780000005zM884.3875 641.95729166a124.12916636 124.12916636 0 0 1-247.94801011 9.3096875L636.12916636 641.95729166v-124.12916636H574.06458364V641.95729166a186.19375 186.19375 0 1 0 372.3875 0v-31.03229136a31.03229136 31.03229136 0 1 0-62.06458364 0V641.95729166z" horiz-adv-x="1024" />
<glyph glyph-name="lock" unicode="&#59112;" d="M522.84441845 152.13515832999997a33.32868125 33.32868125 0 0 1 35.31474853 35.25268364V293.33208572a35.31474761 35.31474761 0 0 1-70.62949614 0v-105.94424375a33.32868125 33.32868125 0 0 1 35.31474761-35.25268364zM660.56572948 528.49479197H305.80457084A145.231125 145.231125 0 0 1 160.94583334 383.63605447V94.04270832999998a145.231125 145.231125 0 0 1 144.8587375-144.8587375h434.45208364A145.231125 145.231125 0 0 1 885.05332709 94.04270832999998V383.63605447A145.231125 145.231125 0 0 1 740.25665448 528.49479197H660.56572948z m152.05822886-144.8587375V94.04270832999998a72.6155625 72.6155625 0 0 0-72.36730386-72.36730386h-434.45208364A72.6155625 72.6155625 0 0 0 233.37520209 94.04270832999998V383.63605447a72.6155625 72.6155625 0 0 0 72.42936875 72.42936875h434.45208364A72.6155625 72.6155625 0 0 0 812.62395834 383.63605447zM533.33333334 838.81770833a186.19375 186.19375 0 0 0 186.19375-186.19375v-124.12916636H657.4624997V652.62395833a124.12916636 124.12916636 0 0 1-247.94801011 9.3096875L409.20416698 652.62395833v-124.12916636H347.13958334V652.62395833a186.19375 186.19375 0 0 0 186.19375 186.19375z" horiz-adv-x="1024" />
<glyph glyph-name="batch-edit" unicode="&#58880;" d="M744.7552 374.88127999999995l-58.71616-58.7264-174.92992-174.91968c-0.34816-0.28672-0.7424-0.4352-1.08544-0.73728-1.42848-1.28-3.01568-2.37056-4.736-3.20512-0.5888-0.25088-1.18784-0.64512-1.87904-0.8448-2.22208-0.83456-4.63872-1.3824-7.15264-1.3824H437.59104a21.06368 21.06368 0 0 0-21.07392 21.0688v58.72128c0.0512 2.46272 0.50176 4.87936 1.3824 7.15264 0.25088 0.58368 0.59392 1.22368 0.93696 1.8688 0.8448 1.72544 1.87392 3.30752 3.15904 4.736l-0.05632-0.0512c0.30208 0.35328 0.39936 0.78848 0.74752 1.13664l174.96576 174.9248 58.71616 58.72128a21.04832 21.04832 0 0 0 29.75744 0.0512l58.6752-58.7264a21.00224 21.00224 0 0 0-0.04608-29.78816z m-132.29056-14.90944l-145.17248-145.16224 28.96384-28.91776 145.27488 145.17248-28.96384 28.96384-0.1024-0.05632z m29.8496 29.80352l28.96384-28.90752 28.91776 28.90752-28.91776 28.91264-28.96384-28.91264zM862.44352 659.54304H304.91648c-41.18528 0-75.05408-33.86368-75.05408-75.04896v-557.65504c0-41.1904 33.86368-75.05408 75.05408-75.05408h557.65504c41.1904 0 75.05408 33.86368 75.05408 75.05408V584.4940799999999c-0.13312 41.3184-33.86368 75.04896-75.18208 75.04896z m-4.18304-584.84736c0-24.05888-19.74272-43.80672-43.80672-43.80672H352.768c-24.05888 0-43.8016 19.74272-43.8016 43.80672V536.50944c0 24.05888 19.74272 43.8016 43.8016 43.8016h461.81376c24.05888 0 43.8016-19.74272 43.8016-43.8016v-461.81376h-0.12288zM263.33696 156.93312000000003h-20.00384c-24.05888 0-43.8016 19.74272-43.8016 43.8016V662.42048c0 24.05888 19.7376 43.8016 43.8016 43.8016h461.81376c24.05888 0 43.8016-19.74272 43.8016-43.8016v-38.57408h79.24224V710.4102399999999c0 41.18528-33.86368 75.04896-75.05408 75.04896H195.34336c-41.18528 0-75.04896-33.86368-75.04896-75.04896v-557.66016c0-41.18528 33.86368-75.04896 75.04896-75.04896h67.9936v79.232z" horiz-adv-x="1024" />
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 127 KiB

After

Width:  |  Height:  |  Size: 129 KiB

BIN
nezha-fronted/src/assets/css/font/iconfont.ttf
View File

Binary file not shown.

BIN
nezha-fronted/src/assets/css/font/iconfont.woff
View File

Binary file not shown.

BIN
nezha-fronted/src/assets/css/font/iconfont.woff2
View File

Binary file not shown.

20
nezha-fronted/src/assets/css/nzIcon.css
View File

File diff suppressed because one or more lines are too long

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

@@ -20,7 +20,7 @@
<span class="panel-info-corner-inner"></span>
</span>
</el-popover>
<el-dropdown trigger="click" v-show="!isPreview" class="nz-chart-top" :key="'chartDropdown'+chartIndex" v-clickoutside="clickos">
<el-dropdown trigger="click" v-show="!isPreview" class="nz-chart-top" :key="'chartDropdown'+chartIndex" v-clickoutside="clickos" :class="{'move-able':!isLock}">
<el-dropdown-menu style="display: none"></el-dropdown-menu>
<span class="el-dropdown-link chart-title" @click.stop="dropdownMenuShow=!dropdownMenuShow">
<span class="chart-title-text">{{chartInfo.title}}</span>
@@ -61,8 +61,9 @@
<div slot="title">
<span class="nz-dialog-title">{{data.title}}</span>
<div class="float-right panel-calendar dialog-tool">
<pick-time :refresh-data-func="dateChange" v-model="searchTime" :show-time-picker="false" :use-chart-unit="false" ref="pickTime" style="height: 28px;"></pick-time>
</div>
<span class="float-right dialog-tool" @click="screenRefreshChart"><i class="global-active-color nz-icon nz-icon-refresh"/></span>
<!-- <span class="float-right dialog-tool" @click="screenRefreshChart"><i class="global-active-color nz-icon nz-icon-refresh"/></span>-->
</div>
<alertMessageTable
:tableData="storedScreanTableData"
@@ -103,13 +104,13 @@
<div slot="title">
{{$t("project.endpoint.dialogTitle")}}
<div class="float-right panel-calendar dialog-tool" style="display: flex">
<pick-time :refresh-data-func="queryChartDate" :use-refresh="false" :use-chart-unit="false" v-model="searchTime" style="height: 28px;" @unitChange="chartUnitChange"></pick-time>
<pick-time :refresh-data-func="queryChartDate" :use-refresh="true" :use-chart-unit="false" v-model="searchTime" style="height: 28px;" @unitChange="chartUnitChange"></pick-time>
</div>
</div>
<chart ref="messageChart" name="alertMessageChart" :unit="chartUnit" ></chart>
</el-dialog>
</div>
<span class="vue-resizable-handle" @mousedown="startResize" v-if="!isPreview && data.resizable"></span>
<span class="vue-resizable-handle" @mousedown="startResize" v-if="!isPreview && data.resizable&&!isLock"></span>
</div>
</div>
</template>
@@ -150,7 +151,8 @@ export default {
default: 0,
},
chartInfo:{},
id:''
id:'',
isLock:{type:Boolean,default:false}
},
data() {
return {
@@ -548,7 +550,7 @@ export default {
if(this.searchLabel.orderBy){
queryParam.orderBy=this.searchLabel.orderBy;
}
this.startLoading(filterType);
// this.startLoading(filterType);
this.$get('/alert/message', queryParam).then(response => {
if (response.code == 200) {
this.storedTableData = response.data.list;
@@ -784,7 +786,9 @@ export default {
this.tableHeight = `calc(100% - 34px)`;
this.$nextTick(() => {
this.ps = container.querySelector(".el-table__body-wrapper")._ps_;
if(this.ps){
this.ps.update();
}
});
},
showLoad(chartItem) {
@@ -817,7 +821,6 @@ export default {
//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.searchTime = [...time];
this.seriesItemScreen = [];
for(let i=0;i<8;i++){
this.seriesItemScreen.push({//表格数据
@@ -828,7 +831,7 @@ export default {
value: '',//数值
});
}
this.startLoading('screen');
// this.startLoading('screen');
//this.tableLoading = true;
//this.firstShow = false;
this.$emit('on-search-data', this.data.id, this.searchTime);

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

@@ -7,7 +7,7 @@
<div class="resize-box" ref="resizeBox">
<div class="chart-container chart-detail" :id="'chartContainerDiv' + chartIndex" @mouseenter="caretShow = true" @mouseleave="caretShow = false">
<loading :ref="'localLoading' + chartIndex"></loading>
<div class="clearfix chart-title" :class="{'drag-disabled': !data.draggable}" :id="'chartTitle' + chartIndex">
<div class="clearfix chartTitle" :class="{'drag-disabled': !data.draggable,}" :id="'chartTitle' + chartIndex">
<el-popover
v-if="isError"
:close-delay="10"
@@ -20,7 +20,8 @@
<span class="panel-info-corner-inner"></span>
</span>
</el-popover>
<span class="el-dropdown-link chart-title-text" @click="dropdownMenuShow = !dropdownMenuShow">{{data.title}}</span>
<span :class="{'move-able':!isLock}"><span class="el-dropdown-link chart-title-text chart-title" @click="dropdownMenuShow = !dropdownMenuShow">{{data.title}}</span></span>
</div>
<div ref="chartInfo" class="chart-info" :id="'chartInfoDiv' + chartIndex" v-cloak>
<div ref="scrollbar" style="height: 100%;width:100%; overflow: auto;">
@@ -250,7 +251,7 @@
</div>
</div>
</div>
<span v-if="data.resizable" class="vue-resizable-handle" @mousedown="startResize"></span>
<span v-if="data.resizable&&!isLock" class="vue-resizable-handle" @mousedown="startResize"></span>
</div>
<!--preview -->
<chart-preview :panelId="panelId" ref="chartsPreview" ></chart-preview>
@@ -286,7 +287,8 @@
chartIndex:{
type: Number,
default: 0,
}
},
isLock:{type:Boolean,default:false}
},
data() {
return {

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

@@ -51,7 +51,7 @@
<span class="temp-dom"></span>
<draggable v-model="dataList" @start="start" @end="end" :move="move" :key
<draggable v-model="dataList" @start="start" @end="end" :move="move" :key :disabled="panelLock"
:scroll-sensitivity="150"
:options="{
group:{name:'chartGroup',pull:'false'},
@@ -75,6 +75,7 @@
@on-drag-chart="editChartForDrag"
@on-edit-chart-block="editData"
:panel-id="filter.panelId"
:is-lock="panelLock"
:chart-index="index"
:chart-data="item"></line-chart-block>
@@ -86,6 +87,7 @@
@on-drag-chart="editChartForDrag"
@on-edit-chart-block="editData"
:chart-data="item"
:is-lock="panelLock"
:panel-id="filter.panelId"
:chart-index="index"></chart-single-stat>
@@ -96,6 +98,7 @@
@on-duplicate-chart-block="duplicateChart"
@on-drag-chart="editChartForDrag"
@on-edit-chart-block="editData"
:is-lock="panelLock"
:panel-id="filter.panelId"
:chart-data="item"
:chart-index="index"></chart-table>
@@ -106,6 +109,7 @@
@on-remove-chart-block="removeChart"
@on-duplicate-chart-block="duplicateChart"
@on-drag-chart="editChartForDrag"
:is-lock="panelLock"
@on-edit-chart-block="editData"
:panel-id="filter.panelId"
:chart-data="item"
@@ -115,6 +119,7 @@
:from="from" :panel-id="filter.panelId"
:chart-index="index"
@on-refresh-data="refreshChart"
:is-lock="panelLock"
:chart-data="item"
:editChartId="'editChartId' + item.id"
></chart-detail>
@@ -125,6 +130,7 @@
@on-duplicate-chart-block="duplicateChart"
@on-drag-chart="editChartForDrag"
@on-edit-chart-block="editData"
:is-lock="panelLock"
:panel-id="filter.panelId"
:chart-data="item"
:chart-index="index"
@@ -135,6 +141,7 @@
:chart-index="index"
v-if="item.type === 'alertList'"
:editChartId="'editChartId' + item.id"
:is-lock="panelLock"
:chart-info="item"
@on-refresh-data="refreshChart"
@on-search-data="searchData"
@@ -170,7 +177,8 @@
additionalInfo:{},
draggable: {type: Boolean, default: true},
detail: Object,
from: {type: String}
from: {type: String},
panelLock:{type:Boolean,default:false}
},
components: {

15
nezha-fronted/src/components/charts/chart-single-stat.vue
View File

@@ -20,7 +20,7 @@
<span class="panel-info-corner-inner"></span>
</span>
</el-popover>
<el-dropdown trigger="click" class="nz-chart-top" :key="'chartDropdown'+chartIndex" v-clickoutside="clickos">
<el-dropdown trigger="click" class="nz-chart-top" :key="'chartDropdown'+chartIndex" v-clickoutside="clickos" :class="{'move-able':!isLock}">
<el-dropdown-menu style="display: none"></el-dropdown-menu>
<span class="el-dropdown-link chart-title" @click.stop="dropdownMenuShow=!dropdownMenuShow">
<span class="chart-title-text">{{chartData.title}}</span>
@@ -53,9 +53,10 @@
<div slot="title">
<span class="nz-dialog-title">{{data.title}}</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>
<!-- <time-picker ref="calendarPanel" class="nz-dashboard-picker" style="margin-top: -12px;" @change="dateChange"></time-picker>-->
<pick-time :refresh-data-func="dateChange" v-model="searchTime" :use-chart-unit="false" ref="pickTime" style="height: 28px;"></pick-time>
</div>
<span class="float-right dialog-tool" @click="screenRefreshChart" style="margin-right: 15px"><i class="global-active-color nz-icon nz-icon-refresh"/></span>
<!-- <span class="float-right dialog-tool" @click="screenRefreshChart" style="margin-right: 15px"><i class="global-active-color nz-icon nz-icon-refresh"/></span>-->
</div>
<div class="single-stat-screen-container" >
<div :style="{color:mapping?mapping.color.text:'#000',background:mapping?mapping.color.bac:'#fff'}" class="single-stat-content" id="chartScreenContainer" ref="chartScreenContainer">
@@ -66,7 +67,7 @@
<loading :ref="'localLoadingScreen'+chartIndex"></loading>
</el-dialog>
</div>
<span class="vue-resizable-handle" @mousedown="startResize"></span>
<span class="vue-resizable-handle" @mousedown="startResize" v-if="!isLock"></span>
</div>
</div>
</template>
@@ -100,7 +101,8 @@ export default {
chartIndex:{
type: Number,
default: 0,
}
},
isLock:{type:Boolean,default:false}
},
data() {
return {
@@ -343,7 +345,6 @@ export default {
},
//全屏时间条件查询
dateChange(time) {
this.searchTime = [...time];
this.seriesItemScreen = [];
this.serieSingleStat = "";
this.startLoading('screen');
@@ -383,7 +384,7 @@ export default {
this.searchTime = [];
this.$set(this.searchTime, 0, this.oldSearchTime[0]);
this.$set(this.searchTime, 1, this.oldSearchTime[1]);
this.$refs.calendarPanel.setCustomTime(this.searchTime);
// this.$refs.calendarPanel.setCustomTime(this.searchTime);
this.seriesItemScreen = this.seriesItem;
this.screenModal = true;

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

@@ -21,7 +21,7 @@
<span class="panel-info-corner-inner"></span>
</span>
</el-popover>
<el-dropdown trigger="click" class="nz-chart-top" :key="'chartDropdown'+chartIndex" v-clickoutside="clickos">
<el-dropdown trigger="click" class="nz-chart-top" :key="'chartDropdown'+chartIndex" v-clickoutside="clickos" :class="{'move-able':!isLock}">
<el-dropdown-menu style="display: none"></el-dropdown-menu>
<span class="el-dropdown-link chart-title" @click.stop="dropdownMenuShow=!dropdownMenuShow">
<span class="chart-title-text">{{chartData.title}}</span>
@@ -78,10 +78,11 @@
<div slot="title">
<span class="nz-dialog-title">{{data.title}}</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>
<!-- <time-picker ref="calendarPanel" class="nz-dashboard-picker" style="margin-top: -12px;"-->
<!-- @change="dateChange"></time-picker>-->
<pick-time :refresh-data-func="dateChange" v-model="searchTime" :use-chart-unit="false" ref="pickTime" style="height: 28px;"></pick-time>
</div>
<span class="float-right dialog-tool" @click="screenRefreshChart" style="margin-right: 15px"><i class="global-active-color nz-icon nz-icon-refresh"/></span>
<!-- <span class="float-right dialog-tool" @click="screenRefreshChart" style="margin-right: 15px"><i class="global-active-color nz-icon nz-icon-refresh"/></span>-->
</div>
<el-table style="margin-top: 10px;" class="nz-table" height="95%" :data="seriesItemScreen" border
@sort-change="tableDataSortScreen" tooltip-effect="light">
@@ -105,7 +106,7 @@
@pageSize='screenPageSize' ref="Pagination" :popper-append-to-body="false"></Pagination>
<loading :ref="'localLoadingScreen'+chartIndex"></loading>
</el-dialog>
<span class="vue-resizable-handle" @mousedown="startResize"></span>
<span class="vue-resizable-handle" @mousedown="startResize" v-if="!isLock"></span>
</div>
</div>
</div>
@@ -140,7 +141,8 @@
chartIndex: {
type: Number,
default: 0,
}
},
isLock:{type:Boolean,default:false}
},
data() {
return {
@@ -314,7 +316,6 @@
},
//全屏时间条件查询
dateChange(time) {
this.searchTime = [...time];
this.seriesItemScreen = [];
for (let i = 0; i < 8; i++) {
this.seriesItemScreen.push({//表格数据
@@ -361,7 +362,7 @@
this.searchTime = [];
this.$set(this.searchTime, 0, this.oldSearchTime[0]);
this.$set(this.searchTime, 1, this.oldSearchTime[1]);
this.$refs.calendarPanel.setCustomTime(this.searchTime);
// this.$refs.calendarPanel.setCustomTime(this.searchTime);
this.seriesItemScreen = this.seriesItem;
this.screenModal = true;

6
nezha-fronted/src/components/charts/chart-url.vue
View File

@@ -8,7 +8,7 @@
<div class="chart-url" :id="'chartUrlDiv'+chartIndex" @mouseenter="caretShow=true" @mouseleave="caretShow=false" >
<loading :ref="'localLoading'+chartIndex"></loading>
<div class="clearfix chartTitle" :class="{'dragTitle':dragTitleShow}" :id="'chartTitle'+chartIndex">
<el-dropdown trigger="click" class="nz-chart-top" :key="'chartDropdown'+chartIndex" v-clickoutside="clickos">
<el-dropdown trigger="click" class="nz-chart-top" :key="'chartDropdown'+chartIndex" v-clickoutside="clickos" :class="{'move-able':!isLock}">
<el-dropdown-menu style="display: none"></el-dropdown-menu>
<span class="el-dropdown-link chart-title" @click.stop="dropdownMenuShow=!dropdownMenuShow">
<span class="chart-title-text">{{chartData.title}}</span>
@@ -51,7 +51,7 @@
<loading :ref="'localLoadingScreen'+chartIndex"></loading>
</el-dialog>
</div>
<span class="vue-resizable-handle" @mousedown="startResize"></span>
<span class="vue-resizable-handle" @mousedown="startResize" v-if="!isLock"></span>
</div>
</div>
</template>
@@ -86,7 +86,7 @@ export default {
type: Number,
default: 0,
},
isLock:{type:Boolean,default:false}
},
data() {
return {

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

@@ -276,13 +276,13 @@
height: 100%;
position: relative;
background-color: white;
.chart-title:hover {
.chartTitle:hover {
background-color:#d8dce1;
}
.chart-title:not(.drag-disabled) {
cursor: move;
}
.chart-title {
//.chartTitle:not(.drag-disabled) {
// cursor: move;
//}
.chartTitle {
text-align: center;
width: 100%;
line-height: 30px;
@@ -291,7 +291,7 @@
.nz-chart-top{
width:100%;
}
.el-dropdown-link {
.move-able .el-dropdown-link {
cursor: move;
}
.nz-icon-arrow-down {
@@ -505,7 +505,7 @@
.nz-chart-top{
width:100%;
}
.el-dropdown-link {
.move-able .el-dropdown-link {
cursor: move;
}
.nz-icon-arrow-down {

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

@@ -34,7 +34,7 @@
</span>
</el-popover>
</span>
<el-dropdown trigger="click" class="nz-chart-top" :key="'chartDropdown'+chartIndex" v-clickoutside="clickos">
<el-dropdown trigger="click" class="nz-chart-top" :key="'chartDropdown'+chartIndex" v-clickoutside="clickos" :class="{'move-able':!isLock}">
<el-dropdown-menu style="display: none"></el-dropdown-menu>
<span class="el-dropdown-link chart-title" @click.stop="dropdownMenuShow=!dropdownMenuShow">
<span class="chart-title-text">{{chartData.title}}</span>
@@ -130,10 +130,10 @@
<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>
<!--<pick-time :refresh-data-func="dateChange" v-model="searchTime" :use-chart-unit="false" ref="pickTime"></pick-time>-->
<!-- <time-picker ref="calendarPanel" class="nz-dashboard-picker" style="margin-top: -12px;" @change="dateChange"></time-picker>-->
<pick-time :refresh-data-func="dateChange" v-model="searchTime" :use-chart-unit="false" ref="pickTime" style="height: 28px;"></pick-time>
</div>
<span class="float-right dialog-tool" @click="screenRefreshChart" style="margin-right: 15px"><i class="global-active-color nz-icon nz-icon-refresh"/></span>
<!-- <span class="float-right dialog-tool" @click="screenRefreshChart" style="margin-right: 15px"><i class="global-active-color nz-icon nz-icon-refresh"/></span>-->
</div>
<div class="line-area" ref="screenShowArea" id="screenShowArea" style="margin-top:0px;" @mouseenter="mouseEnterFullChart" @mouseleave="mouseLeaveFullChart"></div>
<div class="chart-no-data" v-show="noData">No Data</div>
@@ -174,7 +174,7 @@
<loading :ref="'localLoadingScreen'+chartIndex"></loading>
</el-dialog>
</div>
<span class="vue-resizable-handle" @mousedown="startResize" v-if="filter.from != 'alertRule'"></span>
<span class="vue-resizable-handle" @mousedown="startResize" v-if="filter.from != 'alertRule'&&!isLock"></span>
</div>
</div>
</template>
@@ -218,7 +218,8 @@
default:false,
},
tempDom: Object,
from: {type: String}
from: {type: String},
isLock:{type:Boolean,default:false}
},
computed: {
getButtonCode() {
@@ -344,8 +345,25 @@
})
}
},
clickLegend(legendName,index){
let curIsGrey=this.isGrey[index];
let echart=getChart(this.chartIndex)
if(echart) {
if(curIsGrey){
echart.dispatchAction({
type: 'legendSelect',
name: legendName
})
}else{
echart.dispatchAction({
type: 'legendUnSelect',
name: legendName
})
}
this.$set(this.isGrey,index,!curIsGrey)
}
},
clickLegend2(legendName,index){
//点击图表某一个legend，图表只显示当前点击的曲线或柱状图，其它隐藏，再次点击已选中的legend ，显示全部
let curIsGrey=this.isGrey[index];
if(getChart(this.chartIndex)){
@@ -393,6 +411,23 @@
}
},
clickScreenLegend(legendName,index){
let curIsGrey=this.isGreyScreen[index];
if(this.echartModalStore) {
if(curIsGrey){
this.echartModalStore.dispatchAction({
type: 'legendSelect',
name: legendName
})
}else{
this.echartModalStore.dispatchAction({
type: 'legendUnSelect',
name: legendName
})
}
this.$set(this.isGreyScreen,index,!curIsGrey)
}
},
clickScreenLegend2(legendName,index){
//点击图表某一个legend，图表只显示当前点击的曲线或柱状图，其它隐藏，再次点击已选中的legend ，显示全部
let curIsGrey=this.isGreyScreen[index];
if(this.echartModalStore){
@@ -645,8 +680,7 @@
if(i===0){
let value=item.data[0];
let t_date = new Date(value);
str += [t_date.getFullYear(), t_date.getMonth() + 1, t_date.getDate()].join('-') + " "
+ [t_date.getHours(), t_date.getMinutes(),t_date.getSeconds()].join(':');
str += bus.timeFormate(t_date)
str +=`<br/>`;
}
let val =item.data[1]?parseFloat(Number(item.data[1]).toFixed(2)):'';
@@ -879,8 +913,7 @@
if(i===0){
let value=item.data[0];
let t_date = new Date(value);
str += [t_date.getFullYear(), t_date.getMonth() + 1, t_date.getDate()].join('-') + " "
+ [t_date.getHours(), t_date.getMinutes(),t_date.getSeconds()].join(':');
str += bus.timeFormate(t_date)
str +=`<br/>`;
}
let val = parseFloat(Number(item.data[1]).toFixed(2));
@@ -1043,8 +1076,7 @@
if(i===0){
let value=item.data[0];
let t_date = new Date(value);
str += [t_date.getFullYear(), t_date.getMonth() + 1, t_date.getDate()].join('-') + " "
+ [t_date.getHours(), t_date.getMinutes(),t_date.getSeconds()].join(':');
str += bus.timeFormate(t_date)
str +=`<br/>`;
}
let val = parseFloat(Number(item.data[1]).toFixed(2));
@@ -1262,7 +1294,7 @@
//this.searchTime = this.oldSearchTime;
this.$set(this.searchTime, 0, this.oldSearchTime[0]);
this.$set(this.searchTime, 1, this.oldSearchTime[1]);
this.$refs.calendarPanel.setCustomTime(this.searchTime);
// this.$refs.calendarPanel.setCustomTime(this.searchTime);
this.screenModal = true;
this.isGreyScreen=[];
@@ -1300,7 +1332,6 @@
});
},
dateChange(time) {
this.searchTime = [...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();

2
nezha-fronted/src/components/charts/richTextEditor.vue
View File

@@ -11,7 +11,7 @@
export default {
name: "richTextEditor",
props:{
editData:String
editData:String,
},
data(){
return {

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

@@ -8,7 +8,7 @@
<div class="chart-text" :id="'chartSingleStatDiv'+chartIndex" @mouseenter="caretShow=true" @mouseleave="caretShow=false">
<loading :ref="'localLoading'+chartIndex"></loading>
<div class="clearfix chartTitle" :class="{'dragTitle':dragTitleShow}" :id="'chartTitle'+chartIndex">
<el-dropdown trigger="click" class="nz-chart-top" :key="'chartDropdown'+chartIndex" v-clickoutside="clickos">
<el-dropdown trigger="click" class="nz-chart-top" :key="'chartDropdown'+chartIndex" v-clickoutside="clickos" :class="{'move-able':!isLock}">
<el-dropdown-menu style="display: none"></el-dropdown-menu>
<span class="el-dropdown-link chart-title" @click.stop="dropdownMenuShow=!dropdownMenuShow">
<span class="chart-title-text">{{chartData.title}}</span>
@@ -52,7 +52,7 @@
<loading :ref="'localLoadingScreen'+chartIndex"></loading>
</el-dialog>
</div>
<span class="vue-resizable-handle" @mousedown="startResize"></span>
<span class="vue-resizable-handle" @mousedown="startResize" v-if="!isLock"></span>
</div>
</div>
</template>
@@ -83,7 +83,8 @@
chartIndex:{
type: Number,
default: 0,
}
},
isLock:{type:Boolean,default:false}
},
data() {
return {

6
nezha-fronted/src/components/common/bottomBox/tabs/panelTab.vue
View File

@@ -55,6 +55,9 @@
<i class="nz-icon-create-square nz-icon"></i>
</button>
</template>
<button type="button" class="nz-btn nz-btn-size-normal nz-btn-style-light " style="margin-left: 20px;" v-if="from == $CONSTANTS.fromRoute.asset||from == $CONSTANTS.fromRoute.model" @click="panelLock=!panelLock"><i :class="{'nz-icon nz-icon-lock':panelLock,'nz-icon nz-icon-unlock':!panelLock}"></i></button>
<button :title="$t('overall.syncChart')" @click="syncChart" style="margin-left: 20px;" v-has="['model_chart_sync', 'asset_chart_sync']" v-if="from == $CONSTANTS.fromRoute.asset||from == $CONSTANTS.fromRoute.model"
class="nz-btn nz-btn-size-normal nz-btn-style-light ">
<i class="nz-icon-sync nz-icon"></i>
@@ -84,7 +87,7 @@
<div ref="dashboardScrollbar" style="height: 100%; overflow: auto;">
<div class="box-content">
<chart-list :additional-info="obj" :detail="detail" :draggable="draggable" :from="from" :is-model="from == $CONSTANTS.fromRoute.model" @on-edit-chart="editChart"
@on-refresh-time="refreshTime" @on-remove-chart="delChart" ref="chartList"></chart-list>
@on-refresh-time="refreshTime" @on-remove-chart="delChart" ref="chartList" :panel-lock="panelLock"></chart-list>
</div>
</div>
</div>
@@ -112,6 +115,7 @@
},
data() {
return {
panelLock:true,
showTopBtn: false, //top按钮
visible: false,
rightBox: { //面板弹出框相关

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

@@ -614,3 +614,9 @@ export const tableSet = {
export function blankPromise() {
return new Promise(resolve => {resolve();});
}
export function clickLegend(echart,legendName,index){
if(echart){
}
}

12
nezha-fronted/src/components/common/login.vue
View File

@@ -25,6 +25,9 @@
<i v-if="lang != 'cn'" @click="changeLang('cn')" class="nz-icon nz-icon-lang-zh"></i>
</div>
</div>
<div class="login-foot-buildOn">
<span><a target="_blank" rel="noopener norefferrer" href='https://prometheus.io'>@build on prometheus</a></span>
</div>
</div>
</div>
</template>
@@ -225,6 +228,15 @@ export default {
left: 50%;
transform: translateX(-50%);
}
.login-foot-buildOn{
width: 460px;
text-align: center;
padding-top: 45px;
a{
color: white;
text-decoration: none;
}
}
.nz-icon-arrow-down, .nz-icon-arrow-up {
position: absolute;
font-size: 18px;

35
nezha-fronted/src/components/common/project/popData/lineChart.vue
View File

@@ -279,6 +279,24 @@
}
},
clickLegend(legendName,index){
let curIsGrey=this.isGrey[index];
let echart = getChart(this.chartIndex)
if(echart){
if(curIsGrey){
echart.dispatchAction({
type: 'legendSelect',
name: legendName
});
}else{
echart.dispatchAction({
type: 'legendUnSelect',
name: legendName
});
}
this.$set(this.isGrey,index,!curIsGrey)
}
},
clickLegend2(legendName,index){
//点击图表某一个legend，图表只显示当前点击的曲线或柱状图，其它隐藏，再次点击已选中的legend ，显示全部
let curIsGrey=this.isGrey[index];
if(getChart(this.chartIndex)){
@@ -326,6 +344,23 @@
}
},
clickScreenLegend(legendName,index){
let curIsGrey=this.isGreyScreen[index];
if(this.echartModalStore) {
if(curIsGrey){
this.echartModalStore.dispatchAction({
type: 'legendSelect',
name: legendName
})
}else{
this.echartModalStore.dispatchAction({
type: 'legendUnSelect',
name: legendName
})
}
this.$set(this.isGreyScreen,index,!curIsGrey)
}
},
clickScreenLegend2(legendName,index){
//点击图表某一个legend，图表只显示当前点击的曲线或柱状图，其它隐藏，再次点击已选中的legend ，显示全部
let curIsGrey=this.isGreyScreen[index];
if(this.echartModalStore){

5
nezha-fronted/src/components/page/dashboard/explore/promqlInput.vue
View File

@@ -153,13 +153,14 @@
dropDownVisible:function(n,o){
if (this.styleType == 1) {
if (n) {
this.metricOptions = this.$parent.$parent.getMetricOptions();
this.metricOptions = this.$parent.getMetricOptions();
} else {
this.metricOptions = [];
}
} else if (this.styleType == 2) {
if (n) {
this.metricOptions = this.$parent.$parent.$parent.$parent.getMetricOptions();
console.log(this.$parent.$parent)
this.metricOptions = this.$parent.$parent.$parent.getMetricOptions();
} else {
this.metricOptions = [];
}

17
nezha-fronted/src/components/page/dashboard/overview/chart.vue
View File

@@ -247,6 +247,23 @@
return color;
},
clickLegend(legendName,index){
let curIsGrey=this.legend[index].isGray;
if(this.chart){
if(curIsGrey){
this.chart.dispatchAction({
type: 'legendSelect',
name: legendName
});
}else{
this.chart.dispatchAction({
type: 'legendUnSelect',
name: legendName
});
}
this.$set(this.legend,index,!curIsGrey)
}
},
clickLegend2(legendName,index){
let curIsGrey=this.legend[index].isGray;
if(this.chart){
this.legend.forEach((item,i)=>{

7
nezha-fronted/src/components/page/dashboard/panel.vue
View File

@@ -67,6 +67,7 @@
export: 'panel_chart_export'
}"
@afterImport="dateChange"
class="margin-r-20"
>
<template slot="optionZone">
<button :title="$t('overall.createChart')" @click="addChart" v-has="'panel_chart_toAdd'"
@@ -75,13 +76,16 @@
</button>
</template>
</export-excel>
<div class="relative-position ">
<button type="button" class="nz-btn nz-btn-size-normal nz-btn-style-light " @click="panelLock=!panelLock"><i :class="{'nz-icon nz-icon-lock':panelLock,'nz-icon nz-icon-unlock':!panelLock}"></i></button>
</div>
</div>
</template>
</div>
<div class="table-list" id="tableList">
<div ref="dashboardScrollbar" style="height: 100%; overflow: auto;">
<div class="box-content">
<chart-list :from="$CONSTANTS.fromRoute.panel" @on-edit-chart="editChart" @on-refresh-time="refreshTime" @on-remove-chart="delChart" ref="chartList"></chart-list>
<chart-list :from="$CONSTANTS.fromRoute.panel" @on-edit-chart="editChart" @on-refresh-time="refreshTime" @on-remove-chart="delChart" ref="chartList" :panel-lock="panelLock"></chart-list>
</div>
</div>
</div>
@@ -108,6 +112,7 @@
name: "panel",
data() {
return {
panelLock:true,
showTopBtn: false, //top按钮
visible: false,
rightBox: { //面板弹出框相关

2
nezha-fronted/src/libs/bus.js
View File

@@ -66,7 +66,7 @@ export default new Vue({
}
return `${yy}${mm}${dd}`;
},
timeFormate(date, fmt) {
timeFormate(date, fmt='yyyy-MM-dd hh:mm:ss') {
const time = new Date(date);
let fm = fmt;
// fmt 自定义格式,如：yy-MM-dd