From fff060f6707338d10d873c560b6439f5ce2f99e5 Mon Sep 17 00:00:00 2001
From: panqihua <panqihua@melt.icu>
Date: Thu, 26 Jan 2023 21:41:05 +0800
Subject: [PATCH] =?UTF-8?q?1.=E8=B0=83=E6=95=B4=E6=80=BB=E5=B9=B3=E5=8F=B0?=
 =?UTF-8?q?=E9=A6=96=E9=A1=B5=202.=E9=A6=96=E9=A1=B5=E6=94=B9=E4=B8=BA?=
 =?UTF-8?q?=E5=8A=A8=E6=80=81=E5=8A=A0=E8=BD=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/permission.js            |  11 +-
 src/router/index.js          |  22 +--
 src/views/platform/index.vue | 323 +++++++++++++++++++++++++++++++++++
 3 files changed, 337 insertions(+), 19 deletions(-)
 create mode 100644 src/views/platform/index.vue

diff --git a/src/permission.js b/src/permission.js
index 6bb0a1f..37fa9a9 100644
--- a/src/permission.js
+++ b/src/permission.js
@@ -25,9 +25,18 @@ router.beforeEach((to, from, next) => {
         store.dispatch('GetInfo').then(() => {
           isRelogin.show = false
           store.dispatch('GenerateRoutes').then(accessRoutes => {
+            // 自动跳转到根路由
+            let root = accessRoutes.find(item => item.path === '/')
+            let _to
+            if (root && root.children.find(item => item.path.endsWith('index'))) {
+              root.redirect = root.children.find(item => item.path.endsWith('/index')).path
+              _to = { ...to, replace: true, path: root.redirect }
+            } else {
+              _to = { ...to, replace: true }
+            }
             // 根据roles权限生成可访问的路由表
             router.addRoutes(accessRoutes) // 动态添加可访问路由表
-            next({ ...to, replace: true }) // hack方法 确保addRoutes已完成
+            next(_to) // hack方法 确保addRoutes已完成
           })
         }).catch(err => {
             store.dispatch('LogOut').then(() => {
diff --git a/src/router/index.js b/src/router/index.js
index d3d358e..87e9b58 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -1,11 +1,10 @@
-import Vue from "vue";
-import Router from "vue-router";
+import Vue from 'vue'
+import Router from 'vue-router'
+/* Layout */
+import Layout from '@/layout'
 
 Vue.use(Router);
 
-/* Layout */
-import Layout from "@/layout";
-
 /**
  * Note: 路由配置项
  *
@@ -61,19 +60,6 @@ export const constantRoutes = [
     component: () => import("@/views/error/401"),
     hidden: true,
   },
-  {
-    path: "",
-    component: Layout,
-    redirect: "index",
-    children: [
-      {
-        path: "index",
-        component: () => import("@/views/index"),
-        name: "Index",
-        meta: { title: "数据面板", icon: "dashboard", affix: true },
-      },
-    ],
-  },
   {
     path: "/user",
     component: Layout,
diff --git a/src/views/platform/index.vue b/src/views/platform/index.vue
new file mode 100644
index 0000000..c1a5e22
--- /dev/null
+++ b/src/views/platform/index.vue
@@ -0,0 +1,323 @@
+<template>
+  <div class="app-container home">
+    <div class="title">{{ $route.meta.title }}</div>
+    <div class="body">
+      <el-card class="today">
+        <div class="card-title">今日核心数据</div>
+        <el-row type="flex" class="data">
+          <el-col>
+            <div class="label">新用户</div>
+            <div class="num">569</div>
+            <div class="bottom-label">同比上周<span class="up">8.63%</span><i class="el-icon-caret-top up"></i></div>
+          </el-col>
+          <div class="divider"></div>
+          <el-col>
+            <div class="label">新用户</div>
+            <div class="num">569</div>
+            <div class="bottom-label">同比上周<span class="up">8.63%</span><i class="el-icon-caret-top up"></i></div>
+          </el-col>
+          <div class="divider"></div>
+          <el-col>
+            <div class="label">新用户</div>
+            <div class="num">569</div>
+            <div class="bottom-label">同比上周<span class="down">8.63%</span><i class="el-icon-caret-bottom down"></i>
+            </div>
+          </el-col>
+          <div class="divider"></div>
+          <el-col>
+            <div class="label">近7日UV</div>
+            <div class="num">569</div>
+          </el-col>
+          <div class="divider"></div>
+          <el-col>
+            <div class="label">近30日UV</div>
+            <div class="num">569</div>
+          </el-col>
+        </el-row>
+      </el-card>
+      <el-row :gutter="10" class="order" type="flex">
+        <el-col :span="14">
+          <el-card>
+            <div class="card-title">全部订单</div>
+            <el-row type="flex" class="all-card" :gutter="10">
+              <el-col>
+                <div class="data">
+                  <div class="img"></div>
+                  <div class="value">待付款：123</div>
+                </div>
+              </el-col>
+              <el-col>
+                <div class="data">
+                  <div class="img"></div>
+                  <div class="value">待付款：123</div>
+                </div>
+              </el-col>
+              <el-col>
+                <div class="data">
+                  <div class="img"></div>
+                  <div class="value">待付款：123</div>
+                </div>
+              </el-col>
+              <el-col>
+                <div class="data">
+                  <div class="img"></div>
+                  <div class="value">待付款：123</div>
+                </div>
+              </el-col>
+              <el-col>
+                <div class="data">
+                  <div class="img"></div>
+                  <div class="value">待付款：123</div>
+                </div>
+              </el-col>
+            </el-row>
+          </el-card>
+        </el-col>
+        <el-col :span="5">
+          <el-card class="today-order">
+            <div class="num">569</div>
+            <div class="bottom-label">今日订单数</div>
+          </el-card>
+        </el-col>
+        <el-col :span="5">
+          <el-card class="total-income">
+            <div class="num">569.00</div>
+            <div class="bottom-label">今日总收入</div>
+          </el-card>
+        </el-col>
+      </el-row>
+      <el-row :gutter="10" type="flex" class="bottom">
+        <el-col :span="14">
+          <el-card>
+            <div class="card-title">月销售趋势</div>
+            <div ref="chart" class="chart"></div>
+          </el-card>
+        </el-col>
+        <el-col :span="10" class="rank">
+          <el-card class="h-100">
+            <div class="top">
+              <div class="card-title">商品销售TOP5</div>
+              <el-dropdown class="select-day">
+                <span class="el-dropdown-link">
+                  近7天<i class="el-icon-arrow-down el-icon--right"></i>
+                </span>
+                <el-dropdown-menu slot="dropdown">
+                </el-dropdown-menu>
+              </el-dropdown>
+            </div>
+            <el-table :data="rankData">
+              <el-table-column label="排名" type="index" align="center"></el-table-column>
+              <el-table-column label="商品" prop="name" align="center"></el-table-column>
+              <el-table-column label="订单数" prop="order" align="center"></el-table-column>
+              <el-table-column label="销售总额" prop="price" align="center"></el-table-column>
+            </el-table>
+          </el-card>
+        </el-col>
+      </el-row>
+    </div>
+    <div class="service" v-draggable="{ x: true, y: true }"/>
+  </div>
+</template>
+
+<script>
+
+import echarts from '@/plugins/echarts'
+
+export default {
+  name: 'Index',
+  data() {
+    return {
+      // 商品销售数据
+      rankData: Array.from(new Array(5).keys()).map(item => {
+        return {
+          name: '华为Mate 40 手机',
+          order: 56,
+          price: 1555646.00
+        }
+      })
+    }
+  },
+  mounted() {
+    this.initChart()
+  },
+  methods: {
+    initChart() {
+      let myChart = echarts.init(this.$refs.chart)
+      let option
+
+      option = {
+        xAxis: {
+          type: 'category',
+          data: Array.from(new Array(12).keys()).map(item => `${item + 1}月`)
+        },
+        yAxis: {
+          type: 'value'
+        },
+        tooltip: {
+          show: true,
+          trigger: 'axis'
+        },
+        series: [
+          {
+            data: Array.from(new Array(12).keys()).map(item => Math.round(Math.random() * 500)),
+            type: 'line'
+          },
+          {
+            data: Array.from(new Array(12).keys()).map(item => Math.round(Math.random() * 500)),
+            type: 'line'
+          }
+        ]
+      }
+
+      option && myChart.setOption(option)
+
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.home {
+  background-color: #f8f9fd;
+
+  .service {
+    border-radius: 50%;
+    width: 100px;
+    height: 100px;
+    position: absolute;
+    bottom: 40px;
+    right: 40px;
+    background-color: #fff;
+    box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.4);
+  }
+
+  & > .title {
+    color: rgba(22, 132, 252, 1);
+    font-size: 14px;
+    text-align: left;
+    font-family: SourceHanSansSC-regular;
+  }
+
+  .card-title {
+    font-size: 20px;
+    margin-bottom: 20px;
+    font-weight: bold;
+  }
+
+  .num {
+    font-size: 24px;
+    margin-top: 10px;
+  }
+
+  .bottom-label {
+    font-size: 16px;
+    margin-top: 10px;
+  }
+
+  & > .body {
+    background-color: #f5f5f5;
+
+    & > .today {
+      margin-top: 10px;
+
+
+      .data {
+
+        @for $i from 1 through 4 {
+          & > .divider:nth-of-type(#{$i*2}) {
+            height: 75%;
+            width: 1px;
+            background-color: rgba(0, 0, 0, 0.2);
+            position: absolute;
+            bottom: 0;
+            left: 20% * $i;
+          }
+        }
+
+        .label {
+          font-size: 16px;
+        }
+
+        .up {
+          color: red;
+        }
+
+        .down {
+          color: green;
+        }
+
+        .up,
+        .down {
+          margin-left: 10px;
+        }
+
+        .label,
+        .num,
+        .bottom-label {
+          margin-left: 15%;
+        }
+      }
+    }
+
+
+    & > .order {
+      margin-top: 10px;
+
+      .all-card {
+        .data {
+          text-align: center;
+
+          & > .img {
+            background-color: #e9f2ff;
+            width: 50%;
+            /* 设置高度为宽度 */
+            padding-top: 50%;
+            margin: auto;
+            border-radius: 10px;
+          }
+
+          & > .value {
+            font-size: 16px;
+            margin-top: 5px;
+          }
+        }
+      }
+
+      .today-order,
+      .total-income {
+        height: 100%;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        text-align: center;
+      }
+    }
+
+    & > .bottom {
+      margin-top: 10px;
+
+      .h-100 {
+        height: 100%;
+      }
+
+      & > .rank {
+        .top {
+          display: flex;
+          justify-content: space-between;
+
+          .select-day {
+            font-size: 16px;
+            margin-top: 5px;
+          }
+        }
+      }
+
+      .chart {
+        height: 400px;
+      }
+    }
+
+  }
+}
+</style>
+