创建echarts

hw-ui/src/components/board/Chart.vue

@@ -0,0 +1,35 @@
+<template>
+  <div style="width: 100%;height: 100%"/>
+</template>
+
+<script>
+import * as echarts from 'echarts';
+
+export default {
+  expose: ['setData'],
+  data() {
+    return {
+      chart: null,
+    }
+  },
+  mounted() {
+  },
+  beforeDestroy() {
+    if (!this.chart) {
+      return
+    }
+    this.chart.dispose()
+    this.chart = null
+  },
+  methods: {
+    setData(option) {
+      this.initChart(option)
+    },
+    initChart(option) {
+      this.chart = echarts.init(this.$el, 'macarons')
+
+      this.chart.setOption(option)
+    }
+  }
+}
+</script>

hw-ui/src/layout/index2.vue

@@ -0,0 +1,18 @@
+<template>
+  <div>
+    <router-view></router-view>
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: 'BoardIndex',
+  data() {
+    return {
+    }
+  },
+}
+</script>
+<style scoped>
+</style>

hw-ui/src/store/modules/permission.js

@@ -2,6 +2,7 @@ import auth from '@/plugins/auth'
 import router, { constantRoutes, dynamicRoutes } from '@/router'
 import { getRouters } from '@/api/menu'
 import Layout from '@/layout/index'
+import Layout2 from '@/layout/index2'
 import ParentView from '@/components/ParentView'
 import InnerLink from '@/layout/components/InnerLink'
 
@@ -58,7 +59,7 @@ function filterAsyncRouter(asyncRouterMap, lastRouter = false, type = false) {
     if (type && route.children) {
       route.children = filterChildren(route.children)
     }
-    if (route.component) {
+    if (route.component &&  !(route.name === 'Board')) {
       // Layout ParentView 组件特殊处理
       if (route.component === 'Layout') {
         route.component = Layout
@@ -70,6 +71,10 @@ function filterAsyncRouter(asyncRouterMap, lastRouter = false, type = false) {
         route.component = loadView(route.component)
       }
     }
+    if(route.name === 'Board'){
+      console.log(route)
+      route.component = Layout2
+    }
     if (route.children != null && route.children && route.children.length) {
       route.children = filterAsyncRouter(route.children, route, type)
     } else {

hw-ui/src/views/board/firstFloor/index.vue

@@ -0,0 +1,132 @@
+<template>
+  <div class="app-container">
+
+    <div class="chartBox1">
+      <div class="title"></div>
+      <div class="chart">
+        <Chart ref="chart1"></Chart>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import Chart from "@/components/board/Chart";
+import * as echarts from 'echarts'
+
+const vw = (document.documentElement.clientWidth || document.body.clientWidth) / 100
+export default {
+  name: "Board1",
+  components: {
+    Chart
+  },
+  data() {
+    return {};
+  },
+  mounted() {
+    this.$refs.chart1.setData({
+      tooltip: {
+        trigger: "axis",
+        axisPointer: {
+          // 坐标轴指示器，坐标轴触发有效
+          type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
+        },
+      },
+      grid: {
+        left: "0",
+        right: "4%",
+        bottom: "0",
+        top: 20,
+        containLabel: true,
+      },
+      xAxis: {
+        type: "category",
+        data: [1, 2, 3, 4, 5, 6],
+        axisLine: {
+          lineStyle: {
+            color: "white",
+          },
+        },
+        axisLabel: {
+          // interval: 0,
+          // rotate: 40,
+          textStyle: {
+            fontFamily: "Microsoft YaHei",
+          },
+        },
+      },
+
+      yAxis: {
+        type: "value",
+        axisLine: {
+          show: false,
+          lineStyle: {
+            color: "white",
+          },
+        },
+        splitLine: {
+          show: false,
+        },
+        axisLabel: {},
+      },
+      series: [
+        {
+          name: '数量',
+          label: {
+            normal: {
+              show: true,
+              position: "top",
+              textStyle: {
+                color: "#a8aab0",
+                fontStyle: "normal",
+                fontFamily: "微软雅黑",
+                fontSize: 0.75 * vw,
+              },
+            },
+          },
+          type: "bar",
+          barWidth: "30%",
+          barMaxWidth: 50,
+          itemStyle: {
+            normal: {
+              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                {
+                  offset: 0,
+                  color: "#39ffff",
+                },
+                {
+                  offset: 1,
+                  color: "#5affa6",
+                },
+              ]),
+            },
+          },
+          data: [1, 2, 3, 4, 5, 6],
+        },
+      ],
+    })
+  },
+  methods: {}
+};
+</script>
+<style lang="less" scoped>
+
+.app-container {
+  background-image: url("../../../assets/board/bg.jpg");
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+
+.chartBox1 {
+  position: absolute;
+  top: 23%;
+  left: 51%;
+  width: 45%;
+  height: 18.5%;
+}
+</style>

hw-ui/vue.config.js

@@ -35,7 +35,8 @@ module.exports = {
     proxy: {
       // detail: https://cli.vuejs.org/config/#devserver-proxy
       [process.env.VUE_APP_BASE_API]: {
-        target: `http://localhost:7080`,
+        target: `http://175.27.215.92:7080`,
+        // target: `http://localhost:7080`,
         changeOrigin: true,
         pathRewrite: {
           ['^' + process.env.VUE_APP_BASE_API]: ''