prb_autorefresh

package-lock.json

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

package.json

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

src/components/GazTrends/BofGazTrend.vue

@@ -1,66 +1,83 @@
 <template>
-  <v-col style="min-width:550px; max-width:550px;" cols="1">
+  <div>
-    <!-- <LineChart :data="chartData" /> -->
+    <vue-highcharts :options="options" ref="lineCharts"></vue-highcharts>
-    <div class="grid">
+    <button @click="load">load</button>
-      <div v-for="(item, index) in items" :key="index" class="grid-item">
+  </div>
-        {{ item.name }}
-        <LineChart :id="item.name" :data="item.data" />
-      </div>
-    </div>
-
-
-  </v-col>
 </template>
-
+ 
 <script>
-
+import VueHighcharts from 'vue2-highcharts'
-
+const asyncData = {
-import { Chart, LineController, LineElement, CategoryScale, LinearScale, PointElement } from 'chart.js';
+  name: 'Tokyo',
-import { Line as LineChart } from 'vue-chartjs';
+  marker: {
-Chart.register(LineController, LineElement, CategoryScale, LinearScale, PointElement);
+    symbol: 'square'
-
+  },
-
+  data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, {
-export default {
+    y: 26.5,
-  components: { LineChart },
+    marker: {
-  data: () => ({
+      symbol: 'url(http://www.highcharts.com/demo/gfx/sun.png)'
-    items: [
+    }
-      {
+  }, 23.3, 18.3, 13.9, 9.6]
-        name: "A",
+}
-        data: {
+export default{
-          labels: ["Resource Usage", '456'],
+    components: {
-          datasets: [
+        VueHighcharts
-            {
+    },
-         labels: ["Resource Usage", '456'],
+    data(){
-              backgroundColor: "#41b883",
+      return{
-              data: [90, 99, 99, 20, 10]
+        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'
             },
-            {
+            labels: {
-              label: "Mem Usage",
+              formatter: function () {
-              backgroundColor: "#FFAA0C",
+                return this.value + '°';
-              data: [400, 400, 200, 100, 200]
+              }
             }
-          ]
+          },
-        }
+          tooltip: {
-      },
+            crosshairs: true,
-      {
+            shared: true
-        name: "B",
+          },
-        data: {
+          credits: {
-          labels: ["Resource Usage"],
+            enabled: false
-          datasets: [
+          },
-            {
+          plotOptions: {
-              label: "CPU Usage",
+            spline: {
-              backgroundColor: "#41b883",
+              marker: {
-              data: [90, 99]
+                radius: 4,
-            },
+                lineColor: '#666666',
-            {
+                lineWidth: 1
-              label: "Mem Usage",
+              }
-              backgroundColor: "#FFAA0C",
-              data: [400, 400]
             }
-          ]
+          },
+          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",
+  //   path: "/GazTrends/BofGazTrend",
-    name: "BofGazTrend",
+  //   name: "BofGazTrend",
-    component: () => import("./components/GazTrends/BofGazTrend.vue"),
+  //   component: () => import("./components/GazTrends/BofGazTrend.vue"),
-    beforeEnter(to, from, next) {
+  //   beforeEnter(to, from, next) {
-      axios.defaults.headers.post["project"] = "GazTrends";
+  //     axios.defaults.headers.post["project"] = "GazTrends";
-      next();
+  //     next();
-    },
+  //   },
-  },
+  // },
 
   {
     path: "/stat",