prb_autorefresh
This commit is contained in:
16
package-lock.json
generated
16
package-lock.json
generated
@@ -22,6 +22,7 @@
|
||||
"vue-i18n": "^8.17.5",
|
||||
"vue-router": "^3.1.6",
|
||||
"vue-underscore": "^0.1.4",
|
||||
"vue2-highcharts": "^1.2.5",
|
||||
"vuetify": "^2.2.11",
|
||||
"vuex": "^3.1.3"
|
||||
},
|
||||
@@ -7179,6 +7180,12 @@
|
||||
"integrity": "sha512-l9sfDFsuqtOqKDsQdqrMRk0U85RZc0RtOR9yPI7mRVOa4FsR/BVnZ0shmQRM96Ji99kYZP/7hn1cedc1+ApsTQ==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/highcharts": {
|
||||
"version": "6.2.0",
|
||||
"resolved": "https://registry.npmjs.org/highcharts/-/highcharts-6.2.0.tgz",
|
||||
"integrity": "sha512-A4E89MA+kto8giic7zyLU6ZxfXnVeCUlKOyzFsah3+n4BROx4bgonl92KIBtwLud/mIWir8ahqhuhe2by9LakQ==",
|
||||
"peer": true
|
||||
},
|
||||
"node_modules/highlight.js": {
|
||||
"version": "10.7.3",
|
||||
"resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-10.7.3.tgz",
|
||||
@@ -13792,6 +13799,15 @@
|
||||
"underscore": "^1.8.3"
|
||||
}
|
||||
},
|
||||
"node_modules/vue2-highcharts": {
|
||||
"version": "1.2.5",
|
||||
"resolved": "https://registry.npmjs.org/vue2-highcharts/-/vue2-highcharts-1.2.5.tgz",
|
||||
"integrity": "sha512-di7kuqZyqo77pmCs23s+wIyA1aBuKMxRJg871ggcj0Y1GopfF9j/cPlmwgjyIMaOHz4iQmvfn8hEDNOMW7etEQ==",
|
||||
"peerDependencies": {
|
||||
"highcharts": "^6.0.3",
|
||||
"vue": "^2.1.0"
|
||||
}
|
||||
},
|
||||
"node_modules/vuetify": {
|
||||
"version": "2.7.2",
|
||||
"resolved": "https://registry.npmjs.org/vuetify/-/vuetify-2.7.2.tgz",
|
||||
|
||||
@@ -22,6 +22,7 @@
|
||||
"vue-i18n": "^8.17.5",
|
||||
"vue-router": "^3.1.6",
|
||||
"vue-underscore": "^0.1.4",
|
||||
"vue2-highcharts": "^1.2.5",
|
||||
"vuetify": "^2.2.11",
|
||||
"vuex": "^3.1.3"
|
||||
},
|
||||
|
||||
@@ -1,66 +1,83 @@
|
||||
<template>
|
||||
<v-col style="min-width:550px; max-width:550px;" cols="1">
|
||||
<!-- <LineChart :data="chartData" /> -->
|
||||
<div class="grid">
|
||||
<div v-for="(item, index) in items" :key="index" class="grid-item">
|
||||
{{ item.name }}
|
||||
<LineChart :id="item.name" :data="item.data" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</v-col>
|
||||
<div>
|
||||
<vue-highcharts :options="options" ref="lineCharts"></vue-highcharts>
|
||||
<button @click="load">load</button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
|
||||
import { Chart, LineController, LineElement, CategoryScale, LinearScale, PointElement } from 'chart.js';
|
||||
import { Line as LineChart } from 'vue-chartjs';
|
||||
Chart.register(LineController, LineElement, CategoryScale, LinearScale, PointElement);
|
||||
|
||||
|
||||
export default {
|
||||
components: { LineChart },
|
||||
data: () => ({
|
||||
items: [
|
||||
{
|
||||
name: "A",
|
||||
data: {
|
||||
labels: ["Resource Usage", '456'],
|
||||
datasets: [
|
||||
{
|
||||
labels: ["Resource Usage", '456'],
|
||||
backgroundColor: "#41b883",
|
||||
data: [90, 99, 99, 20, 10]
|
||||
import VueHighcharts from 'vue2-highcharts'
|
||||
const asyncData = {
|
||||
name: 'Tokyo',
|
||||
marker: {
|
||||
symbol: 'square'
|
||||
},
|
||||
data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, {
|
||||
y: 26.5,
|
||||
marker: {
|
||||
symbol: 'url(http://www.highcharts.com/demo/gfx/sun.png)'
|
||||
}
|
||||
}, 23.3, 18.3, 13.9, 9.6]
|
||||
}
|
||||
export default{
|
||||
components: {
|
||||
VueHighcharts
|
||||
},
|
||||
data(){
|
||||
return{
|
||||
options: {
|
||||
chart: {
|
||||
type: 'spline'
|
||||
},
|
||||
title: {
|
||||
text: 'Monthly Average Temperature'
|
||||
},
|
||||
subtitle: {
|
||||
text: 'Source: WorldClimate.com'
|
||||
},
|
||||
xAxis: {
|
||||
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
|
||||
'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
|
||||
},
|
||||
yAxis: {
|
||||
title: {
|
||||
text: 'Temperature'
|
||||
},
|
||||
{
|
||||
label: "Mem Usage",
|
||||
backgroundColor: "#FFAA0C",
|
||||
data: [400, 400, 200, 100, 200]
|
||||
labels: {
|
||||
formatter: function () {
|
||||
return this.value + '°';
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
name: "B",
|
||||
data: {
|
||||
labels: ["Resource Usage"],
|
||||
datasets: [
|
||||
{
|
||||
label: "CPU Usage",
|
||||
backgroundColor: "#41b883",
|
||||
data: [90, 99]
|
||||
},
|
||||
{
|
||||
label: "Mem Usage",
|
||||
backgroundColor: "#FFAA0C",
|
||||
data: [400, 400]
|
||||
},
|
||||
tooltip: {
|
||||
crosshairs: true,
|
||||
shared: true
|
||||
},
|
||||
credits: {
|
||||
enabled: false
|
||||
},
|
||||
plotOptions: {
|
||||
spline: {
|
||||
marker: {
|
||||
radius: 4,
|
||||
lineColor: '#666666',
|
||||
lineWidth: 1
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
series: []
|
||||
}
|
||||
}
|
||||
]
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
load(){
|
||||
let lineCharts = this.$refs.lineCharts;
|
||||
lineCharts.delegateMethod('showLoading', 'Loading...');
|
||||
setTimeout(() => {
|
||||
lineCharts.addSeries(asyncData);
|
||||
lineCharts.hideLoading();
|
||||
}, 2000)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -19,6 +19,7 @@
|
||||
файловый менеджер
|
||||
</v-list-item-subtitle>
|
||||
</v-list-item-content>
|
||||
|
||||
</v-list-item>
|
||||
|
||||
|
||||
@@ -66,10 +67,10 @@
|
||||
</v-dialog>
|
||||
</v-toolbar>
|
||||
|
||||
<v-progress-linear color="orange" rounded :value="progress" reactive></v-progress-linear>
|
||||
|
||||
<v-container>
|
||||
<v-toolbar flat>
|
||||
|
||||
<v-col style="min-width: 200px; max-width: 100px;">
|
||||
<v-menu v-model="datePickerMenu" :close-on-content-click="false" :nudge-right="40" :nudge-top="-5"
|
||||
transition="scale-transition" offset-y min-width="290px">
|
||||
@@ -175,6 +176,7 @@ import { mapGetters, mapActions, mapMutations } from "vuex";
|
||||
|
||||
export default {
|
||||
data: vm => ({
|
||||
progress: 100,
|
||||
file: { name: null, id: null, input: null, data: null },
|
||||
dialog: { log: false, history: false },
|
||||
pass: { val: null, select: true },
|
||||
@@ -260,6 +262,7 @@ export default {
|
||||
snackbarColor() {
|
||||
return this.uploadStatus ? "green darken-4" : "red darken-4"
|
||||
},
|
||||
|
||||
},
|
||||
methods: {
|
||||
...mapMutations("PRB_FileControl", {
|
||||
@@ -338,8 +341,18 @@ export default {
|
||||
this.getStorage();
|
||||
this.getData(this.formatDate(this.date));
|
||||
},
|
||||
progressValue() {
|
||||
this.timerID = setInterval(() => {
|
||||
this.progress = (this.progress - 0.02).toFixed(2);
|
||||
if (this.progress < 0) {
|
||||
this.progress = 101;
|
||||
this.reload();
|
||||
}
|
||||
}, 60);
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.progressValue();
|
||||
this.reload();
|
||||
}
|
||||
};
|
||||
|
||||
@@ -145,15 +145,15 @@ const routes = [
|
||||
component: () => import("./components/PRB_FileControl.vue"),
|
||||
},
|
||||
|
||||
{
|
||||
path: "/GazTrends/BofGazTrend",
|
||||
name: "BofGazTrend",
|
||||
component: () => import("./components/GazTrends/BofGazTrend.vue"),
|
||||
beforeEnter(to, from, next) {
|
||||
axios.defaults.headers.post["project"] = "GazTrends";
|
||||
next();
|
||||
},
|
||||
},
|
||||
// {
|
||||
// path: "/GazTrends/BofGazTrend",
|
||||
// name: "BofGazTrend",
|
||||
// component: () => import("./components/GazTrends/BofGazTrend.vue"),
|
||||
// beforeEnter(to, from, next) {
|
||||
// axios.defaults.headers.post["project"] = "GazTrends";
|
||||
// next();
|
||||
// },
|
||||
// },
|
||||
|
||||
{
|
||||
path: "/stat",
|
||||
|
||||
Reference in New Issue
Block a user