添加统计分析

src/layout/components/Sidebar/SidebarItem.vue

@@ -1,13 +1,8 @@
 <template>
   <div v-if="!item.hidden">
-    <template
-      v-if="hasOneShowingChild(item.children, item) && !item.alwaysShow"
-    >
+    <template v-if="hasOneShowingChild(item.children, item) && !item.alwaysShow">
       <app-link v-if="onlyOneChild.meta" :to="resolvePath(onlyOneChild.path)">
-        <el-menu-item
-          :index="resolvePath(onlyOneChild.path)"
-          :class="{ 'submenu-title-noDropdown': !isNest }"
-        >
+        <el-menu-item :index="resolvePath(onlyOneChild.path)" :class="{ 'submenu-title-noDropdown': !isNest }">
           <!-- <item :icon="onlyOneChild.meta.icon||(item.meta&&item.meta.icon)" :title="onlyOneChild.meta.title" /> -->
           <!-- <item :icon="onlyOneChild.meta.title||(item.meta&&item.meta.title)"/> -->
           <!-- <el-tooltip
@@ -19,22 +14,8 @@
           <!-- <img class="nav_item" :src="onlyOneChild.meta.imger" /> -->
           <!-- <span class="pathName" :class="getClass(item.path)"></span>
           </el-tooltip> -->
-          <el-tooltip
-            class="item"
-            effect="dark"
-            :content="onlyOneChild.meta.title"
-            placement="right"
-             v-if="!leup"
-            ><span
-              class="pathName"
-              :class="getClass(item.path)"
-            ></span
-          ></el-tooltip>
-          <span
-            class="pathNamecosy"
-            v-if="leup"
-            :class="getClass(item.path)"
-          ></span>
+          <el-tooltip class="item" effect="dark" :content="onlyOneChild.meta.title" placement="right" v-if="!leup"><span class="pathName" :class="getClass(item.path)"></span></el-tooltip>
+          <span class="pathNamecosy" v-if="leup" :class="getClass(item.path)"></span>
           <span class="pathNameer" v-if="leup">{{
             onlyOneChild.meta.title
           }}</span>
@@ -42,12 +23,7 @@
       </app-link>
     </template>
 
-    <el-submenu
-      v-else
-      ref="subMenu"
-      :index="resolvePath(item.path)"
-      popper-append-to-body
-    >
+    <el-submenu v-else ref="subMenu" :index="resolvePath(item.path)" popper-append-to-body>
       <template slot="title">
         <img class="nav_item" :src="onlyOneChild.meta.imger" />
       </template>
@@ -88,19 +64,19 @@ export default {
       default: true,
     },
   },
