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

修改样式和部分报错信息。

Browse Source
This commit is contained in:
liushiting
2020-01-17 16:50:17 +08:00
parent 26e2bcf53f
commit 6d90aabf14
9 changed files with 982 additions and 825 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
nezha-fronted/index.html
View File

@@ -1,12 +1,21 @@
<!DOCTYPE html>
<html>
<head>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>nezha-fronted</title>
</head>
<body>
<style>
* {
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</body>
</html>

1
nezha-fronted/package.json
View File

@@ -16,6 +16,7 @@
"node-sass": "^4.13.0",
"vue": "^2.5.2",
"vue-i18n": "^8.15.1",
"vue-resource": "^1.5.1",
"vue-router": "^3.0.1",
"vuex": "^3.1.2",
"xterm": "^3.1.0"

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

@@ -1,7 +1,4 @@
* {
margin: 0;
padding: 0;
}
[v-cloak] {
display: none;
}
@@ -11,6 +8,9 @@ body {
html {
height: 100%;
}
li{
list-style-type:none ;
}
.content-box {
height: 100%;
}

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

@@ -1,4 +1,12 @@
/* ---------edit-chart-move--------- */
.clearfix:after{
display: block;
content: "";
clear: both;
}
.clearfix{
margin-bottom: 20px;
}
.chart-table {
width: 100%;
height: 100%;
@@ -6,32 +14,46 @@
position: relative;
background: #FFF;
border: 1px solid #d8dce1;
padding: 10px;
padding: 20px 30px;
margin-bottom: 10px;
.table-title {
font-family: Arial;
font-size: 18px;
font-weight:bold;
line-height: 30px;
}
.edit:after{
display: block;
content: "";
clear: both;
}
.edit {
// position: absolute;
// right: 40px;
// top: 5px;
// z-index: 10;
padding-right: 40px;
padding-bottom:9px;
background: $btn-light-background-color;
border-radius: 6px;;
border: 1px solid #ccc;
.set-icon {
display: inline-block;
cursor: pointer;
font-size: 14px;
margin-left: 15px;
color: #5aacff;
border: 0 none;
background: transparent;
padding: 5px 15px;
border-right: 1px solid #ccc;
}
.set-icon:last-child{
border-right: none !important;
}
.el-icon-refresh-right{
color: #F0BF84;
}
i{
font-size: 16px;
color: #000;
}
.list-icon {
float: left;
margin-right: 10px;
}
.show-icon {
cursor: pointer;

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

@@ -1,8 +1,8 @@
<style lang="scss">
@import './chart-table.scss';
<style lang="scss" scoped>
@import './chart-table.scss';
</style>
<template>
<div class="chart-table">
<div class="chart-table">
<div class="clearfix">
<div class="float-left table-title">
{{data.title}}
@@ -11,13 +11,13 @@
<div class="edit">
<!-- v-if="firstShow" -->
<div class="list-icon">
<span @click="refreshChart" :title="$t('dashboard.refresh')" class="set-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" >
<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">
@@ -31,29 +31,20 @@
<!--
<el-table size="small" :loading="tableLoading">-->
<el-table :data="seriesItem" height="350" border class="chart-table-col" v-loading="tableLoading">
<el-table-column prop="metric" :label="$t('dashboard.panel.chartTableColumn.metric')" sortable></el-table-column>
<el-table-column prop="label" :label="$t('dashboard.panel.chartTableColumn.label')" sortable></el-table-column>
<el-table-column prop="time" :label="$t('dashboard.panel.chartTableColumn.time')" width="145" sortable></el-table-column>
<el-table-column prop="value" :label="$t('dashboard.panel.chartTableColumn.value')" sortable></el-table-column>
<el-table-column prop="metric" :label="$t('dashboard.panel.chartTableColumn.metric')" ></el-table-column>
<el-table-column prop="label" :label="$t('dashboard.panel.chartTableColumn.label')" ></el-table-column>
<el-table-column prop="time" :label="$t('dashboard.panel.chartTableColumn.time')" width="145" ></el-table-column>
<el-table-column prop="value" :label="$t('dashboard.panel.chartTableColumn.value')" ></el-table-column>
</el-table>
</div>
<!--全屏-->
<el-dialog :title="$t('dashboard.panel.view')" :visible.sync="screenModal" width="96%" :before-close="handleClose">
<el-dialog :title="$t('dashboard.panel.view')" :visible.sync="screenModal" width="96%" >
<div class="clearfix element-top-border">
<div class="float-left table-title">
{{data.title}}
</div>
<div class="float-right edit">
<el-date-picker size="small" ref="calendar"
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 size="small" ref="calendar" 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>
<span @click="refreshChart" :title="$t('dashboard.refresh')" class="set-icon" @click.native="refreshChart">
<i class="el-icon-refresh-right"></i>
@@ -62,27 +53,27 @@
</div>
<div class="mt-10">
<el-table :data="seriesItem" height="350" border class="chart-table-col" v-loading="tableLoading">
<el-table-column prop="metric" :label="$t('dashboard.panel.chartTableColumn.metric')" sortable></el-table-column>
<el-table-column prop="label" :label="$t('dashboard.panel.chartTableColumn.label')" sortable></el-table-column>
<el-table-column prop="time" :label="$t('dashboard.panel.chartTableColumn.time')" width="145" sortable></el-table-column>
<el-table-column prop="value" :label="$t('dashboard.panel.chartTableColumn.value')" sortable></el-table-column>
<el-table-column prop="metric" :label="$t('dashboard.panel.chartTableColumn.metric')" ></el-table-column>
<el-table-column prop="label" :label="$t('dashboard.panel.chartTableColumn.label')" ></el-table-column>
<el-table-column prop="time" :label="$t('dashboard.panel.chartTableColumn.time')" width="145" ></el-table-column>
<el-table-column prop="value" :label="$t('dashboard.panel.chartTableColumn.value')" ></el-table-column>
</el-table>
</div>
<div class=" element-bottom-border" ></div>
<span slot="footer" class="dialog-footer" >
<div class=" element-bottom-border"></div>
<span slot="footer" class="dialog-footer">
<el-button @click="screenModal = false">{{$t('dashboard.panel.cancel')}}</el-button>
<el-button type="primary" @click="screenModal = false">{{$t('dashboard.panel.confirm')}}</el-button>
</span>
</el-dialog>
</div>
</div>
</template>
<script>
import bus from '../../libs/bus';
export default {
name: 'chartTable',
components: {
},
components: {},
props: {
// 看板id
panelId: {
@@ -119,7 +110,7 @@ export default {
width: 200,
sortable: true,
}, {
title: 'Label',//tag
title: 'Label', //tag
key: 'name',
minWidth: 200,
sortable: true,
@@ -135,11 +126,10 @@ export default {
sortable: true,
render: (h, params) => h('span', this.getNumStr(params.row.value)),
}],
searchTime:[new Date().setHours(new Date().getHours()-1),new Date()],
oldSearchTime:[],
searchTime: [new Date().setHours(new Date().getHours() - 1), new Date()],
oldSearchTime: [],
pickerOptions: {
shortcuts: [
{
shortcuts: [{
text: this.$t("dashboard.panel.recOne"),
onClick(picker) {
const end = new Date();
@@ -147,7 +137,7 @@ export default {
start.setHours(start.getHours() - 1);
picker.$emit('pick', [start, end]);
}
},{
}, {
text: this.$t("dashboard.panel.recFour"),
onClick(picker) {
const end = new Date();
@@ -178,7 +168,7 @@ export default {
end.setSeconds(59);
picker.$emit('pick', [start, end]);
}
},{
}, {
text: this.$t("dashboard.panel.recSevenDay"),
onClick(picker) {
const end = new Date();
@@ -204,7 +194,7 @@ export default {
start.setMinutes(0);
picker.$emit('pick', [start, end]);
}
},{
}, {
text: this.$t("dashboard.panel.lastMonth"),
onClick(picker) {
const end = new Date();
@@ -220,8 +210,7 @@ export default {
},
};
},
computed: {
},
computed: {},
watch: {},
methods: {
showLoad() {
@@ -248,7 +237,7 @@ 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.tableLoading = true;
this.$emit('on-search-data', this.data.id,this.searchTime);
this.$emit('on-search-data', this.data.id, this.searchTime);
},
// 全屏查看
showAllScreen() {
@@ -303,5 +292,4 @@ export default {
},
beforeDestroy() {},
};
</script>

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

@@ -1,11 +1,19 @@
/* ---------edit-chart-move--------- */
.clearfix:after{
display: block;
content: "";
clear: both;
}
.clearfix{
margin-bottom: 20px;
}
.line-chart-block {
width: 100%;
height: 100%;
// min-height: 500px;
position: relative;
background: #FFF;
border: 1px solid #d8dce1;
padding: 20px 30px;
margin-bottom: 10px;
padding-bottom: 3px;
.line-area {
@@ -21,19 +29,34 @@
white-space: pre-wrap !important;
}
}
.edit:after{
display: block;
content: "";
clear: both;
}
.edit {
position: absolute;
right: 40px;
top: 15px;
z-index: 10;
background: $btn-light-background-color;
border-radius: 6px;;
border: 1px solid #ccc;
.set-icon {
display: inline-block;
cursor: pointer;
font-size: 14px;
margin-left: 15px;
color: #5aacff;
border: 0 none;
background: transparent;
padding: 5px 15px;
border-right: 1px solid #ccc;
}
.set-icon:last-child{
border-right: none !important;
}
.el-icon-refresh-right{
color: #F0BF84;
}
i{
font-size: 16px;
color: #000;
}
.list-icon {
float: left;

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

@@ -785,6 +785,7 @@ export default {
}
return num.toFixed(2);
},
handleClose(){},
/*
handleClose(done) {
/*
@@ -980,6 +981,13 @@ export default {
},
mounted() {
this.firstLoad = false;
let Myecharts2 = echarts.init(document.getElementById('lineChartArea'));
console.log(Myecharts2);
setTimeout(function () {
Myecharts2.resize()
}, 500)
},
beforeDestroy() {},
};

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

@@ -1,92 +1,6 @@
<style scoped>
.panel {
height: 100%;
}
.panel .el-table {
border-radius: 5px;
}
.content-right-option {
cursor: pointer;
display: inline-block;
margin-right: 6px;
}
.content-right-option .el-icon-delete {
color: #F98D9A;
}
.content-right-option .el-icon-delete:hover {
color: #D96D7A;
}
.content-right-option .el-icon-view {
color: #60BEFF;
}
.content-right-option .el-icon-view:hover {
color: #409EFF;
}
/* begin-chart list*/
.table-list {
margin-top: 10px;
overflow-y:auto;
height: 100%;
}
.box-content {
position: relative;
}
/* end-chart list*/
/* begin--Panel-自定义可编辑的el-select下拉框样式*/
.panel-dropdown-btn {
display: inline-block;
margin-left: 7px;
float: right;
color: #60BEFF;
font-size: 13px
}
.panel-dropdown-btn:hover {
color: #409EFF;
}
.panel-dropdown-btn-create {
display: inline-block;
float: left;
font-size: 13px;
color: #F98D9A;
width:100%;
}
.panel-dropdown-btn-create:hover {
color: #D96D7A;
}
.panel-dropdown-btn-delete {
color: #F98D9A;
font-size: 13px
}
.panel-dropdown-btn-delete:hover {
color: #D96D7A;
}
.panel-dropdown-error-message {
color: #F98D9A;
}
/* end--Panel-自定义可编辑的el-select下拉框样式*/
.panel-select-width{
width: 150px;
}
.panel-refresh-interval{
margin-right: 5px;
float: right;
}
.panel-refresh-interval-select{
width: 95px;
}
.panel-calendar{
float: right;
margin-right: 1px;
}
.top-tools .top-tool-btn-txt .nz-icon{
display: inline-block;
font-size: 12px;
margin-right:6px;
}
</style>
<template>
<div class="panel">
<div class="panel">
<div class="content-left">
<div class="sidebar-title">{{$t('dashboard.title')}}</div>
<div class="sidebar-info">
@@ -96,13 +10,15 @@
</div>
<div class="content-right">
<div class="top-tools">
<button @click="toAddChart" class="nz-btn nz-btn-size-normal nz-btn-style-normal float-right">
<button @click="toAddChart" class="nz-btn nz-btn-size-normal float-right">
<span class="top-tool-btn-txt">
<i class="nz-icon-create-square nz-icon"></i>
{{$t('overall.add')}}</span>
</button>
<div class="top-tool-search float-right"><search-input ref="searchInput" :searchMsg="searchMsg" @search="search" ></search-input></div>
<el-select class="panel-select-width" popper-class="" v-model="showPanel.id" placeholder="" size="small" @change="panelChange">
<div class="top-tool-search float-right">
<search-input ref="searchInput" :searchMsg="searchMsg" @search="search"></search-input>
</div>
<!-- <el-select class="panel-select-width" popper-class="" v-model="showPanel.id" placeholder="" size="small" @change="panelChange">
<el-option >
<span class="panel-dropdown-btn-create" @click.stop="toAdd" >{{$t('dashboard.panel.createPanelTitleSec')}}</span>
</el-option>
@@ -118,69 +34,81 @@
</span>
<span class="panel-dropdown-btn panel-dropdown-btn-delete" @click.stop="del(item)"><i class="el-icon-delete"></i></span>
</el-option>
</el-select>
<div class="panel-refresh-interval" >
</el-select> -->
<el-dropdown @command="panelChange" trigger="click">
<span class="el-dropdown-link">
Endpoint<i class="el-icon-arrow-down el-icon--right"></i>
</span>
<el-dropdown-menu class="nz-dashboard-dropdown" slot="dropdown">
<el-dropdown-item>{{$t('dashboard.panel.createPanelTitleSec')}}</el-dropdown-item>
<el-dropdown-item v-for="item in panelData" :key="item.id+1" :class="showPanel.id==item.id?'nz-dashboard-dropdown-bg':''" :command="item.id">{{item.name}}</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
<div class="panel-refresh-interval">
<div class="block">
<!--
<button type="button" class="nz-btn nz-btn-size-normal nz-btn-style-light nz-btn-style-square">
<span class="top-tool-btn-txt"><i class="el-icon-refresh-right"></i></span>
</button>
-->
<el-select class="panel-refresh-interval-select" placeholder="" v-model="interval" @change="selectInterval" size="small">
<el-option v-for="item in intervalList"
:value="item.value"
:label="item.name"
:key="item.value">{{item.name}}</el-option>
</el-select>
<!-- <el-select class="panel-refresh-interval-select" placeholder="" v-model="interval" @change="selectInterval" size="small">
<el-option v-for="item in intervalList" :value="item.value" :label="item.name" :key="item.value">{{item.name}}</el-option>
</el-select> -->
<!-- 刷新 -->
<div class="refresh">
<span style="cursor:pointer;" class="nz-dashboard-refresh">
<i class="nz-icon nz-icon-refresh" @click="Refresh()"></i>
</span>
<el-popover v-model="visible" placement="bottom-start" width="200" trigger="click">
<ul class="popover_ul">
<li v-for="i in intervalList" :style="{color:interval==i.value?'#31749C':''}" :key="i.value+i.name" @click="selectInterval(i.value)">
{{i.value}}{{i.name}}
</li>
</ul>
<div style="cursor:pointer" slot="reference">
<!-- {{interval}} -->
<i class="nz-icon nz-icon-arrow-down" ></i>
</div>
</el-popover>
</div>
</div>
<div class="panel-calendar" >
</div>
<div class="panel-calendar">
<div class="block">
<el-date-picker size="small" ref="calendar"
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 class="nz-dashboard-picker" size="mini" ref="calendar" 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>
</div>
</div>
</div>
<div class="table-list" >
<div class="table-list">
<div class="box-content">
<chart-list
@on-edit-chart="editData"
@on-refresh-time="refreshTime"
@on-remove-chart="removeData" ref="chartList"></chart-list>
<chart-list @on-edit-chart="editData" @on-refresh-time="refreshTime" @on-remove-chart="removeData" ref="chartList"></chart-list>
</div>
</div>
</div>
<panel-box :panel="panel" @reload="panelReload" @reloadForDel="panelReloadForDel" ref="panelBox"></panel-box>
<chart-box ref="addChartModal" @on-create-success="createSuccess" @on-delete-success="delChartOk"></chart-box>
</div>
</div>
</template>
<script>
import ChartBox from "./chartBox";
import ChartList from '../../charts/chart-list';
import bus from '../../../libs/bus';
export default {
<script>
import ChartBox from "./chartBox";
import ChartList from '../../charts/chart-list';
import bus from '../../../libs/bus';
export default {
name: "panel",
data() {
return {
visible: false,
rightBox: { //面板弹出框相关
show: false,
title: this.$t('dashboard.panel.createPanelTitle')
},
pickerOptions: {
shortcuts: [
{
shortcuts: [{
text: this.$t("dashboard.panel.recOne"),
onClick(picker) {
const end = new Date();
@@ -188,7 +116,7 @@
start.setHours(start.getHours() - 1);
picker.$emit('pick', [start, end]);
}
},{
}, {
text: this.$t("dashboard.panel.recFour"),
onClick(picker) {
const end = new Date();
@@ -219,7 +147,7 @@
end.setSeconds(59);
picker.$emit('pick', [start, end]);
}
},{
}, {
text: this.$t("dashboard.panel.recSevenDay"),
onClick(picker) {
const end = new Date();
@@ -245,7 +173,7 @@
start.setMinutes(0);
picker.$emit('pick', [start, end]);
}
},{
}, {
text: this.$t("dashboard.panel.lastMonth"),
onClick(picker) {
const end = new Date();
@@ -259,7 +187,7 @@
}
}]
},
searchTime: [new Date().setHours(new Date().getHours()-1),new Date()],
searchTime: [new Date().setHours(new Date().getHours() - 1), new Date()],
intervalTimer: null,
intervalList: [{
value: 0,
@@ -278,21 +206,21 @@
name: this.$t("dashboard.panel.refreshInterval.tenMinutes"),
}],
interval: 0,
showPanel:{//panel下拉列表
id:'',
name:''
showPanel: { //panel下拉列表
id: '',
name: ''
},
panel: {//新增panel
id:'',
panel: { //新增panel
id: '',
name: ''
},
chart: {
id:'',
id: '',
title: '',
type:'line',
span:12,
height:400,
elements:{
type: 'line',
span: 12,
height: 400,
elements: {
id: '',
expression: '',
type: ''
@@ -300,14 +228,15 @@
},
pageObj: {
pageNo: 1,
pageSize: -1,//此处获取所有数据，所以设置一个较大的值
total:0
pageSize: -1, //此处获取所有数据，所以设置一个较大的值
total: 0
},
chartsData: [],//中间部分图表相关数据
chartsData: [], //中间部分图表相关数据
panelData: [],
searchMsg: { //给搜索框子组件传递的信息
zheze_none: true,
searchLabelList: [/*
searchLabelList: [
/*
{
id: 1,
name: this.$t("dashboard.panel.searchItem.name"),
@@ -326,7 +255,7 @@
panelId: 0,
start_time: '',
end_time: '',
searchName:''
searchName: ''
},
panelId: 0,
//removeModal: false, // 删除弹出
@@ -334,18 +263,23 @@
//---图表相关参数--end
}
},
components:{
'chart-box':ChartBox,
'chart-list':ChartList
components: {
'chart-box': ChartBox,
'chart-list': ChartList
},
methods: {
//刷新
Refresh(){
this.getTableData();
},
//面板相关操作
panelChange(){
panelChange(val) {
//this.$refs.searchInput.select();
this.filter.panelId = this.showPanel.id;
this.filter.panelId = this.showPanel.id = val;
this.getData(this.filter);
},
del: function(u) {
del: function (u) {
this.$confirm(this.$t("tip.confirmDelete"), {
confirmButtonText: this.$t("tip.yes"),
cancelButtonText: this.$t("tip.no"),
@@ -353,9 +287,13 @@
}).then(() => {
this.$delete("panel?ids=" + u.id).then(response => {
if (response.code === 200) {
this.$message({duration: 1000, type: 'success', message: this.$t("tip.deleteSuccess")});
if(this.showPanel.id===u.id){
this.showPanel.id ='';
this.$message({
duration: 1000,
type: 'success',
message: this.$t("tip.deleteSuccess")
});
if (this.showPanel.id === u.id) {
this.showPanel.id = '';
}
this.getTableData();
this.rightBox.show = false;
@@ -365,35 +303,38 @@
})
});
},
toEdit: function(u) {
toEdit: function (u) {
this.panel = Object.assign({}, u);
this.$refs.panelBox.setTitle(this.$t("dashboard.panel.editPanelTitle"));
this.$refs.panelBox.show(true);
},
toAdd: function() {
toAdd: function () {
this.$refs.panelBox.show(true);
this.panel = {id: '', name: ''};
this.panel = {
id: '',
name: ''
};
this.$refs.panelBox.setTitle(this.$t("dashboard.panel.createPanelTitle"));
},
panelReload(){
panelReload() {
this.getTableData();
},
refreshTime(st,et){
refreshTime(st, et) {
const startTime = bus.timeFormate(st, 'yyyy-MM-dd hh:mm');
const endTime = bus.timeFormate(et, 'yyyy-MM-dd hh:mm');
this.searchTime = [startTime, endTime];
},
panelReloadForDel:function(){
if(this.showPanel.id===this.panel.id){
this.showPanel.id ='';
panelReloadForDel: function () {
if (this.showPanel.id === this.panel.id) {
this.showPanel.id = '';
}
this.getTableData();
},
/*图表相关操作--start*/
toAddChart:function(){
toAddChart: function () {
this.$refs.addChartModal.setTitle(this.$t("dashboard.panel.createChartTitle"));
this.$refs.addChartModal.show(true);
this.$refs.addChartModal.createData(this.showPanel.id);//初始化创建图表需要的初始数据
this.$refs.addChartModal.createData(this.showPanel.id); //初始化创建图表需要的初始数据
},
// 编辑图表信息,打开编辑弹窗
@@ -409,22 +350,26 @@
cancelButtonText: this.$t("tip.no"),
type: 'warning'
}).then(() => {
this.$delete("panel/"+data.panelId+"/charts?ids=" + data.id).then(response => {
this.$delete("panel/" + data.panelId + "/charts?ids=" + data.id).then(response => {
if (response.code === 200) {
this.$message({duration: 1000, type: 'success', message: this.$t("tip.deleteSuccess")});
this.getTableData();//删除相关图表后，刷新面板数据
this.$message({
duration: 1000,
type: 'success',
message: this.$t("tip.deleteSuccess")
});
this.getTableData(); //删除相关图表后，刷新面板数据
} else {
this.$message.error(response.msg);
}
})
});
},
delChartOk(){
delChartOk() {
this.filter.panelId = this.showPanel.id;
this.getData(this.filter);
},
// 图表创建成功，回调panel页面，进行图表的刷新
createSuccess(msg, data,params) {
createSuccess(msg, data, params) {
/*
if (data && data.code === 200) {
@@ -440,10 +385,10 @@
},
// 获取数据,用在子页面
getData(params) {
if( params.start_time===''||params.end_time===''){
if (params.start_time === '' || params.end_time === '') {
let now = new Date();
let endTimeTmp = bus.timeFormate(now, 'yyyy-MM-dd hh:mm:ss');
let startTimeTmp = bus.timeFormate(now.setHours(now.getHours()-1), 'yyyy-MM-dd hh:mm:ss');
let startTimeTmp = bus.timeFormate(now.setHours(now.getHours() - 1), 'yyyy-MM-dd hh:mm:ss');
params.start_time = startTimeTmp;
params.end_time = endTimeTmp;
}
@@ -462,7 +407,7 @@
},
/*时间条件查询--end*/
//公用操作
jumpTo(data,id) {
jumpTo(data, id) {
//this.$store.state.assetData.moduleData = data
//this.$store.state.assetData.selectedData = id
this.$router.push({
@@ -472,42 +417,46 @@
}
});
},
getTableData: function() {
getTableData: function () {
this.$get('panel?pageNo=1&pageSize=-1').then(response => {
if (response.code === 200) {
this.panelData = response.data.list;
if( response.data.list.length>0 ){
if(this.$store.state.showPanel.id!==0&&this.$store.state.showPanel.name!==''){
if (response.data.list.length > 0) {
if (this.$store.state.showPanel.id !== 0 && this.$store.state.showPanel.name !== '') {
this.showPanel.name = this.$store.state.showPanel.name;
this.showPanel.id = this.$store.state.showPanel.id;
}
if(this.showPanel.id===''){
if (this.showPanel.id === '') {
this.showPanel.id = response.data.list[0].id;
this.filter.panelId = this.showPanel.id;
this.getData(this.filter);
}
this.filter.panelId = this.showPanel.id;
}else {
this.showPanel.id ='';
this.filter.panelId='';
} else {
this.showPanel.id = '';
this.filter.panelId = '';
}
this.pageObj.total = response.data.total;
if(this.panel.id===''||this.panel.id===this.showPanel.id){
if (this.panel.id === '' || this.panel.id === this.showPanel.id) {
this.getData(this.filter);
}
this.$store.state.showPanel.id = 0;
this.$store.state.showPanel.name = '';
}
})
},
//定期刷新
selectInterval(val) {
this.visible=false;
clearInterval(this.intervalTimer);
if (val) {
this.interval = val;
const start = new Date(this.searchTime[1]);
const now = new Date();
const interval = Math.floor((now.getTime() - start.getTime()) / 1000);//计算当前结束时间到现在的间隔（秒）
if (interval >= 60) {//如果结束时间到现在超过1分钟，则
const interval = Math.floor((now.getTime() - start.getTime()) / 1000); //计算当前结束时间到现在的间隔（秒）
if (interval >= 60) { //如果结束时间到现在超过1分钟，则
this.getIntervalData(interval);
}
this.intervalTimer = setInterval(() => {
@@ -515,7 +464,7 @@
}, val * 1000);
}
},
getIntervalData(interval) {//interval:结束时间到现在的秒数
getIntervalData(interval) { //interval:结束时间到现在的秒数
const start = new Date(this.searchTime[0]);
const end = new Date(this.searchTime[1]);
start.setSeconds(start.getSeconds() + interval);
@@ -534,19 +483,19 @@
this.pageObj.pageSize = val;
this.getTableData();
},
search: function(searchObj) {
search: function (searchObj) {
this.searchLabel = {};
let containTitle = false;
for (let item in searchObj) {
if (searchObj[item]) {
this.$set(this.searchLabel, item, searchObj[item]);
if(item==='name'){
this.filter.searchName = searchObj[item];//此处就一个条件
containTitle= true;
if (item === 'name') {
this.filter.searchName = searchObj[item]; //此处就一个条件
containTitle = true;
}
}
}
if(!containTitle){
if (!containTitle) {
this.filter.searchName = '';
}
this.filter.panelId = this.showPanel.id;
@@ -556,8 +505,7 @@
created() {
this.getTableData();
},
mounted: function() {
},
mounted: function () {},
computed: {
refreshPanel() {
return this.$store.state.panelListReload;
@@ -571,5 +519,163 @@
}
}
}
}
}
</script>
<style scoped lang="scss">
.panel {
height: 100%;
background: #FCFCFC;
}
.panel .el-table {
border-radius: 5px;
}
.content-right-option {
cursor: pointer;
display: inline-block;
margin-right: 6px;
}
.content-right-option .el-icon-delete {
color: #F98D9A;
}
.content-right-option .el-icon-delete:hover {
color: #D96D7A;
}
.content-right-option .el-icon-view {
color: #60BEFF;
}
.content-right-option .el-icon-view:hover {
color: #409EFF;
}
/* begin-chart list*/
.table-list {
margin-top: 10px;
overflow-y: auto;
height: 100%;
}
.box-content {
position: relative;
}
/* end-chart list*/
/* begin--Panel-自定义可编辑的el-select下拉框样式*/
.panel-dropdown-btn {
display: inline-block;
margin-left: 7px;
float: right;
color: #60BEFF;
font-size: 13px
}
.panel-dropdown-btn:hover {
color: #409EFF;
}
.panel-dropdown-btn-create {
display: inline-block;
float: left;
font-size: 13px;
color: #F98D9A;
width: 100%;
}
.panel-dropdown-btn-create:hover {
color: #D96D7A;
}
.panel-dropdown-btn-delete {
color: #F98D9A;
font-size: 13px
}
.panel-dropdown-btn-delete:hover {
color: #D96D7A;
}
.panel-dropdown-error-message {
color: #F98D9A;
}
/* end--Panel-自定义可编辑的el-select下拉框样式*/
.panel-select-width {
width: 150px;
}
.panel-refresh-interval {
margin-right: 5px;
float: right;
}
.panel-refresh-interval-select {
width: 95px;
}
.panel-calendar {
float: right;
margin-right: 1px;
}
.top-tools .top-tool-btn-txt .nz-icon {
display: inline-block;
font-size: 12px;
margin-right: 6px;
}
.top-tools{
button{
background: $btn-light-background-color;
outline: none;
border: 1px solid #ccc;
}
}
.nz-dashboard-dropdown {
height: 300px;
overflow-y: auto;
li{
padding: 0 20px !important;
}
}
.nz-dashboard-dropdown-bg {
background: #409EFF;
color: #fff;
}
.el-dropdown-link {
cursor: pointer;
}
.refresh {
display: flex;
background: #fff;
border-radius: 4px;
align-items: center;
justify-content: space-around;
margin: 0 10px;
border: 1px solid #ccc;
background: $btn-light-background-color;
span{
display: inline-block;
padding: 2px 8px;
}
}
.popover_ul li{
padding: 10px 3px;
cursor: pointer;
}
.popover_ul li:hover{
background: #f5f7fa;
}
.nz-dashboard-refresh{
border-right:1px solid #ccc;
color: #F0BF84;
}
.nz-dashboard-picker {}
</style>

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

@@ -1,4 +1,5 @@
//import "./assets/css/main.css";
import './assets/stylus/index.scss'
import "./assets/css/nzIcon.css";
import 'element-ui/lib/theme-chalk/index.css';
import ElementUI from 'element-ui';
@@ -11,7 +12,6 @@ import store from './store/index';
import App from './App'
import router from './router'
import VueResource from 'vue-resource'
import './assets/stylus/index.scss'
import axios from 'axios';
import {post, get, put, del} from './http.js'