|
|
|
@ -85,7 +85,7 @@ |
|
|
|
</b-row> |
|
|
|
|
|
|
|
<div class="codemirror"> |
|
|
|
<div v-if="history" class="table"> |
|
|
|
<div v-if="history" class="table2"> |
|
|
|
<vuetable |
|
|
|
ref="vuetable" |
|
|
|
:api-url="api_url" |
|
|
|
@ -107,7 +107,7 @@ |
|
|
|
> |
|
|
|
</vuetable> |
|
|
|
</div> |
|
|
|
<div class="vuetable-pagination ui basic segment grid"> |
|
|
|
<div v-if="history" class="vuetable-pagination ui basic segment grid"> |
|
|
|
<vuetable-pagination-info |
|
|
|
ref="paginationInfo" |
|
|
|
:css="css.paginationInfo" |
|
|
|
@ -120,6 +120,17 @@ |
|
|
|
> |
|
|
|
</vuetable-pagination> |
|
|
|
</div> |
|
|
|
|
|
|
|
<div class="highch" v-if="history"> |
|
|
|
<transition name="bounce" appear> |
|
|
|
<highcharts |
|
|
|
class="hc" |
|
|
|
:options="chartOptions" |
|
|
|
:callback="callback" |
|
|
|
ref="chart" |
|
|
|
></highcharts> |
|
|
|
</transition> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</b-col> |
|
|
|
</b-row> |
|
|
|
@ -132,6 +143,7 @@ import store from "@/store/index"; |
|
|
|
import { Vuetable, VuetablePaginationDropdown } from "vuetable-2"; |
|
|
|
import VuetablePaginationInfo from "vuetable-2/src/components/VuetablePaginationInfo"; |
|
|
|
import VuetablePagination from "vuetable-2/src/components/VuetablePagination"; |
|
|
|
|
|
|
|
import CssConfig from "vuetable-2/src/components/VuetableCssConfig.js"; |
|
|
|
|
|
|
|
import { codemirror } from "vue-codemirror"; |
|
|
|
@ -171,6 +183,11 @@ import "codemirror/addon/fold/markdown-fold.js"; |
|
|
|
import "codemirror/addon/fold/xml-fold.js"; |
|
|
|
import "codemirror/lib/codemirror"; |
|
|
|
import "codemirror/addon/display/placeholder"; |
|
|
|
import { Chart } from "highcharts-vue"; |
|
|
|
import Highcharts from "highcharts"; |
|
|
|
import exportingInit from "highcharts/modules/exporting"; |
|
|
|
|
|
|
|
exportingInit(Highcharts); |
|
|
|
|
|
|
|
export default { |
|
|
|
components: { |
|
|
|
@ -179,9 +196,32 @@ export default { |
|
|
|
VuetablePagination, |
|
|
|
VuetablePaginationInfo, |
|
|
|
VuetablePaginationDropdown, |
|
|
|
highcharts: Chart, |
|
|
|
}, |
|
|
|
data() { |
|
|
|
return { |
|
|
|
chartOptions: { |
|
|
|
title: { |
|
|
|
text: "Length of logs chart", |
|
|
|
}, |
|
|
|
// line: { |
|
|
|
// dataLabels: { |
|
|
|
// enabled: true, |
|
|
|
// }, |
|
|
|
// }, |
|
|
|
chart: { |
|
|
|
type: "column", |
|
|
|
}, |
|
|
|
xAxis: { |
|
|
|
categories: ["JobjLogs", "jobj_console"], |
|
|
|
}, |
|
|
|
yAxis: { |
|
|
|
title: { |
|
|
|
text: "Count", |
|
|
|
}, |
|
|
|
}, |
|
|
|
series: [], |
|
|
|
}, |
|
|
|
api_url: "http://localhost:3000/test2", |
|
|
|
fields: [ |
|
|
|
{ |
|
|
|
@ -379,6 +419,21 @@ export default { |
|
|
|
}; |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
callback(params) { |
|
|
|
//this.console = store.getters["statsmodule/getCountConsole"]; |
|
|
|
// var JobjLogs = store.getters["statsmodule/getCountLogs"]; |
|
|
|
// var jobj_console = store.getters["statsmodule/getCountConsole"]; |
|
|
|
this.chartOptions.series.push( |
|
|
|
{ |
|
|
|
name: "swarm-app-Stats", |
|
|
|
data: ["1", "2"], |
|
|
|
}, |
|
|
|
{ |
|
|
|
name: "swarm-app-Stats2", |
|
|
|
data: ["1", "2"], |
|
|
|
} |
|
|
|
); |
|
|
|
}, |
|
|
|
socketconnect() { |
|
|
|
// send to runLLO |
|
|
|
this.$root.$emit("SERVER_socket_connect"); |
|
|
|
@ -396,6 +451,7 @@ export default { |
|
|
|
this.$refs.pagination.setPaginationData(paginationData); |
|
|
|
this.$refs.paginationInfo.setPaginationData(paginationData); |
|
|
|
}, |
|
|
|
//asd |
|
|
|
loadsuccess(response) { |
|
|
|
var data = response.data.data; |
|
|
|
this.fielddata = data; |
|
|
|
@ -644,10 +700,13 @@ export default { |
|
|
|
}; |
|
|
|
</script> |
|
|
|
|
|
|
|
<style> |
|
|
|
.table { |
|
|
|
<style scoped> |
|
|
|
.highch { |
|
|
|
padding-top: 50px; |
|
|
|
} |
|
|
|
.table2 { |
|
|
|
min-height: 320px; |
|
|
|
overflow: auto; |
|
|
|
min-height: 500px; |
|
|
|
} |
|
|
|
.CodeMirror { |
|
|
|
font-family: monospace; |
|
|
|
|
