代码拉取完成，页面将自动刷新
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="js/vue.js"></script>
<script src="js/axios.min.js"></script>
<script src="js/element-lib/index.js"></script>
<link rel="stylesheet" href="js/element-lib/theme-chalk/index.css">
<link rel="stylesheet" href="css/main.css">
<script src="js/main.js"></script>
<style>
.el-row {
margin-bottom: 20px;
}
.el-col {
padding: 0;
margin: 0;
}
.total-frame i {
font-size: 400%;
color: #409eff;
}
.total-frame {
border: 1px solid #dcdfe6;
padding: 20px;
height: 70px;
}
.total-title {
position: relative;
font-size: 100%;
color: #909399;
left: 70px;
top: -50px;
}
.total-value {
position: relative;
font-size: 100%;
color: #606266;
left: 70px;
top: -50px;
}
.layout-title {
color: #606266;
padding: 15px 20px;
background: #f2f6fc;
font-weight: 700;
}
.color-new-red {
color: #f56c6c;
}
.overview-item-value {
margin-top: 10px;
font-size: 24px;
text-align: center;
}
.overview-item-title {
margin-top: 10px;
text-align: center;
}
.order {
padding-left: 10px;
padding-right: 10px;
}
.font-medium {
font-size: 16px;
color: #606266;
}
.un-handle-content {
padding: 20px 40px;
}
.order-value {
float: right;
}
.un-handle-item {
border-bottom: 1px solid #ebeef5;
padding: 10px;
}
</style>
</head>
<body>
<div id="app">
<el-container class="home-container">
<el-container class="box">
<el-aside :width="isCollapse ? '64px' : '200px'">
<div class="toggle-button" @click="toggleCollapse">
<i :class="isCollapse ? 'el-icon-s-unfold' : 'el-icon-s-fold'"></i>
</div>
<!-- 导航栏 -->
<el-menu :default-active="menuActive" class="el-menu-vertical-demo" :collapse="isCollapse"
unique-opened>
<!-- 一级菜单 -->
<a :href="menu.permissionUrl" v-if="menu.children == null" v-for="menu in menuList"
:key="menu.id">
<el-menu-item :index="menu.id+''">
<i :class="menu.menuIcon"></i>
<span>{{menu.permissionName}}</span>
</el-menu-item>
</a>
<el-submenu v-if="menu.children != null" :index="menu.id+''" v-for="menu in menuList"
:key="menu.id">
<template slot="title">
<i :class="menu.menuIcon"></i>
<span slot="title">{{menu.permissionName}}</span>
</template>
<!-- 二级菜单 -->
<a :href="secondaryMenu.permissionUrl" v-for="secondaryMenu in menu.children"
:key="secondaryMenu.id">
<el-menu-item :index="secondaryMenu.id+''">
<i :class="secondaryMenu.menuIcon"></i>
<span>{{secondaryMenu.permissionName}}</span>
</el-menu-item>
</a>
</el-submenu>
</el-menu>
</el-aside>
<el-container>
<el-header>
<div>
<img src="img/logo.png" class="log">
<span>紫罗兰后台管理系统</span>
</div>
<el-button type="danger" @click="logOff()">退出</el-button>
</el-header>
<el-main>
<el-container>
<!-- 身体 -->
<el-container>
<!-- 身体右侧 -->
<el-main>
<el-header style="height: 30px;">
<div>
<el-breadcrumb separator-class="el-icon-arrow-right">
<el-breadcrumb-item>
<a href="index.html">首页</a>
</el-breadcrumb-item>
</el-breadcrumb>
</div>
</el-header>
<el-main>
<el-row
style="margin-left: 6.5%;border: 1px solid #dcdfe6;padding: 20px;width: 85.5%;">
<p style="font-size: 40px;margin-left: 14%;color: #606266;">
欢迎使用HelloWord后台管理系统</p>
</el-row>
<el-row :gutter="25" style="margin-left: 5%;">
<el-col :span="7">
<div class="total-frame">
<i class="el-icon-s-release"></i>
<div class="total-title">今日份订单数</div>
<div class="total-value">({{sale.todayOrderCount}})</div>
</div>
</el-col>
<el-col :span="8">
<div class="total-frame">
<i class="el-icon-goods"></i>
<div class="total-title">今日份销售额</div>
<div class="total-value">({{sale.todayPriceCount}})</div>
</div>
</el-col>
<el-col :span="7">
<div class="total-frame">
<i class="el-icon-sold-out"></i>
<div class="total-title">昨日份销售额</div>
<div class="total-value">({{sale.yesterdayPriceCount}})</div>
</div>
</el-col>
</el-row>
<el-row :gutter="25" style="margin-left: 5%;margin-bottom: 0px;">
<el-col :span="11">
<div style="margin: 0;padding: 0;border: 1px solid #dcdfe6;">
<div class="layout-title">商品总览</div>
<el-row>
<el-col :span="6"
class="color-new-red overview-item-value">{{product.shelvesCount}}</el-col>
<el-col :span="6"
class="color-new-red overview-item-value">{{product.takeDownCount}}</el-col>
<el-col :span="6"
class="color-new-red overview-item-value">{{product.hotCount}}</el-col>
<el-col :span="6"
class="color-new-red overview-item-value">{{product.productCount}}</el-col>
</el-row>
<el-row>
<el-col :span="6" class="overview-item-title">已上架</el-col>
<el-col :span="6" class="overview-item-title">已下架</el-col>
<el-col :span="6" class="overview-item-title">热门商品</el-col>
<el-col :span="6" class="overview-item-title">全部商品</el-col>
</el-row>
</div>
</el-col>
<el-col :span="11">
<div class="layout-title">用户总览</div>
<el-row>
<div style="margin: 0;padding: 0;border: 1px solid #dcdfe6;">
<el-row>
<el-col :span="6"
class="color-new-red overview-item-value">{{user.addedTodayCount}}</el-col>
<el-col :span="6"
class="color-new-red overview-item-value">{{user.addedYesterdayCount}}</el-col>
<el-col :span="6"
class="color-new-red overview-item-value">{{user.newThisMonthCount}}</el-col>
<el-col :span="6"
class="color-new-red overview-item-value">{{user.userCount}}</el-col>
</el-row>
<el-row>
<el-col :span="6" class="overview-item-title">今日新增</el-col>
<el-col :span="6" class="overview-item-title">昨日新增</el-col>
<el-col :span="6" class="overview-item-title">本月新增</el-col>
<el-col :span="6" class="overview-item-title">用户总数</el-col>
</el-row>
</div>
</el-row>
</el-col>
</el-row>
<el-row :gutter="25" style="margin-left: 5%;margin-bottom: 0px;">
<el-col :span="11">
<div class="layout-title">仓库信息总览</div>
<el-row>
<div style="margin: 0;padding: 0;border: 1px solid #dcdfe6;">
<el-row>
<el-col :span="6"
class="color-new-red overview-item-value">{{warehouse.enableCount}}</el-col>
<el-col :span="6"
class="color-new-red overview-item-value">{{warehouse.disableCount}}</el-col>
<el-col :span="6"
class="color-new-red overview-item-value">{{warehouse.inventoryCount}}</el-col>
<el-col :span="6"
class="color-new-red overview-item-value">{{warehouse.warehouseCount}}</el-col>
</el-row>
<el-row>
<el-col :span="6" class="overview-item-title">启用</el-col>
<el-col :span="6" class="overview-item-title">禁用</el-col>
<el-col :span="6" class="overview-item-title">库存材料</el-col>
<el-col :span="6" class="overview-item-title">全部仓库</el-col>
</el-row>
</div>
</el-row>
</el-col>
<el-col :span="11">
<div class="layout-title">加盟店总览</div>
<el-row>
<div style="margin: 0;padding: 0;border: 1px solid #dcdfe6;">
<el-row>
<el-col :span="6"
class="color-new-red overview-item-value">{{franchiseStores.enableCount}}</el-col>
<el-col :span="6"
class="color-new-red overview-item-value">{{franchiseStores.disableCount}}</el-col>
<el-col :span="6"
class="color-new-red overview-item-value">{{franchiseStores.ordersCount}}</el-col>
<el-col :span="6"
class="color-new-red overview-item-value">{{franchiseStores.franchiseStoresCount}}</el-col>
</el-row>
<el-row>
<el-col :span="6" class="overview-item-title">启用</el-col>
<el-col :span="6" class="overview-item-title">禁用</el-col>
<el-col :span="6" class="overview-item-title">全部订单</el-col>
<el-col :span="6" class="overview-item-title">全部加盟店</el-col>
</el-row>
</div>
</el-row>
</el-col>
</el-row>
<div
style="width: 86%;margin-left: 6.3%;margin-top: 0px;border: 1px solid #dcdfe6;">
<div class="layout-title">订单总览</div>
<div class="un-handle-content">
<el-row>
<el-col :span="8" class="order">
<div class="un-handle-item">
<span class="font-medium">待付款订单</span>
<span
class="color-new-red order-value">({{order.unpaidOrders}})</span>
</div>
</el-col>
<el-col :span="8" class="order">
<div class="un-handle-item">
<span class="font-medium">已完成订单</span>
<span
class="color-new-red order-value">({{order.orderCompleted}})</span>
</div>
</el-col>
<el-col :span="8" class="order">
<div class="un-handle-item">
<span class="font-medium">已取消订单</span>
<span
class="color-new-red order-value">({{order.orderCancelled}})</span>
</div>
</el-col>
</el-row>
<el-row>
<el-col :span="8" class="order">
<div class="un-handle-item">
<span class="font-medium">待发货订单</span>
<span
class="color-new-red order-value">({{order.unshippedOrders}})</span>
</div>
</el-col>
<el-col :span="8" class="order">
<div class="un-handle-item">
<span class="font-medium">已发货订单</span>
<span
class="color-new-red order-value">({{order.shippedOrders}})</span>
</div>
</el-col>
<el-col :span="8" class="order">
<div class="un-handle-item">
<span class="font-medium">待收货订单</span>
<span
class="color-new-red order-value">({{order.unreceivedOrders}})</span>
</div>
</el-col>
</el-row>
</div>
</div>
</el-main>
</el-main>
</el-container>
</el-container>
</el-main>
<el-footer>Footer</el-footer>
</el-container>
</el-container>
</el-container>
</div>
<script>
let vm = new Vue({
el: "#app",
data() {
return {
isCollapse: false,
menuList: [],
menuActive: 0,
//====
isCollapse: false,
//查询销售额
sale: {
todayOrderCount: "",
todayPriceCount: "",
yesterdayPriceCount: ""
},
//商品总览
product: {
shelvesCount: "0",
takeDownCount: "0",
hotCount: "0",
productCount: "0"
},
//用户总览
user: {
addedTodayCount: "0",
addedYesterdayCount: "0",
newThisMonthCount: "0",
userCount: "0"
},
//仓库信息总览
warehouse: {
enableCount: "0",
disableCount: "0",
inventoryCount: "0",
warehouseCount: "0"
},
//加盟店
franchiseStores: {
enableCount: "0",
disableCount: "0",
ordersCount: "0",
franchiseStoresCount: "0"
},
//订单总览
order: {
unpaidOrders: "0",
orderCompleted: "0",
orderCancelled: "0",
unshippedOrders: "0",
shippedOrders: "0",
unreceivedOrders: "0",
}
}
}, created: function () {
this.getMenuList();
this.getMenuIdByUrl();
this.selectSale();
this.selectProduct();
this.selectUser();
this.selectWarehouse();
this.selectFranchiseTores();
this.selectOrder();
},
methods: {
logOff() {
localStorage.removeItem('nfLoginJwt');
location.href = "login.html"
},
toggleCollapse() {
vm.isCollapse = !vm.isCollapse
},
getMenuList() {
axios({
url: "/menu/get/menu/by/jwt",
method: "GET",
}).then(function (resp) {
if (resp.data.code == 200) {
vm.menuList = resp.data.data
}
})
}, getMenuIdByUrl() {
var strUrl = location.href;
var arrUrl = strUrl.split("/");
var strPage = arrUrl[arrUrl.length - 1];
axios({
url: "/menu/get/menu/id/by/url",
method: "GET",
params: { url: strPage }
}).then(function (resp) {
if (resp.data.code == 200) {
vm.menuActive = resp.data.data
}
})
},
//===
//点击按钮实现折叠与展开
toggleCollapse: function () {
this.isCollapse = !this.isCollapse
},//查询销售额
selectSale: function () {
axios({
url: "/sale/overview",
method: "GET",
}).then(function (resp) {
vm.sale = resp.data.data
})
},//查询商品总览
selectProduct: function () {
axios({
url: "/product/overview",
method: "GET",
}).then(function (resp) {
vm.product = resp.data.data
})
},//查询用户总览
selectUser: function () {
axios({
url: "/user/overview",
method: "GET",
}).then(function (resp) {
vm.user = resp.data.data
})
},
//查询仓库信息总览
selectWarehouse: function () {
axios({
url: "/warehouse/overview",
method: "GET",
}).then(function (resp) {
vm.warehouse = resp.data.data
})
},
//加盟店总览
selectFranchiseTores: function () {
axios({
url: "/franchise/stores/overview",
method: "GET",
}).then(function (resp) {
vm.franchiseStores = resp.data.data
})
},
//订单总览
selectOrder: function () {
axios({
url: "/order/overview",
method: "GET",
}).then(function (resp) {
vm.order = resp.data.data
})
}
}
})
</script>
</body>
</html>
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。
