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

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

View File

@@ -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>

View File

@@ -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"

View File

@@ -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%;
} }

View File

@@ -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;

View File

@@ -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>

View File

@@ -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;

View File

@@ -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

View File

@@ -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'