修改样式和部分报错信息。
This commit is contained in:
@@ -1,12 +1,21 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html>
|
<html>
|
||||||
<head>
|
|
||||||
<meta charset="utf-8">
|
<head>
|
||||||
<meta name="viewport" content="width=device-width,initial-scale=1.0">
|
<meta charset="utf-8">
|
||||||
<title>nezha-fronted</title>
|
<meta name="viewport" content="width=device-width,initial-scale=1.0">
|
||||||
</head>
|
<title>nezha-fronted</title>
|
||||||
<body>
|
<style>
|
||||||
<div id="app"></div>
|
* {
|
||||||
<!-- built files will be auto injected -->
|
margin: 0;
|
||||||
</body>
|
padding: 0;
|
||||||
</html>
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<div id="app"></div>
|
||||||
|
<!-- built files will be auto injected -->
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
@@ -16,6 +16,7 @@
|
|||||||
"node-sass": "^4.13.0",
|
"node-sass": "^4.13.0",
|
||||||
"vue": "^2.5.2",
|
"vue": "^2.5.2",
|
||||||
"vue-i18n": "^8.15.1",
|
"vue-i18n": "^8.15.1",
|
||||||
|
"vue-resource": "^1.5.1",
|
||||||
"vue-router": "^3.0.1",
|
"vue-router": "^3.0.1",
|
||||||
"vuex": "^3.1.2",
|
"vuex": "^3.1.2",
|
||||||
"xterm": "^3.1.0"
|
"xterm": "^3.1.0"
|
||||||
|
|||||||
@@ -1,7 +1,4 @@
|
|||||||
* {
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
[v-cloak] {
|
[v-cloak] {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
@@ -11,6 +8,9 @@ body {
|
|||||||
html {
|
html {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
|
li{
|
||||||
|
list-style-type:none ;
|
||||||
|
}
|
||||||
.content-box {
|
.content-box {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,4 +1,12 @@
|
|||||||
/* ---------edit-chart-move--------- */
|
/* ---------edit-chart-move--------- */
|
||||||
|
.clearfix:after{
|
||||||
|
display: block;
|
||||||
|
content: "";
|
||||||
|
clear: both;
|
||||||
|
}
|
||||||
|
.clearfix{
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
.chart-table {
|
.chart-table {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
@@ -6,32 +14,46 @@
|
|||||||
position: relative;
|
position: relative;
|
||||||
background: #FFF;
|
background: #FFF;
|
||||||
border: 1px solid #d8dce1;
|
border: 1px solid #d8dce1;
|
||||||
padding: 10px;
|
padding: 20px 30px;
|
||||||
margin-bottom: 10px;
|
margin-bottom: 10px;
|
||||||
.table-title {
|
.table-title {
|
||||||
font-family: Arial;
|
font-family: Arial;
|
||||||
font-size: 18px;
|
font-size: 18px;
|
||||||
font-weight:bold;
|
font-weight:bold;
|
||||||
|
line-height: 30px;
|
||||||
|
}
|
||||||
|
.edit:after{
|
||||||
|
display: block;
|
||||||
|
content: "";
|
||||||
|
clear: both;
|
||||||
}
|
}
|
||||||
.edit {
|
.edit {
|
||||||
// position: absolute;
|
// position: absolute;
|
||||||
// right: 40px;
|
// right: 40px;
|
||||||
// top: 5px;
|
// top: 5px;
|
||||||
// z-index: 10;
|
// z-index: 10;
|
||||||
padding-right: 40px;
|
background: $btn-light-background-color;
|
||||||
padding-bottom:9px;
|
border-radius: 6px;;
|
||||||
|
border: 1px solid #ccc;
|
||||||
.set-icon {
|
.set-icon {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
font-size: 14px;
|
padding: 5px 15px;
|
||||||
margin-left: 15px;
|
border-right: 1px solid #ccc;
|
||||||
color: #5aacff;
|
|
||||||
border: 0 none;
|
}
|
||||||
background: transparent;
|
.set-icon:last-child{
|
||||||
|
border-right: none !important;
|
||||||
|
}
|
||||||
|
.el-icon-refresh-right{
|
||||||
|
color: #F0BF84;
|
||||||
|
}
|
||||||
|
i{
|
||||||
|
font-size: 16px;
|
||||||
|
color: #000;
|
||||||
}
|
}
|
||||||
.list-icon {
|
.list-icon {
|
||||||
float: left;
|
float: left;
|
||||||
margin-right: 10px;
|
|
||||||
}
|
}
|
||||||
.show-icon {
|
.show-icon {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
|||||||
@@ -1,307 +1,295 @@
|
|||||||
<style lang="scss">
|
<style lang="scss" scoped>
|
||||||
@import './chart-table.scss';
|
@import './chart-table.scss';
|
||||||
</style>
|
</style>
|
||||||
<template>
|
<template>
|
||||||
<div class="chart-table">
|
<div class="chart-table">
|
||||||
<div class="clearfix">
|
<div class="clearfix">
|
||||||
<div class="float-left table-title">
|
<div class="float-left table-title">
|
||||||
{{data.title}}
|
{{data.title}}
|
||||||
</div>
|
</div>
|
||||||
<div class="float-right">
|
<div class="float-right">
|
||||||
<div class="edit">
|
<div class="edit">
|
||||||
<!-- v-if="firstShow" -->
|
<!-- v-if="firstShow" -->
|
||||||
<div class="list-icon">
|
<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>
|
<i class="el-icon-refresh-right"></i>
|
||||||
</span>
|
</span>
|
||||||
<span @click="editChart" :title="$t('dashboard.edit')" class="set-icon">
|
<span @click="editChart" :title="$t('dashboard.edit')" class="set-icon">
|
||||||
<i class="el-icon-edit-outline"></i>
|
<i class="el-icon-edit-outline"></i>
|
||||||
</span>
|
</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>
|
<i class="el-icon-delete"></i>
|
||||||
</span>
|
</span>
|
||||||
<span @click="showAllScreen" :title="$t('dashboard.screen')" class="set-icon">
|
<span @click="showAllScreen" :title="$t('dashboard.screen')" class="set-icon">
|
||||||
<i class="el-icon-full-screen"></i>
|
<i class="el-icon-full-screen"></i>
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="mt-10">
|
<div class="mt-10">
|
||||||
<!--
|
<!--
|
||||||
<el-table size="small" :loading="tableLoading">-->
|
<el-table size="small" :loading="tableLoading">-->
|
||||||
<el-table :data="seriesItem" height="350" border class="chart-table-col" v-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="metric" :label="$t('dashboard.panel.chartTableColumn.metric')" ></el-table-column>
|
||||||
<el-table-column prop="label" :label="$t('dashboard.panel.chartTableColumn.label')" sortable></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" sortable></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')" sortable></el-table-column>
|
<el-table-column prop="value" :label="$t('dashboard.panel.chartTableColumn.value')" ></el-table-column>
|
||||||
</el-table>
|
</el-table>
|
||||||
</div>
|
</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="clearfix element-top-border">
|
||||||
<div class="float-left table-title">
|
<div class="float-left table-title">
|
||||||
{{data.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>
|
||||||
|
<span @click="refreshChart" :title="$t('dashboard.refresh')" class="set-icon" @click.native="refreshChart">
|
||||||
|
<i class="el-icon-refresh-right"></i>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="float-right edit">
|
<div class="mt-10">
|
||||||
<el-date-picker size="small" ref="calendar"
|
<el-table :data="seriesItem" height="350" border class="chart-table-col" v-loading="tableLoading">
|
||||||
format="yyyy/MM/dd HH:mm"
|
<el-table-column prop="metric" :label="$t('dashboard.panel.chartTableColumn.metric')" ></el-table-column>
|
||||||
@change="dateChange"
|
<el-table-column prop="label" :label="$t('dashboard.panel.chartTableColumn.label')" ></el-table-column>
|
||||||
v-model="searchTime"
|
<el-table-column prop="time" :label="$t('dashboard.panel.chartTableColumn.time')" width="145" ></el-table-column>
|
||||||
type="datetimerange"
|
<el-table-column prop="value" :label="$t('dashboard.panel.chartTableColumn.value')" ></el-table-column>
|
||||||
:picker-options="pickerOptions"
|
</el-table>
|
||||||
: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>
|
|
||||||
</span>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<div class=" element-bottom-border"></div>
|
||||||
<div class="mt-10">
|
<span slot="footer" class="dialog-footer">
|
||||||
<el-table :data="seriesItem" height="350" border class="chart-table-col" v-loading="tableLoading">
|
<el-button @click="screenModal = false">{{$t('dashboard.panel.cancel')}}</el-button>
|
||||||
<el-table-column prop="metric" :label="$t('dashboard.panel.chartTableColumn.metric')" sortable></el-table-column>
|
<el-button type="primary" @click="screenModal = false">{{$t('dashboard.panel.confirm')}}</el-button>
|
||||||
<el-table-column prop="label" :label="$t('dashboard.panel.chartTableColumn.label')" sortable></el-table-column>
|
</span>
|
||||||
<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>
|
|
||||||
</div>
|
|
||||||
<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>
|
</el-dialog>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import bus from '../../libs/bus';
|
import bus from '../../libs/bus';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'chartTable',
|
name: 'chartTable',
|
||||||
components: {
|
components: {},
|
||||||
},
|
props: {
|
||||||
props: {
|
// 看板id
|
||||||
// 看板id
|
panelId: {
|
||||||
panelId: {
|
type: Number,
|
||||||
type: Number,
|
default: 0,
|
||||||
default: 0,
|
},
|
||||||
},
|
},
|
||||||
},
|
data() {
|
||||||
data() {
|
return {
|
||||||
return {
|
data: {}, // 该图表信息,chartItem
|
||||||
data: {}, // 该图表信息,chartItem
|
seriesItem: [], // 保存信息
|
||||||
seriesItem: [], // 保存信息
|
images: '',
|
||||||
images: '',
|
toolbox: false,
|
||||||
toolbox: false,
|
items: {
|
||||||
items: {
|
metric_name: [], // 每条数据列名称
|
||||||
metric_name: [], // 每条数据列名称
|
xAxis: [],
|
||||||
xAxis: [],
|
theData: [], // series数据组
|
||||||
theData: [], // series数据组
|
},
|
||||||
},
|
panelIdInner: '', // 看板id=panelId,原写作chart,由set_data获取
|
||||||
panelIdInner: '', // 看板id=panelId,原写作chart,由set_data获取
|
firstLoad: false, // 是否第一次加载
|
||||||
firstLoad: false, // 是否第一次加载
|
chartType: 'table', // 图表类型
|
||||||
chartType: 'table', // 图表类型
|
screenModal: false,
|
||||||
screenModal: false,
|
// 查询数据使用
|
||||||
// 查询数据使用
|
filter: {
|
||||||
filter: {
|
start_time: '',
|
||||||
start_time: '',
|
end_time: '',
|
||||||
end_time: '',
|
},
|
||||||
},
|
stableFilter: {}, // 保存数据使用,初始化起止时间,单图or多图等
|
||||||
stableFilter: {}, // 保存数据使用,初始化起止时间,单图or多图等
|
firstShow: false, // 默认不显示操作按钮,
|
||||||
firstShow: false, // 默认不显示操作按钮,
|
tableLoading: false,
|
||||||
tableLoading: false,
|
columns: [{
|
||||||
columns: [{
|
title: 'metric',
|
||||||
title: 'metric',
|
key: 'metric',
|
||||||
key: 'metric',
|
width: 200,
|
||||||
width: 200,
|
sortable: true,
|
||||||
sortable: true,
|
}, {
|
||||||
}, {
|
title: 'Label', //tag
|
||||||
title: 'Label',//tag
|
key: 'name',
|
||||||
key: 'name',
|
minWidth: 200,
|
||||||
minWidth: 200,
|
sortable: true,
|
||||||
sortable: true,
|
}, {
|
||||||
}, {
|
title: '采集时间',
|
||||||
title: '采集时间',
|
key: 'time',
|
||||||
key: 'time',
|
width: 160,
|
||||||
width: 160,
|
render: (h, params) => h('span', bus.timeFormate(params.row.time, 'yyyy-MM-dd hh:mm:ss')),
|
||||||
render: (h, params) => h('span', bus.timeFormate(params.row.time, 'yyyy-MM-dd hh:mm:ss')),
|
}, {
|
||||||
}, {
|
title: '数值',
|
||||||
title: '数值',
|
key: 'value',
|
||||||
key: 'value',
|
width: 160,
|
||||||
width: 160,
|
sortable: true,
|
||||||
sortable: true,
|
render: (h, params) => h('span', this.getNumStr(params.row.value)),
|
||||||
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: [],
|
||||||
oldSearchTime:[],
|
pickerOptions: {
|
||||||
pickerOptions: {
|
shortcuts: [{
|
||||||
shortcuts: [
|
text: this.$t("dashboard.panel.recOne"),
|
||||||
{
|
onClick(picker) {
|
||||||
text: this.$t("dashboard.panel.recOne"),
|
const end = new Date();
|
||||||
onClick(picker) {
|
const start = new Date();
|
||||||
const end = new Date();
|
start.setHours(start.getHours() - 1);
|
||||||
const start = new Date();
|
picker.$emit('pick', [start, end]);
|
||||||
start.setHours(start.getHours() - 1);
|
}
|
||||||
picker.$emit('pick', [start, end]);
|
}, {
|
||||||
|
text: this.$t("dashboard.panel.recFour"),
|
||||||
|
onClick(picker) {
|
||||||
|
const end = new Date();
|
||||||
|
const start = new Date();
|
||||||
|
start.setHours(start.getHours() - 4);
|
||||||
|
picker.$emit('pick', [start, end]);
|
||||||
|
}
|
||||||
|
}, {
|
||||||
|
text: this.$t("dashboard.panel.recOneDay"),
|
||||||
|
onClick(picker) {
|
||||||
|
const end = new Date();
|
||||||
|
const start = new Date();
|
||||||
|
start.setDate(start.getDate() - 1);
|
||||||
|
picker.$emit('pick', [start, end]);
|
||||||
|
}
|
||||||
|
}, {
|
||||||
|
text: this.$t("dashboard.panel.yesterday"),
|
||||||
|
onClick(picker) {
|
||||||
|
const start = new Date();
|
||||||
|
const end = new Date();
|
||||||
|
start.setDate(start.getDate() - 1);
|
||||||
|
start.setHours(0);
|
||||||
|
start.setMinutes(0);
|
||||||
|
start.setSeconds(0);
|
||||||
|
end.setDate(end.getDate() - 1);
|
||||||
|
end.setHours(23);
|
||||||
|
end.setMinutes(59);
|
||||||
|
end.setSeconds(59);
|
||||||
|
picker.$emit('pick', [start, end]);
|
||||||
|
}
|
||||||
|
}, {
|
||||||
|
text: this.$t("dashboard.panel.recSevenDay"),
|
||||||
|
onClick(picker) {
|
||||||
|
const end = new Date();
|
||||||
|
const start = new Date();
|
||||||
|
start.setDate(start.getDate() - 7);
|
||||||
|
picker.$emit('pick', [start, end]);
|
||||||
|
}
|
||||||
|
}, {
|
||||||
|
text: this.$t("dashboard.panel.recOneMonth"),
|
||||||
|
onClick(picker) {
|
||||||
|
const end = new Date();
|
||||||
|
const start = new Date();
|
||||||
|
start.setDate(start.getDate() - 30);
|
||||||
|
picker.$emit('pick', [start, end]);
|
||||||
|
}
|
||||||
|
}, {
|
||||||
|
text: this.$t("dashboard.panel.curMonth"),
|
||||||
|
onClick(picker) {
|
||||||
|
const end = new Date();
|
||||||
|
const start = new Date();
|
||||||
|
start.setDate(1);
|
||||||
|
start.setHours(0);
|
||||||
|
start.setMinutes(0);
|
||||||
|
picker.$emit('pick', [start, end]);
|
||||||
|
}
|
||||||
|
}, {
|
||||||
|
text: this.$t("dashboard.panel.lastMonth"),
|
||||||
|
onClick(picker) {
|
||||||
|
const end = new Date();
|
||||||
|
const start = new Date();
|
||||||
|
start.setDate(1);
|
||||||
|
start.setMonth(start.getMonth() - 1);
|
||||||
|
end.setDate(0);
|
||||||
|
start.setStart();
|
||||||
|
end.setEnd();
|
||||||
|
picker.$emit('pick', [start, end]);
|
||||||
|
}
|
||||||
|
}]
|
||||||
|
},
|
||||||
|
};
|
||||||
|
},
|
||||||
|
computed: {},
|
||||||
|
watch: {},
|
||||||
|
methods: {
|
||||||
|
showLoad() {
|
||||||
|
this.tableLoading = true;
|
||||||
|
},
|
||||||
|
// 展示图表编辑区
|
||||||
|
showTool() {
|
||||||
|
this.toolbox = !this.toolbox;
|
||||||
|
},
|
||||||
|
// 重新请求数据 刷新操作
|
||||||
|
refreshChart() {
|
||||||
|
this.tableLoading = true;
|
||||||
|
this.$emit('on-refresh-data', this.data.id);
|
||||||
|
},
|
||||||
|
// 编辑图表
|
||||||
|
editChart() {
|
||||||
|
this.$emit('on-edit-chart-block', this.data.id);
|
||||||
|
},
|
||||||
|
// 删除该图表
|
||||||
|
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.$emit('on-search-data', this.data.id, this.searchTime);
|
||||||
|
},
|
||||||
|
// 全屏查看
|
||||||
|
showAllScreen() {
|
||||||
|
// 初始化同步时间
|
||||||
|
this.searchTime = this.oldSearchTime;
|
||||||
|
this.screenModal = true;
|
||||||
|
},
|
||||||
|
// 设置数据, filter区分
|
||||||
|
setData(chartItem, seriesItem, panelId, filter) {
|
||||||
|
this.firstShow = true; // 展示操作按键
|
||||||
|
this.tableLoading = false;
|
||||||
|
if (filter) { // 保存数据,用于同步时间
|
||||||
|
this.stableFilter = filter;
|
||||||
}
|
}
|
||||||
},{
|
this.panelIdInner = panelId;
|
||||||
text: this.$t("dashboard.panel.recFour"),
|
this.data = chartItem;
|
||||||
onClick(picker) {
|
this.seriesItem = seriesItem;
|
||||||
const end = new Date();
|
this.searchTime[0] = filter.start_time;
|
||||||
const start = new Date();
|
this.searchTime[1] = filter.end_time;
|
||||||
start.setHours(start.getHours() - 4);
|
this.oldSearchTime = this.searchTime;
|
||||||
picker.$emit('pick', [start, end]);
|
},
|
||||||
}
|
// 获取格式
|
||||||
}, {
|
getNumStr(num) {
|
||||||
text: this.$t("dashboard.panel.recOneDay"),
|
if (num) {
|
||||||
onClick(picker) {
|
if (num >= 1000) {
|
||||||
const end = new Date();
|
const kbNum = num / 1000;
|
||||||
const start = new Date();
|
if (kbNum >= 1000) {
|
||||||
start.setDate(start.getDate() - 1);
|
const mbNum = kbNum / 1000;
|
||||||
picker.$emit('pick', [start, end]);
|
if (mbNum > 1000) {
|
||||||
}
|
const gbNum = mbNum / 1000;
|
||||||
}, {
|
if (gbNum > 1000) {
|
||||||
text: this.$t("dashboard.panel.yesterday"),
|
const tbNum = gbNum / 1000;
|
||||||
onClick(picker) {
|
if (tbNum > 1000) {
|
||||||
const start = new Date();
|
const pbNum = tbNum / 1000;
|
||||||
const end = new Date();
|
return `${pbNum.toFixed(2)}PB`;
|
||||||
start.setDate(start.getDate() - 1);
|
}
|
||||||
start.setHours(0);
|
return `${tbNum.toFixed(2)}TB`;
|
||||||
start.setMinutes(0);
|
}
|
||||||
start.setSeconds(0);
|
return `${gbNum.toFixed(2)}GB`;
|
||||||
end.setDate(end.getDate() - 1);
|
}
|
||||||
end.setHours(23);
|
return `${mbNum.toFixed(2)}MB`;
|
||||||
end.setMinutes(59);
|
}
|
||||||
end.setSeconds(59);
|
return `${kbNum.toFixed(2)}KB`;
|
||||||
picker.$emit('pick', [start, end]);
|
|
||||||
}
|
|
||||||
},{
|
|
||||||
text: this.$t("dashboard.panel.recSevenDay"),
|
|
||||||
onClick(picker) {
|
|
||||||
const end = new Date();
|
|
||||||
const start = new Date();
|
|
||||||
start.setDate(start.getDate() - 7);
|
|
||||||
picker.$emit('pick', [start, end]);
|
|
||||||
}
|
|
||||||
}, {
|
|
||||||
text: this.$t("dashboard.panel.recOneMonth"),
|
|
||||||
onClick(picker) {
|
|
||||||
const end = new Date();
|
|
||||||
const start = new Date();
|
|
||||||
start.setDate(start.getDate() - 30);
|
|
||||||
picker.$emit('pick', [start, end]);
|
|
||||||
}
|
|
||||||
}, {
|
|
||||||
text: this.$t("dashboard.panel.curMonth"),
|
|
||||||
onClick(picker) {
|
|
||||||
const end = new Date();
|
|
||||||
const start = new Date();
|
|
||||||
start.setDate(1);
|
|
||||||
start.setHours(0);
|
|
||||||
start.setMinutes(0);
|
|
||||||
picker.$emit('pick', [start, end]);
|
|
||||||
}
|
|
||||||
},{
|
|
||||||
text: this.$t("dashboard.panel.lastMonth"),
|
|
||||||
onClick(picker) {
|
|
||||||
const end = new Date();
|
|
||||||
const start = new Date();
|
|
||||||
start.setDate(1);
|
|
||||||
start.setMonth(start.getMonth() - 1);
|
|
||||||
end.setDate(0);
|
|
||||||
start.setStart();
|
|
||||||
end.setEnd();
|
|
||||||
picker.$emit('pick', [start, end]);
|
|
||||||
}
|
|
||||||
}]
|
|
||||||
},
|
|
||||||
};
|
|
||||||
},
|
|
||||||
computed: {
|
|
||||||
},
|
|
||||||
watch: {},
|
|
||||||
methods: {
|
|
||||||
showLoad() {
|
|
||||||
this.tableLoading = true;
|
|
||||||
},
|
|
||||||
// 展示图表编辑区
|
|
||||||
showTool() {
|
|
||||||
this.toolbox = !this.toolbox;
|
|
||||||
},
|
|
||||||
// 重新请求数据 刷新操作
|
|
||||||
refreshChart() {
|
|
||||||
this.tableLoading = true;
|
|
||||||
this.$emit('on-refresh-data', this.data.id);
|
|
||||||
},
|
|
||||||
// 编辑图表
|
|
||||||
editChart() {
|
|
||||||
this.$emit('on-edit-chart-block', this.data.id);
|
|
||||||
},
|
|
||||||
// 删除该图表
|
|
||||||
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.$emit('on-search-data', this.data.id,this.searchTime);
|
|
||||||
},
|
|
||||||
// 全屏查看
|
|
||||||
showAllScreen() {
|
|
||||||
// 初始化同步时间
|
|
||||||
this.searchTime = this.oldSearchTime;
|
|
||||||
this.screenModal = true;
|
|
||||||
},
|
|
||||||
// 设置数据, filter区分
|
|
||||||
setData(chartItem, seriesItem, panelId, filter) {
|
|
||||||
this.firstShow = true; // 展示操作按键
|
|
||||||
this.tableLoading = false;
|
|
||||||
if (filter) { // 保存数据,用于同步时间
|
|
||||||
this.stableFilter = filter;
|
|
||||||
}
|
|
||||||
this.panelIdInner = panelId;
|
|
||||||
this.data = chartItem;
|
|
||||||
this.seriesItem = seriesItem;
|
|
||||||
this.searchTime[0] = filter.start_time;
|
|
||||||
this.searchTime[1] = filter.end_time;
|
|
||||||
this.oldSearchTime = this.searchTime;
|
|
||||||
},
|
|
||||||
// 获取格式
|
|
||||||
getNumStr(num) {
|
|
||||||
if (num) {
|
|
||||||
if (num >= 1000) {
|
|
||||||
const kbNum = num / 1000;
|
|
||||||
if (kbNum >= 1000) {
|
|
||||||
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 num.toFixed(2);
|
||||||
}
|
|
||||||
return `${gbNum.toFixed(2)}GB`;
|
|
||||||
}
|
}
|
||||||
return `${mbNum.toFixed(2)}MB`;
|
return num;
|
||||||
}
|
},
|
||||||
return `${kbNum.toFixed(2)}KB`;
|
|
||||||
}
|
|
||||||
return num.toFixed(2);
|
|
||||||
}
|
|
||||||
return num;
|
|
||||||
},
|
},
|
||||||
},
|
mounted() {
|
||||||
mounted() {
|
this.firstLoad = false;
|
||||||
this.firstLoad = false;
|
},
|
||||||
},
|
beforeDestroy() {},
|
||||||
beforeDestroy() {},
|
|
||||||
};
|
};
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
@@ -1,11 +1,19 @@
|
|||||||
/* ---------edit-chart-move--------- */
|
/* ---------edit-chart-move--------- */
|
||||||
|
.clearfix:after{
|
||||||
|
display: block;
|
||||||
|
content: "";
|
||||||
|
clear: both;
|
||||||
|
}
|
||||||
|
.clearfix{
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
.line-chart-block {
|
.line-chart-block {
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
height: 100%;
|
||||||
// min-height: 500px;
|
// min-height: 500px;
|
||||||
position: relative;
|
position: relative;
|
||||||
background: #FFF;
|
background: #FFF;
|
||||||
border: 1px solid #d8dce1;
|
border: 1px solid #d8dce1;
|
||||||
|
padding: 20px 30px;
|
||||||
margin-bottom: 10px;
|
margin-bottom: 10px;
|
||||||
padding-bottom: 3px;
|
padding-bottom: 3px;
|
||||||
.line-area {
|
.line-area {
|
||||||
@@ -21,19 +29,34 @@
|
|||||||
white-space: pre-wrap !important;
|
white-space: pre-wrap !important;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
.edit:after{
|
||||||
|
display: block;
|
||||||
|
content: "";
|
||||||
|
clear: both;
|
||||||
|
}
|
||||||
.edit {
|
.edit {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
right: 40px;
|
right: 40px;
|
||||||
top: 15px;
|
top: 15px;
|
||||||
z-index: 10;
|
z-index: 10;
|
||||||
|
background: $btn-light-background-color;
|
||||||
|
border-radius: 6px;;
|
||||||
|
border: 1px solid #ccc;
|
||||||
.set-icon {
|
.set-icon {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
font-size: 14px;
|
padding: 5px 15px;
|
||||||
margin-left: 15px;
|
border-right: 1px solid #ccc;
|
||||||
color: #5aacff;
|
}
|
||||||
border: 0 none;
|
.set-icon:last-child{
|
||||||
background: transparent;
|
border-right: none !important;
|
||||||
|
}
|
||||||
|
.el-icon-refresh-right{
|
||||||
|
color: #F0BF84;
|
||||||
|
}
|
||||||
|
i{
|
||||||
|
font-size: 16px;
|
||||||
|
color: #000;
|
||||||
}
|
}
|
||||||
.list-icon {
|
.list-icon {
|
||||||
float: left;
|
float: left;
|
||||||
|
|||||||
@@ -785,6 +785,7 @@ export default {
|
|||||||
}
|
}
|
||||||
return num.toFixed(2);
|
return num.toFixed(2);
|
||||||
},
|
},
|
||||||
|
handleClose(){},
|
||||||
/*
|
/*
|
||||||
handleClose(done) {
|
handleClose(done) {
|
||||||
/*
|
/*
|
||||||
@@ -980,6 +981,13 @@ export default {
|
|||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
this.firstLoad = false;
|
this.firstLoad = false;
|
||||||
|
let Myecharts2 = echarts.init(document.getElementById('lineChartArea'));
|
||||||
|
console.log(Myecharts2);
|
||||||
|
|
||||||
|
setTimeout(function () {
|
||||||
|
Myecharts2.resize()
|
||||||
|
}, 500)
|
||||||
|
|
||||||
},
|
},
|
||||||
beforeDestroy() {},
|
beforeDestroy() {},
|
||||||
};
|
};
|
||||||
|
|||||||
File diff suppressed because it is too large
Load Diff
@@ -1,4 +1,5 @@
|
|||||||
//import "./assets/css/main.css";
|
//import "./assets/css/main.css";
|
||||||
|
import './assets/stylus/index.scss'
|
||||||
import "./assets/css/nzIcon.css";
|
import "./assets/css/nzIcon.css";
|
||||||
import 'element-ui/lib/theme-chalk/index.css';
|
import 'element-ui/lib/theme-chalk/index.css';
|
||||||
import ElementUI from 'element-ui';
|
import ElementUI from 'element-ui';
|
||||||
@@ -11,7 +12,6 @@ import store from './store/index';
|
|||||||
import App from './App'
|
import App from './App'
|
||||||
import router from './router'
|
import router from './router'
|
||||||
import VueResource from 'vue-resource'
|
import VueResource from 'vue-resource'
|
||||||
import './assets/stylus/index.scss'
|
|
||||||
import axios from 'axios';
|
import axios from 'axios';
|
||||||
import {post, get, put, del} from './http.js'
|
import {post, get, put, del} from './http.js'
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user