-  data() {
+  data () {
     // To fix https://github.com/PanJiaChen/vue-admin-template/issues/237
     // TODO: refactor with render function
     this.onlyOneChild = null;
     return {};
   },
-  mounted() {
+  mounted () {
     // console.log(this.item, 'item')
     // const vnodes
     // vnodes.push(<span slot='title'>{(title)}</span>)
   },
   methods: {
-    hasOneShowingChild(children = [], parent) {
+    hasOneShowingChild (children = [], parent) {
       // console.log(this.item,'item')
       const showingChildren = children.filter((item) => {
         if (item.hidden) {
@@ -141,7 +117,7 @@ export default {
 
       return false;
     },
-    resolvePath(routePath) {
+    resolvePath (routePath) {
       if (isExternal(routePath)) {
         return routePath;
       }
@@ -150,7 +126,7 @@ export default {
       }
       return path.resolve(this.basePath, routePath);
     },
-    getClass(path) {
+    getClass (path) {
       const p = path.split("/").join("");
       if (p) {
         return p;
@@ -245,9 +221,13 @@ export default {
   }
 
   .statisticsCharts {
-    background: url("../../../assets/nav/ic_list_nav_statistical_check.png") no-repeat;
+    background: url("../../../assets/nav/ic_list_nav_statistical_check.png")
+      no-repeat;
+  }
+  .statisticalAnalysis {
+    background: url("../../../assets/nav/ic_list_nav_screen_check.png")
+      no-repeat;
   }
-
 }
 // ::v-deep .el-menu-item {
 //   transition: border-color 0.3s, background-color 0s, color 0s;
@@ -433,9 +413,20 @@ export default {
 }
 
 .statisticsCharts {
-  background: url("../../../assets/nav/ic_list_nav_statistical_default .png") no-repeat;
+  background: url("../../../assets/nav/ic_list_nav_statistical_default .png")
+    no-repeat;
+  &:hover {
+    background: url("../../../assets/nav/ic_list_nav_statistical_check.png")
+      no-repeat;
+  }
+}
+
+.statisticalAnalysis {
+  background: url("../../../assets/nav/ic_list_nav_screen_default.png")
+    no-repeat;
   &:hover {
-    background: url("../../../assets/nav/ic_list_nav_statistical_check.png") no-repeat;
+    background: url("../../../assets/nav/ic_list_nav_screen_check.png")
+      no-repeat;
   }
 }
 

src/layout/components/Sidebar/index.vue

@@ -202,7 +202,12 @@ export default {
       background: url("../../../assets/nav/ic_setting_nav_check.png") no-repeat;
     }
     .statisticsCharts {
-      background: url("../../../assets/nav/ic_list_nav_statistical_check.png") no-repeat;
+      background: url("../../../assets/nav/ic_list_nav_statistical_check.png")
+        no-repeat;
+    }
+    .statisticalAnalysis {
+      background: url("../../../assets/nav/ic_list_nav_screen_check.png")
+        no-repeat;
     }
   }
 }

src/router/routes/routes-file-six.js

@@ -110,4 +110,35 @@ const statisticsChartsRoutes = {
   ]
 }
 
-export default [statisticsChartsRoutes]
+const statisticalAnalysis = {
+  path: '/statisticalAnalysis',
+  component: Layout,
+  meta: {
+    keepAlive: false,
+  },
+  children: [
+    {
+      path: '/statisticalAnalysis',
+      name: 'statisticalAnalysis',
+      redirect: 'flight',
+      component: () => import('@/views/statisticalAnalysis'),
+      meta: {
+        title: '统计分析',
+        imgstyle: 'ic_list_nav_screen_default.png',
+        imgstyleup: 'ic_list_nav_screen_check.png',
+        keepAlive: false
+      },
+      children: [
+        {
+          path: '/statisticalAnalysis',
+          name: 'statisticalAnalysisContent',
+          component: () => import('@/views/statisticalAnalysis/components'),
+          meta: {
+            keepAlive: false
+          },
+        }
+      ]
+    }
+  ]
+}
+export default [statisticalAnalysis, statisticsChartsRoutes]

src/views/statisticalAnalysis/components/index.vue

@@ -0,0 +1,87 @@
+<template>
+  <div class="statisticalAnalysisContent">
+    <div class="manageTitle">统计分析</div>
+    <div class="content">
+      <div class="content-list flex-wrap">
+        <div class="content-list-box">
+          <div class="content-list-box-bp">dd</div>
+        </div>
+        <div class="content-list-box">
+          <div class="content-list-box-bp">dd</div>
+        </div>
+        <div class="content-list-box">
+          <div class="content-list-box-bp">dd</div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'statisticalAnalysisContent'
+}
+</script>
+
+<style lang="scss" scoped>
+.statisticalAnalysisContent {
+  color: #fff;
+  padding: 30px 24px 40px 24px;
+  min-height: calc(100vh - 80px);
+  background-image: url("../../../assets/analysis/bg.png");
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+  .manageTitle {
+    color: #fff;
+  }
+  .content {
+    margin-top: 28px;
+    &-list {
+      &-box {
+        flex: 1;
+        margin-right: 36px;
+        background-image: linear-gradient(
+            #fff 2px,
+            transparent 2px,
+            transparent calc(100% - 2px),
+            #fff calc(100% - 2px),
+            #fff 100%
+          ),
+          linear-gradient(
+            90deg,
+            #fff 2px,
+            transparent 2px,
+            transparent calc(100% - 2px),
+            #fff calc(100% - 2px),
+            #fff 100%
+          ),
+          linear-gradient(
+            #fff 2px,
+            transparent 2px,
+            transparent calc(100% - 2px),
+            #fff calc(100% - 2px),
+            #fff 100%
+          ),
+          linear-gradient(
+            90deg,
+            #fff 2px,
+            transparent 2px,
+            transparent calc(100% - 2px),
+            #fff calc(100% - 2px),
+            #fff 100%
+          );
+        background-repeat: no-repeat;
+        background-position: top left, top left, bottom right, bottom right;
+        background-size: 10px 100%, 100% 10px;
+        &-bp {
+          padding: 36px;
+          border: 1px solid rgba($color: #fff, $alpha: 0.3);
+        }
+        &:last-child {
+          margin-right: 0;
+        }
+      }
+    }
+  }
+}
+</style>>

src/views/statisticalAnalysis/index.vue

@@ -0,0 +1,11 @@
+<template>
+  <div class="statisticalAnalysis-content">
+    <router-view />
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'statisticalAnalysis'
+}
+</script>