添加活动管理页

src/components/header.vue

@@ -88,7 +88,7 @@ export default {
         {
           index: "8",
           title: "活动管理",
-          path: "/08"
+          path: "/activity"
         },
       ],
       timeout: undefined,

src/pages/activity/index.vue

@@ -1,11 +1,19 @@
 <template>
   <div class="main">
+    <!--    <userStatus />-->
+    <!-- <h1>首页</h1> -->
+    <!--    <img class="h1" src="../../assets/img/h1.png" />-->
     <Header :headerObj="{title:'中科软养老大数据分析平台', index: '8'}"/>
-    <img src="@/assets/img/page2/08活动管理.png" alt="" style="width: 100vw;height: calc(100vh - 5vw);">
+    <home></home>
+    <!--    <Nav />-->
+    <!--    <img class="b" src="../../assets/img/1.png" alt="" />-->
   </div>
 </template>
 <script>
 import Header from '@/components/header'
+import home from './home.vue'
+import userStatus from "@/components/userStatus";
+import { Index } from "@/api/index";
 
 export default {
   name: "index",
@@ -26,6 +34,8 @@ export default {
   },
   components: {
     Header,
+    home,
+    userStatus,
   },
   methods: {
     init() {

src/pages/live/home.vue

@@ -129,6 +129,7 @@
           <div class="center-bottom-title btm-til2"></div>
           <div class="chart_box">
             <Echarts
+                :key="echartObjKey"
                 class="echarts"
                 :echartObj="echartObj7"
             ></Echarts>
@@ -173,10 +174,78 @@ Vue.use(Progress);
 Vue.use(Divider);
 import Echarts from "@/components/echarts";
 import echarts from "echarts";
+// 定义柱状图左侧图形元素
+const leftRect = echarts.graphic.extendShape({
+  shape: {
+    x: 0,
+    y: 0,
+    width: 16, //柱状图宽
+    zWidth: 8, //阴影折角宽
+    zHeight: 4 //阴影折角高
+  },
+  buildPath: function (ctx, shape) {
+    const api = shape.api;
+    const xAxisPoint = api.coord([shape.xValue, 0]);
+    const p0 = [shape.x - shape.width / 2, shape.y - shape.zHeight];
+    const p1 = [shape.x - shape.width / 2, shape.y - shape.zHeight];
+    const p2 = [xAxisPoint[0] - shape.width / 2, xAxisPoint[1]];
+    const p3 = [xAxisPoint[0] + shape.width / 2, xAxisPoint[1]];
+    const p4 = [shape.x + shape.width / 2, shape.y];
 
+    ctx.moveTo(p0[0], p0[1]);
+    ctx.lineTo(p1[0], p1[1]);
+    ctx.lineTo(p2[0], p2[1]);
+    ctx.lineTo(p3[0], p3[1]);
+    ctx.lineTo(p4[0], p4[1]);
+    ctx.lineTo(p0[0], p0[1]);
+    ctx.closePath();
+  }
+});
+// 定义柱状图右侧以及顶部图形元素
+const rightRect = echarts.graphic.extendShape({
+  shape: {
+    x: 0,
+    y: 0,
+    width: 15,
+    zWidth: 12,
+    zHeight: 8
+  },
+  buildPath: function (ctx, shape) {
+    const api = shape.api;
+    const xAxisPoint = api.coord([shape.xValue, 0]);
+    const p1 = [shape.x - shape.width / 2, shape.y - shape.zHeight / 2];
+    const p3 = [xAxisPoint[0] + shape.width / 2, xAxisPoint[1]];
+    const p4 = [shape.x + shape.width / 2, shape.y];
+    const p5 = [xAxisPoint[0] + shape.width / 2 + shape.zWidth, xAxisPoint[1]];
+    const p6 = [
+      shape.x + shape.width / 2 + shape.zWidth,
+      shape.y - shape.zHeight / 2
+    ];
+    const p7 = [
+      shape.x - shape.width / 2 + shape.zWidth,
+      shape.y - shape.zHeight
+    ];
+    ctx.moveTo(p4[0], p4[1]);
+    ctx.lineTo(p3[0], p3[1]);
+    ctx.lineTo(p5[0], p5[1]);
+    ctx.lineTo(p6[0], p6[1]);
+    ctx.lineTo(p4[0], p4[1]);
+
+    ctx.moveTo(p4[0], p4[1]);
+    ctx.lineTo(p6[0], p6[1]);
+    ctx.lineTo(p7[0], p7[1]);
+    ctx.lineTo(p1[0], p1[1]);
+    ctx.lineTo(p4[0], p4[1]);
+    ctx.closePath();
+  }
+});
+// 注册图形元素
+echarts.graphic.registerShape('leftRect', leftRect);
+echarts.graphic.registerShape('rightRect', rightRect);
 export default {
   data() {
     return {
+      echartObjKey: "echartObjKey",
       // 各机构能床位TOP5
       echartObj1: {
         legend: {

src/router.js

@@ -74,9 +74,9 @@ export default new Router({
       }
     },
     {
-      path: '/08',
-      name: '08',
-      component: () => import('@/pages/page/08'),
+      path: '/activity',
+      name: 'activity',
+      component: () => import('@/pages/activity/index'),
       meta: {
         index: 0,
       }