首页开发

src/router/router.system.js

@@ -5,7 +5,19 @@ const ERROR = () => import('@/views/exception/errors.vue')
 
 // login
 const LOGIN = () => import("@/views/login/index.vue")
+const HOME = () => import("@/views/home/index.vue")
 
+export const publicMenu = [
+  {
+    path: "/home",
+    name: "home",
+    component: HOME,
+    meta: {
+      title: '首页',
+      icon: 'Dh-shouye3'
+    }
+  },
+]
 
 export const systemRoutes = [
   {

src/router/router.update.js

@@ -2,6 +2,7 @@ import { systemUserInfoMenu } from "@/api/path/system.api";
 import { systemRoutes } from "./router.system";
 import { getLocalStorage, getParseLang } from '@/utils'
 import { lang } from '@/settings/designSetting'
+import { publicMenu } from './router.system.js'
 
 const LAYOUT = () => import("@/components/Layout/Layout.vue");
 
@@ -57,14 +58,14 @@ export const updateRouteByMenu = async (router, systemStore) => {
       value: menuList || [],
       localStorage: true,
     });
-    const pathHome = findPath(menuList[0]);
+    const pathHome = findPath(publicMenu[0]);
     const mainRoutes = toRoutesJson(menuList);
     const routes = {
       path: "/",
       name: "main",
       redirect: pathHome.path,
       component: LAYOUT,
-      children: mainRoutes,
+      children: [...publicMenu,...mainRoutes],
     };
     router.options.routes = [routes, ...systemRoutes];
     await router.addRoute(routes);

src/views/home/index.vue

@@ -0,0 +1,370 @@
+<template>
+  <div class="container">
+    <div class="leftModel">
+      <div class="cardModel">
+        <div class="modelTitle">预警总览</div>
+        <div class="early">
+          <div class="earlyCard">
+            <div class="title">账户预警</div>
+            <div class="item">
+              <div class="txt">预警</div>
+              <div class="val">10000</div>
+            </div>
+            <div class="item">
+              <div class="txt">欠费</div>
+              <div class="val">10000</div>
+            </div>
+          </div>
+          <div class="earlyCard">
+            <div class="title">卡预警</div>
+            <div class="list">
+              <div class="item">
+                <div class="txt">将达量</div>
+                <div class="val">10000</div>
+              </div>
+              <div class="item">
+                <div class="txt">已达量</div>
+                <div class="val">10000</div>
+              </div>
+              <div class="item">
+                <div class="txt">将到期</div>
+                <div class="val">10000</div>
+              </div>
+              <div class="item">
+                <div class="txt">已到期</div>
+                <div class="val">10000</div>
+              </div>
+            </div>
+          </div>
+          <div class="earlyCard">
+            <div class="title">池预警</div>
+            <div class="item">
+              <div class="txt">预警</div>
+              <div class="val">10000</div>
+            </div>
+            <div class="item">
+              <div class="txt">达量</div>
+              <div class="val">10000</div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div class="cardModel">
+        <div class="modelTitle">物联网卡总览</div>
+        <div class="networkList">
+          <div class="networkCard">
+            <div class="title">本月异常</div>
+            <div class="item">
+              <div class="txt">9</div>
+              <div class="val">张</div>
+            </div>
+          </div>
+          <div class="networkCard">
+            <div class="title">下月到期</div>
+            <div class="item">
+              <div class="txt">9</div>
+              <div class="val">张</div>
+            </div>
+          </div>
+          <div class="networkCard">
+            <div class="title">本月超停</div>
+            <div class="item">
+              <div class="txt">9</div>
+              <div class="val">张</div>
+            </div>
+          </div>
+          <div class="networkCard">
+            <div class="title">本月到期</div>
+            <div class="item">
+              <div class="txt">9</div>
+              <div class="val">张</div>
+            </div>
+          </div>
+          <div class="networkCard">
+            <div class="title">上月到期</div>
+            <div class="item">
+              <div class="txt">9</div>
+              <div class="val">张</div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div class="cardModel">
+        <div class="modelTitle">账户信息</div>
+        <div class="accountList">
+          <div class="item">
+            <div class="txt">账户余额</div>
+            <div class="val">
+              1000
+              <a-link href="link" :hoverable="false">告警</a-link>
+              <a-link href="link" :hoverable="false">充值</a-link>
+            </div>
+          </div>
+          <div class="item">
+            <div class="txt">总客户</div>
+            <div class="val">1000</div>
+          </div>
+          <div class="item">
+            <div class="txt">接入账号</div>
+            <div class="val">1000</div>
+          </div>
+          <div class="item">
+            <div class="txt">客户充值</div>
+            <div class="val">1000</div>
+          </div>
+          <div class="item">
+            <div class="txt">已充值客户</div>
+            <div class="val">1000</div>
+          </div>
+          <div class="item">
+            <a-link href="link" :hoverable="false">查看接入密钥</a-link>
+          </div>
+        </div>
+      </div>
+
+      <div class="cardModel">
+        <div class="modelTitle">流量消耗统计</div>
+        <div class="flowList">
+          <div class="flowCard">
+            <div class="title">本月消耗流量</div>
+            <div class="main">
+              <div class="value">28,543.00</div>
+              <div class="txt">MB</div>
+            </div>
+          </div>
+          <div class="flowCard">
+            <div class="title">本月应付金额/人民币</div>
+            <div class="main">
+              <div class="value">28,543.00</div>
+              <div class="txt">MB</div>
+            </div>
+          </div>
+          <div class="flowCard">
+            <div class="title">总消耗流量</div>
+            <div class="main">
+              <div class="value">2,652,848.00</div>
+              <div class="txt">MB</div>
+            </div>
+          </div>
+          <div class="flowCard">
+            <div class="title">总支付金额/人民币</div>
+            <div class="main">
+              <div class="value">1,123,654.00</div>
+              <div class="txt">元</div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div class="cardModel">
+        <div class="modelTitle">用户充值统计</div>
+        <div class="flowList">
+          <div class="flowCard">
+            <div class="title">本月充值订单数</div>
+            <div class="main">
+              <div class="value">28,543.00</div>
+              <div class="txt">笔</div>
+            </div>
+          </div>
+          <div class="flowCard">
+            <div class="title">本月充值订单金额/新元</div>
+            <div class="main">
+              <div class="value">28,543.00</div>
+              <div class="txt">SGD</div>
+            </div>
+          </div>
+          <div class="flowCard">
+            <div class="title">总充值订单数</div>
+            <div class="main">
+              <div class="value">2,652,848.00</div>
+              <div class="txt">笔</div>
+            </div>
+          </div>
+          <div class="flowCard">
+            <div class="title">总充值订单金额/新元</div>
+            <div class="main">
+              <div class="value">1,123,654.00</div>
+              <div class="txt">SGD</div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+    </div>
+
+    <div class="rightModel">
+      <div class="cardModel">
+        <div class="modelTitle">生命周期分布图</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="less" scoped>
+.container {
+  background: transparent !important;
+  padding: 0 !important;
+  display: flex;
+  flex-direction: row !important;
+  .leftModel {
+    flex: 1;
+  }
+  .rightModel {
+    flex: none;
+    width: 400px;
+    margin-left: 16px;
+  }
+}
+
+.cardModel {
+  background: #fff;
+  border-radius: 4px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
+  padding: 20px;
+  margin-bottom: 16px;
+  .modelTitle {
+    margin-bottom: 12px;
+    font-size: 18px;
+  }
+}
+
+.early {
+  display: flex;
+
+  .earlyCard {
+    background: #f7f7f7;
+    padding: 20px;
+    box-sizing: border-box;
+    border-radius: 6px;
+    box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.1);
+    margin-left: 16px;
+    &:first-child {
+      margin-left: 0;
+    }
+    &:nth-child(1) {
+      flex: 1.5;
+    }
+    &:nth-child(2) {
+      flex: 2;
+    }
+    &:nth-child(3) {
+      flex: 1;
+    }
+    .title {
+      font-size: 14px;
+      font-weight: 400;
+      line-height: 22px;
+      color: rgba(0, 0, 0, 0.6);
+      margin-bottom: 10px;
+    }
+    .item {
+      display: flex;
+      margin-bottom: 8px;
+      .txt {
+        margin-right: 10px;
+      }
+      .val {
+        color: rgb(@blue_0);
+      }
+    }
+    .list {
+      display: flex;
+      flex-wrap: wrap;
+      .item {
+        width: 50%;
+      }
+    }
+  }
+}
+
+.networkList {
+  display: flex;
+
+  .networkCard {
+    flex: 1;
+    margin-left: 16px;
+    background: #f7f7f7;
+    padding: 20px;
+    box-sizing: border-box;
+    border-radius: 6px;
+    box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.1);
+    &:first-child {
+      margin-left: 0;
+    }
+    .title {
+      font-size: 14px;
+      font-weight: 400;
+      line-height: 22px;
+      color: rgba(0, 0, 0, 0.6);
+      margin-bottom: 10px;
+    }
+
+    .item {
+      display: flex;
+      .txt {
+        margin-right: 4px;
+      }
+      .val {
+        color: #999;
+      }
+    }
+  }
+}
+
+.accountList {
+  display: flex;
+  flex-wrap: wrap;
+  .item {
+    flex: 33%;
+    margin-bottom: 10px;
+    display: flex;
+    .txt {
+      color: #999;
+      margin-right: 16px;
+      width: 100px;
+    }
+    .val {
+      .arco-link {
+        margin: 0 8px;
+      }
+    }
+  }
+}
+
+.flowList {
+  display: flex;
+  flex-wrap: wrap;
+  .flowCard {
+    flex: 48%;
+    background: #f7f7f7;
+    padding: 20px;
+    box-sizing: border-box;
+    border-radius: 6px;
+    box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.1);
+    margin-bottom: 16px;
+    &:nth-child(2n) {
+      margin-left: 16px;
+    }
+    .title {
+      font-size: 14px;
+      font-weight: 400;
+      line-height: 22px;
+      color: rgba(0, 0, 0, 0.6);
+      margin-bottom: 10px;
+    }
+
+    .main {
+      display: flex;
+      justify-content: space-between;
+      font-size: 20px;
+      .value {
+      }
+
+      .txt {
+      }
+    }
+  }
+}
+</style>