部分可视化及axios测试

OpenHDH_WEBUI.code-workspace

@@ -5,6 +5,6 @@
 		}
 	],
 	"settings": {
-		"vue3snippets.enable-compile-vue-file-on-did-save-code": false
+		"vue3snippets.enable-compile-vue-file-on-did-save-code": true
 	}
 }

package.json

@@ -7,12 +7,16 @@
     "build": "vue-cli-service build"
   },
   "dependencies": {
-    "core-js": "^2.6.5",
+    "autoprefixer": "^10.4.14",
+    "axios": "^1.4.0",
+    "core-js": "^3.30.1",
+    "echarts": "^5.4.2",
+    "jquery": "^3.6.4",
     "vue": "^2.6.10"
   },
   "devDependencies": {
-    "@vue/cli-plugin-babel": "^3.8.0",
-    "@vue/cli-service": "^3.8.0",
+    "@vue/cli-plugin-babel": "^5.0.8",
+    "@vue/cli-service": "^5.0.8",
     "vue-template-compiler": "^2.6.10"
   }
 }

src/App.vue

@@ -1,18 +1,18 @@
 <template>
   <div id="app">
-    <img alt="Vue logo" src="./assets/logo.png" />
-    <HelloWorld msg="Welcome to Your Vue.js App" />
+    <!-- <img alt="Vue logo" src="./assets/logo.png" />
+    <HelloWorld msg="Welcome to Your Vue.js App" /> -->
     <index></index>
   </div>
 </template>
 
 <script>
 import HelloWorld from "./components/HelloWorld.vue";
-import index from "./components/index/index.vue"
+import index from "./components/index/index.vue";
 export default {
   name: "app",
   components: {
-    HelloWorld,index
+    index,
   },
 };
 </script>

src/components/index/index.vue

@@ -1,23 +1,152 @@
 <template>
-    <div>
-        {{ this.a }}
-    </div>
+  <div>
+    <table style="margin: 0 auto">
+      <thead>
+        <th>Once</th>
+        <th>Pocitod</th>
+      </thead>
+      <tbody>
+        <tr v-for="(list, index) in lists" :key="list.guid">
+          <td>{{ index }}</td>
+          <td>{{ list.tablename }}</td>
+          <td></td>
+        </tr>
+      </tbody>
+    </table>
+    <div id="myChart" style="width: 600px; height: 400px"></div>
+    <div id="myChart2" style="width: 600px; height: 400px"></div>
+  </div>
 </template>
 
 <script>
-    export default {
-        name:"index",
-        data() {
-            return {
-                a:"aaa",
-            }
+import * as echarts from "echarts";
+import $ from "jquery";
+import axios from "axios";
+
+window.jQuery = $;
+window.$ = $;
+
+export default {
+  name: "index",
+  data() {
+    return {
+      a: "aaa",
+      lists: [
+        {
+          tablename: "tb1",
+          uuid: this.guid(),
         },
-        methods: {
-            
+        {
+          tablename: "tb2",
+          uuid: this.guid(),
         },
-    }
-</script>
+        {
+          tablename: "tb3",
+          uuid: this.guid(),
+        },
+        {
+          tablename: "tb4",
+          uuid: this.guid(),
+        },
+      ],
+      iplist: [
+        { value: 1048, name: "Search Engine" },
+        { value: 735, name: "Direct" },
+        { value: 580, name: "Email" },
+        { value: 484, name: "Union Ads" },
+        { value: 300, name: "Video Ads" },
+      ],
+    };
+  },
+  methods: {
+    guid() {
+      return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, function (c) {
+        var r = (Math.random() * 16) | 0,
+          v = c == "x" ? r : (r & 0x3) | 0x8;
+        return v.toString(16);
+      });
+    },
+    drawLine() {
+      // 基于准备好的dom，初始化echarts实例
+      var myChart = echarts.init(document.getElementById("myChart"));
+      // 绘制图表
+      myChart.setOption({
+        title: {
+          text: "ECharts 入门示例",
+        },
+        tooltip: {},
+        xAxis: {
+          data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
+        },
+        yAxis: {},
+        series: [
+          {
+            name: "销量",
+            type: "bar",
+            data: [5, 20, 36, 10, 10, 20],
+          },
+        ],
+      });
+    },
+    drawLine3() {
+      var chartDom = document.getElementById("myChart2");
+      var myChart = echarts.init(chartDom);
+      var option;
+      option = {
+        title: {
+          text: "Referer of a Website",
+          subtext: "Fake Data",
+          left: "center",
+        },
+        tooltip: {
+          trigger: "item",
+        },
+        legend: {
+          orient: "vertical",
+          left: "left",
+        },
+        series: [
+          {
+            name: "Access From",
+            type: "pie",
+            radius: "50%",
+            data: this.iplist,
+            emphasis: {
+              itemStyle: {
+                shadowBlur: 10,
+                shadowOffsetX: 0,
+                shadowColor: "rgba(0, 0, 0, 0.5)",
+              },
+            },
+          },
+        ],
+      };
 
-<style lang="less" scoped>
+      option && myChart.setOption(option);
+    },
+    upmydata() {
+      console.log(this.iplist);
+      axios
+        .post("http://localhost:8080/getpv", {})
+        .then((res) => {
+          console.log(res.data);
+          this.iplist = res.data;
+          console.log(this.iplist);
+          console.log("正在重新赋值");
+          console.log("更新完成");
+          this.drawLine3();
+        })
+        .catch(function (error) {
+          console.log(error);
+        });
+    },
+  },
+  mounted() {
+    this.upmydata();
+    this.drawLine();
+    this.drawLine3();
+  },
+};
+</script>
 
-</style>
+<style lang="less" scoped></style>