revert web code (#2215)

web/frps/src/components/Traffic.vue

@@ -1,26 +1,36 @@
 <template>
-  <div :id="proxyName" style="width: 600px; height: 400px" />
+    <div :id="proxy_name" style="width: 600px;height:400px;"></div>
 </template>
 
 <script>
-import { DrawProxyTrafficChart } from '../utils/chart.js'
+import {DrawProxyTrafficChart} from '../utils/chart.js'
 export default {
-  props: {
-    proxyName: {
-      type: String,
-      required: true
+    props: ['proxy_name'],
+    created() {
+        this.fetchData()
+    },
+    //watch: {
+        //'$route': 'fetchData'
+    //},
+    methods: {
+        fetchData() {
+            let url = '/api/traffic/' + this.proxy_name
+            fetch(url, {credentials: 'include'})
+              .then(res => {
+                return res.json()
+              }).then(json => {
+                DrawProxyTrafficChart(this.proxy_name, json.traffic_in, json.traffic_out)
+              }).catch( err => {
+                  this.$message({
+                      showClose: true,
+                      message: 'Get server info from frps failed!' + err,
+                      type: 'warning'
+                    })
+              })
+        }
     }
-  },
-  mounted() {
-    this.initData()
-  },
-  methods: {
-    async initData() {
-      const json = await this.$fetch(`traffic/${this.proxyName}`)
-      if (!json) return
-
-      DrawProxyTrafficChart(this.proxyName, json.traffic_in, json.traffic_out)
-    }
-  }
 }
 </script>
+
+<style>
+</style>