xinyilu/NurseStationOperateUI
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge remote-tracking branch 'origin/dev'

Browse Source
This commit is contained in:
纪寒 2022-12-28 09:20:42 +08:00
commit e9974afc5e
5 changed files with 644 additions and 122 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@ -40,7 +40,7 @@
"axios": "0.24.0",
"clipboard": "2.0.8",
"core-js": "3.19.1",
"echarts": "4.9.0",
"echarts": "^4.9.0",
"element-ui": "2.15.8",
"file-saver": "2.0.5",
"fuse.js": "6.4.3",

24
src/api/system/homepage.js Normal file
View File

@ -0,0 +1,24 @@
import request from '@/utils/request'
//最近一周每天的商品交易趋势
export function getWeekGoodsTradeTrend () {
return request({
url: '/system/homeStatistics/getWeekGoodsTradeTrend ',
method: 'get',
})
}
//首页新增最近一周每天的预约订单交易趋势
export function getWeekTradeAppointmentTrend() {
return request({
url: '/system/homeStatistics/getWeekTradeAppointmentTrend',
method: 'get',
})
}
//首页新增热卖商品Top10排名榜功能
export function selectHotGoodsList() {
return request({
url: '/system/homeStatistics/selectHotGoodsList',
method: 'get',
})
}

20
src/api/system/index.js Normal file
View File

@ -0,0 +1,20 @@
import request from '@/utils/request'
// 查询首页基本信息
export function informationStatistics(query) {
return request({
url: '/system/homeStatistics/informationStatistics',
method: 'get',
params: query
})
}
// 查询首页今日概述
export function summaryToday(query) {
return request({
url: '/system/homeStatistics/summaryToday',
method: 'get',
params: query
})
}

2
src/layout/index.vue
View File

