修改

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

@@ -279,6 +279,11 @@ const statisticsChartsRoutes = {
               meta: { title: '赔偿金额分类统计' }
             }
           ]
+        },
+        {
+          path: 'statisticalAnalysis',
+          name: 'statisticalAnalysisContent',
+          component: () => import('@/views/statisticalAnalysis/components')
         }
       ]
     }
@@ -309,4 +314,4 @@ const statisticalAnalysis = {
     }
   ]
 }
-export default [statisticalAnalysis, statisticsChartsRoutes]
+export default [statisticsChartsRoutes]

src/views/statisticalAnalysis/components/index.vue

@@ -1,6 +1,11 @@
 <template>
   <div class="statisticalAnalysisContent">
-    <div class="manageTitle">统计分析</div>
+    <div class="flex">
+      <div class="manageTitle">统计分析</div>
+      <div class="manageBtns">
+        <el-button>黑色</el-button>
+      </div>
+    </div>
     <div class="content">
       <div class="content-list flex-wrap">
         <div class="content-list-box">

src/views/statisticsCharts/components/statisticsTabs.vue

@@ -1,58 +1,25 @@
 <template>
   <div class="statistics-tabs">
-    <el-row
-      :gutter="16"
-      type="flex"
-    >
-      <el-col
-        v-for="(tab, index) in tabList"
-        :key="index"
-        :span="4"
-      >
-        <el-dropdown
-          v-if="tab.children && tab.children.length"
-          placement="bottom"
-          @command="commandHandler"
-        >
+    <el-row :gutter="16" type="flex">
+      <el-col v-for="(tab, index) in tabList" :key="index" :span="4">
+        <el-dropdown v-if="tab.children && tab.children.length" placement="bottom" @command="commandHandler">
           <div :class="['tab-bar', { 'tab-active': activeIndex === index }]">
-            <img
-              class="tab-icon"
-              :src="activeIndex === index ? activeIcon : defaultIcon"
-              :alt="tab.title"
-            >
-            <el-tooltip
-              :content="tab.title"
-              placement="top"
-            >
+            <img class="tab-icon" :src="activeIndex === index ? activeIcon : defaultIcon" :alt="tab.title">
+            <el-tooltip :content="tab.title" placement="top">
               <span class="tab-title">{{ tab.title }}</span>
             </el-tooltip>
             <i class="icon-arrow el-icon-caret-bottom" />
           </div>
           <el-dropdown-menu slot="dropdown">
-            <el-dropdown-item
-              v-for="(childTab, childIndex) in tab.children"
-              :key="childIndex"
-              :command="[tab.path, childTab.path]"
-            >{{ childTab.title }}</el-dropdown-item>
+            <el-dropdown-item v-for="(childTab, childIndex) in tab.children" :key="childIndex" :command="[tab.path, childTab.path]">{{ childTab.title }}</el-dropdown-item>
           </el-dropdown-menu>
         </el-dropdown>
-        <div
-          v-else
-          :class="[
+        <div v-else :class="[
             'tab-bar tab-bar-single',
             { 'tab-active': activeIndex === index },
-          ]"
-          @click="clickHandler(tab.path)"
-        >
-          <img
-            class="tab-icon"
-            :src="activeIndex === index ? activeIcon : defaultIcon"
-            :alt="tab.title"
-          >
-          <el-tooltip
-            :content="tab.title"
-            placement="top"
-          >
+          ]" @click="clickHandler(tab.path)">
+          <img class="tab-icon" :src="activeIndex === index ? activeIcon : defaultIcon" :alt="tab.title">
+          <el-tooltip :content="tab.title" placement="top">
             <span class="tab-title">{{ tab.title }}</span>
           </el-tooltip>
         </div>
@@ -64,7 +31,7 @@
 <script>
 export default {
   name: 'StatisticsTabs',
-  data() {
+  data () {
     return {
       defaultIcon: require('@/assets/nav/ic_statistical_top_default.png'),
       activeIcon: require('@/assets/nav/ic_statistical_top_check.png'),
@@ -202,14 +169,18 @@ export default {
               title: '赔偿金额分类统计'
             }
           ]
-        }
+        },
+        {
+          path: '/statisticsCharts/statisticalAnalysis',
+          title: '统计分析'
+        },
       ],
       activeIndex: null
     }
   },
   watch: {
     '$route.path': {
-      handler(path) {
+      handler (path) {
         let activeIndex = null
         this.tabList.some((tab, index) => {
           if (path.includes(tab.path)) {
@@ -223,7 +194,7 @@ export default {
     }
   },
   methods: {
-    commandHandler(pathArray) {
+    commandHandler (pathArray) {
       if (pathArray.some(path => !path)) {
         this.$message.info('开发中')
         return
@@ -232,7 +203,7 @@ export default {
         path: pathArray.join('/')
       })
     },
-    clickHandler(path) {
+    clickHandler (path) {
       if (!path) {
         this.$message.info('开发中')
         return
@@ -277,7 +248,7 @@ export default {
         padding-left: 12px;
         padding-right: 8px;
         font-size: 14px;
-        font-family: Helvetica, 'Microsoft YaHei';
+        font-family: Helvetica, "Microsoft YaHei";
         font-weight: bold;
         color: #101116;
         letter-spacing: 0;