prb_autorefresh

src/components/GazTrends/BofGazTrend.vue

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

src/components/PRB_FileControl.vue

@@ -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();
   }
 };

src/routes.js

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