@ -92,7 +92,7 @@ export default {
@import "~@/assets/styles/mixin.scss";
@import "~@/assets/styles/variables.scss";
.bj {
background-image: url("../assets/images/body.png");
// background-image: url("../assets/images/body.png");
-moz-background-size: 100% 100%;
background-size: 100% 100%;
}

718
src/views/index.vue
View File

@ -1,75 +1,499 @@
<template>
<div class="app-container home">
<!-- <el-row :gutter="20">
<el-col :sm="24" :lg="12" style="padding-left: 20px">
<h2>新医路后台管理框架</h2>
<p>
一直想做一款后台管理系统，看了很多优秀的开源项目但是发现没有合适自己的。于是利用空闲休息时间开始自己写一套后台系统。如此有了新医路管理系统。，它可以用于所有的Web应用程序，如网站管理后台，网站会员中心，CMS，CRM，OA等等，当然，您也可以对她进行深度定制，以做出更强系统。所有前端后台代码封装过后十分精简易上手，出错概率低。同时支持移动客户端访问。系统会陆续更新一些实用功能。
</p>
<p>
<b>当前版本:</b> <span>v{{ version }}</span>
</p>
</el-col>
<el-col :sm="24" :lg="12" style="padding-left: 50px">
<el-row>
<el-col :span="8">
<h2>技术选型</h2>
</el-col>
<el-col :span="4">
<h2>联系方式</h2>
</el-col>
</el-row>
<el-row>
<el-col :span="4">
<h4>后端技术</h4>
<ul>
<li>SpringBoot</li>
<li>SpringCloud</li>
<li>Nacos</li>
<li>Sentinel</li>
<li>MyBatis-plus</li>
<li>Fastjson</li>
<li>...</li>
</ul>
</el-col>
<el-col :span="4">
<h4>前端技术</h4>
<ul>
<li>Vue</li>
<li>Vuex</li>
<li>Element-ui</li>
<li>Axios</li>
<li>Sass</li>
<li>Quill</li>
<li>...</li>
</ul>
</el-col>
<el-col :span="4">
<h4></h4>
<ul>
<li><i class="el-icon-chat-dot-round"></i> 山东新医路信息科技有限公司：<a
href="javascript:;"
>0531-69900398</a></li>
</ul>
</el-col>
</el-row>
</el-col>
<div class="homes">
<div class="count" @click="goodsCount">
<div class="el-icon-picture-outline icons"></div>
<div class="counts">{{ List.goodsCount }}</div>
<div class="total">商品总数量</div>
</div>
<div class="count member" @click="patientCount">
<div class="el-icon-user-solid icons"></div>
<div class="counts">{{ List.patientCount }}</div>
<div class="total">会员总数量</div>
</div>
<div class="count order" @click="appointmentOrderCount">
<div class="el-icon-shopping-cart-2 icons"></div>
<div class="counts">{{ List.appointmentOrderCount }}</div>
<div class="total">预约订单总数量</div>
</div>
<div class="count shop" @click="goodsOrderCount">
<div class="el-icon-s-data icons"></div>
<div class="counts">{{ List.goodsOrderCount }}</div>
<div class="total">商品订单总数量</div>
</div>
</div>
<div class="today">
<!-- 今日概括 -->
<div class="todayitem">
<div class="el-icon-sell icon"></div>
<div class="goodsinfo">今日上架商品数量</div>
<div class="totals">{{ summaryTodayList.goodsCount }}</div>
</div>
<div class="todayitem">
<div class="el-icon-user icon"></div>
<div class="goodsinfo">今日新增会员数</div>
<div class="totals">{{ summaryTodayList.patientCount }}</div>
</div>
<div class="todayitem">
<div class="el-icon-shopping-cart-full icon"></div>
<div class="goodsinfo">今日订单数</div>
<div class="totals">{{ summaryTodayList.orderCount }}</div>
</div>
<div class="todayitem">
<div class="el-icon-money icon"></div>
<div class="goodsinfo">今日交易额</div>
<div class="totals">{{ summaryTodayList.totalPrice }}</div>
</div>
</div>
<div class="main2" id="main2" style="width: 1200px; height: 500px"></div>
<div class="main" id="main" style="width: 1200px; height: 500px"></div>
<el-row>
<div class="title">热卖商品TOP10</div>
<el-table :data="list" style="width: 96%; margin: 0 auto">
<el-table-column label="排名" type="index" width="130" align="center" />
<el-table-column label="商品名称" align="center" prop="goodsName" />
<el-table-column label="价格" align="center" prop="sumTotalPrice" />
<el-table-column
label="销量"
align="center"
width="130"
prop="sumGoodsCount"
/>
</el-table>
</el-row>
<el-divider /> -->
</div>
</template>
<script>
import { informationStatistics, summaryToday } from "@/api/system/index";
import * as echarts from "echarts";
import {
getWeekGoodsTradeTrend,
getWeekTradeAppointmentTrend,
selectHotGoodsList,
} from "@/api/system/homepage.js";
export default {
name: "index",
data() {
return {
queryParams: {
goodsCount: null,
patientCount: null,
orderCount: null,
storeCount: null,
},
// 基本信息查询
List: [],
// 概述查询
summaryTodayList: [],
// 版本号
version: "0.0.1",
list: [],
};
},
mounted() {
this.info();
},
created() {
this.getList();
this.tableinfo();
},
methods: {
tableinfo() {
selectHotGoodsList().then((res) => {
this.list = res.data;
});
},
info() {
getWeekTradeAppointmentTrend().then((res) => {
if (res.code == 200) {
var timedata = [];
res.data.forEach((e) => {
timedata.push(e.clickDate);
});
var totalPricedata = [];
res.data.forEach((e) => {
totalPricedata.push(e.totalPrice);
});
var numberdata = [];
res.data.forEach((e) => {
numberdata.push(e.count);
});
var chartDom = document.getElementById("main2");
var myChart = echarts.init(chartDom);
var option;
option = {
title: {
text: "预约订单交易走势",
left: "50%",
textAlign: "center",
},
tooltip: {
trigger: "axis",
axisPointer: {
lineStyle: {
color: "#ddd",
},
},
backgroundColor: "rgba(255,255,255,1)",
padding: [5, 10],
textStyle: {
color: "#7588E4",
},
extraCssText: "box-shadow: 0 0 5px rgba(0,0,0,0.3)",
},
legend: {
right: 20,
orient: "vertical",
x: "left",
y: "top",
data: ["订单数量", "订单金额"],
},
xAxis: {
type: "category",
data: timedata,
boundaryGap: false,
splitLine: {
show: true,
interval: "auto",
lineStyle: {
color: ["#ffffff"],
},
},
axisTick: {
show: false,
},
axisLine: {
lineStyle: {
color: "#609ee9",
},
},
axisLabel: {
margin: 10,
textStyle: {
fontSize: 14,
},
},
},
yAxis: {
type: "value",
splitLine: {
lineStyle: {
color: ["#f0f0f0"],
},
},
axisTick: {
show: false,
},
axisLine: {
lineStyle: {
color: "#609ee9",
},
},
axisLabel: {
margin: 10,
textStyle: {
fontSize: 14,
},
},
},
series: [
{
name: "订单数量",
type: "line",
smooth: true,
showSymbol: false,
symbol: "circle",
symbolSize: 6,
data: numberdata,
areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
{
offset: 0,
color: "#d6e3fd",
},
{
offset: 1,
color: "#d6e3fd",
},
],
false
),
},
},
itemStyle: {
normal: {
color: "#87B1F7",
},
},
lineStyle: {
normal: {
width: 3,
},
},
},
{
name: "订单金额",
type: "line",
smooth: true,
showSymbol: false,
symbol: "circle",
symbolSize: 6,
data: totalPricedata,
areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
{
offset: 0,
color: "#D6F5E9",
},
{
offset: 1,
color: "#D6F5E9",
},
],
false
),
},
},
itemStyle: {
normal: {
color: "#57D1A0",
},
},
lineStyle: {
normal: {
width: 3,
},
},
},
],
};
option && myChart.setOption(option);
} else {
}
});
getWeekGoodsTradeTrend().then((res) => {
if (res.code == 200) {
var timedata = [];
res.data.forEach((e) => {
timedata.push(e.clickDate);
});
var numberdata = [];
res.data.forEach((e) => {
numberdata.push(e.count);
});
var totalPricedata = [];
res.data.forEach((e) => {
totalPricedata.push(e.totalPrice);
});
var moneydata = [];
res.data.forEach((e) => {
numberdata.push(e.count);
});
var chartDom = document.getElementById("main");
var myChart = echarts.init(chartDom);
var option;
option = {
title: {
text: "商品订单交易走势",
left: "50%",
textAlign: "center",
},
tooltip: {
trigger: "axis",
axisPointer: {
lineStyle: {
color: "#ddd",
},
},
backgroundColor: "rgba(255,255,255,1)",
padding: [5, 10],
textStyle: {
color: "#7588E4",
},
extraCssText: "box-shadow: 0 0 5px rgba(0,0,0,0.3)",
},
legend: {
right: 20,
orient: "vertical",
x: "left",
y: "top",
data: ["订单数量", "订单金额"],
},
xAxis: {
type: "category",
data: timedata,
boundaryGap: false,
splitLine: {
show: true,
interval: "auto",
lineStyle: {
color: ["#ffffff"],
},
},
axisTick: {
show: false,
},
axisLine: {
lineStyle: {
color: "#609ee9",
},
},
axisLabel: {
margin: 10,
textStyle: {
fontSize: 14,
},
},
},
yAxis: {
type: "value",
splitLine: {
lineStyle: {
color: ["#D4DFF5"],
},
},
axisTick: {
show: false,
},
axisLine: {
lineStyle: {
color: "#609ee9",
},
},
axisLabel: {
margin: 10,
textStyle: {
fontSize: 14,
},
},
},
series: [
{
name: "订单数量",
type: "line",
smooth: true,
showSymbol: false,
symbol: "circle",
symbolSize: 6,
data: numberdata,
areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
{
offset: 0,
color: "#d6e3fd",
},
{
offset: 1,
color: "#d6e3fd",
},
],
false
),
},
},
itemStyle: {
normal: {
color: "#87B1F7",
},
},
lineStyle: {
normal: {
width: 3,
},
},
},
{
name: "订单金额",
type: "line",
smooth: true,
showSymbol: false,
symbol: "circle",
symbolSize: 6,
data: totalPricedata,
areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
{
offset: 0,
color: "#D6F5E9",
},
{
offset: 1,
color: "#D6F5E9",
},
],
false
),
},
},
itemStyle: {
normal: {
color: "#57D1A0",
},
},
lineStyle: {
normal: {
width: 3,
},
},
},
],
};
option && myChart.setOption(option);
} else {
}
});
},
goodsCount() {
this.$router.push("/Shopping/operateGoodsInfo");
},
patientCount() {
this.$router.push("/patient/patientArchives");
},
appointmentOrderCount() {
this.$router.push("/order/order");
},
goodsOrderCount() {
this.$router.push("/order/goodsOrder");
},
getList() {
informationStatistics(this.queryParams).then((response) => {
console.log(response);
this.List = response.data;
});
summaryToday(this.queryParams).then((response) => {
console.log(response);
this.summaryTodayList = response.data;
});
},
goTarget(href) {
window.open(href, "_blank");
},
@ -78,74 +502,128 @@ export default {
</script>
<style scoped lang="scss">
.main2 {
margin: 0 auto;
}
.main {
margin: 0 auto;
}
.title {
margin: 20px 0 20px 2%;
font-size: 18px;
font-weight: 600;
}
.count {
color: white;
width: 30%;
background-image: linear-gradient(
109.6deg,
rgba(111, 167, 183, 0.6) 11.2%,
#b3e9d8 100.2%
);
transition: 0.35s;
-webkit-box-shadow: 1px 3px 12px rgb(255 113 113 / 30%);
height: 84px;
border-radius: 0.4em;
font-weight: 700;
margin-right: 20px;
}
.count:hover {
cursor: pointer;
-webkit-transform: translateY(-10px);
transform: translateY(-10px);
z-index: 99;
}
.member {
background-image: linear-gradient(
109.6deg,
rgba(161, 191, 239, 0.6) 11.2%,
#86c5e2 100.2%
);
-webkit-box-shadow: 1px 3px 12px rgb(255 170 113 / 30%);
box-shadow: 1px 3px 12px rgb(255 170 113 / 30%);
}
.order {
background-image: linear-gradient(
109.6deg,
rgba(161, 191, 214, 0.6) 11.2%,
#688eab 100.2%
);
-webkit-box-shadow: 1px 3px 12px rgb(147 181 225 / 30%);
box-shadow: 1px 3px 12px rgb(147 181 225 / 30%);
}
.shop {
background-image: linear-gradient(
109.6deg,
rgba(138, 203, 158, 0.6) 11.2%,
#81c195 100.2%
);
-webkit-box-shadow: 1px 3px 12px rgb(132 140 207 / 30%);
box-shadow: 1px 3px 12px rgb(132 140 207 / 30%);
}
.counts {
margin-top: 20px;
margin-left: 35%;
line-height: 1;
font-size: 21px;
}
.total {
margin-top: 5px;
margin-left: 35%;
font-size: 13px;
}
.icon {
margin-top: 10px;
margin-left: 16px;
font-size: 31px;
position: absolute;
}
.icons {
margin-top: 30px;
margin-left: 35px;
position: absolute;
font-size: 31px;
}
.today {
width: 100%;
display: flex;
margin-top: 10px;
margin-left: -10px;
}
.todayitem {
transition: 0.35s;
margin: 10px;
width: 30%;
height: 100px;
margin-bottom: 20px;
border-radius: 0.4em;
font-weight: 700;
background: hsla(0, 0%, 92.2%, 0.5333333333333333);
padding: 20px;
.goodsinfo {
margin-top: 5px;
margin-left: 32%;
}
.totals {
color: #ff5c58;
margin-left: 32%;
margin-top: 5px;
font-size: 21px;
}
}
.todayitem:hover {
cursor: pointer;
-webkit-transform: translateY(-10px);
transform: translateY(-10px);
z-index: 99;
}
.home {
// display: flex;
// justify-content: center;
// align-items: center;
height: 100%;
width: 100%;
background-size: cover;
// margin-top: 300px;
// background-image: url("../assets/images/mian.png");
// blockquote {
// padding: 10px 20px;
// margin: 0 0 20px;
// font-size: 17.5px;
// border-left: 5px solid #eee;
// }
// hr {
// margin-top: 20px;
// margin-bottom: 20px;
// border: 0;
// border-top: 1px solid #eee;
// }
// .col-item {
// margin-bottom: 20px;
// }
// ul {
// padding: 0;
// margin: 0;
// }
// font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
// font-size: 13px;
// color: #676a6c;
// overflow-x: hidden;
// ul {
// list-style-type: none;
// }
// h4 {
// margin-top: 0px;
// }
// h2 {
// margin-top: 10px;
// font-size: 26px;
// font-weight: 100;
// }
// p {
// margin-top: 10px;
// b {
// font-weight: 700;
// }
// }
// .update-log {
// ol {
// display: block;
// list-style-type: decimal;
// margin-block-start: 1em;
// margin-block-end: 1em;
// margin-inline-start: 0;
// margin-inline-end: 0;
// padding-inline-start: 40px;
// }
// }
}
.homes {
display: flex;
}
</style>