首页
This commit is contained in:
shidongli
parent
a66356743c
commit
320f22bf07
20
src/api/system/index.js
Normal file
20
src/api/system/index.js
Normal 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
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
@ -1,5 +1,49 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="app-container home">
|
<div class="app-container home">
|
||||||
|
<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">
|
||||||
|
今日上架商品数量
|
||||||
|
<span>{{summaryTodayList.goodsCount}}</span>
|
||||||
|
</div>
|
||||||
|
<div class="todayitem">
|
||||||
|
今日新增会员数
|
||||||
|
<span>{{summaryTodayList.patientCount}}</span>
|
||||||
|
</div>
|
||||||
|
<div class="todayitem">
|
||||||
|
今日订单数
|
||||||
|
<span>{{summaryTodayList.orderCount}}</span>
|
||||||
|
</div>
|
||||||
|
<div class="todayitem">
|
||||||
|
今日交易额
|
||||||
|
<span>{{summaryTodayList.totalPrice}}</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
<!-- <el-row :gutter="20">
|
<!-- <el-row :gutter="20">
|
||||||
<el-col :sm="24" :lg="12" style="padding-left: 20px">
|
<el-col :sm="24" :lg="12" style="padding-left: 20px">
|
||||||
<h2>新医路后台管理框架</h2>
|
<h2>新医路后台管理框架</h2>
|
||||||
@ -61,91 +105,183 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
import {
|
||||||
|
informationStatistics,
|
||||||
|
summaryToday
|
||||||
|
} from "@/api/system/index";
|
||||||
export default {
|
export default {
|
||||||
name: "index",
|
name: "index",
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
|
queryParams: {
|
||||||
|
goodsCount: null,
|
||||||
|
patientCount: null,
|
||||||
|
orderCount: null,
|
||||||
|
storeCount: null,
|
||||||
|
},
|
||||||
|
// 基本信息查询
|
||||||
|
List:[],
|
||||||
|
// 概述查询
|
||||||
|
summaryTodayList:[],
|
||||||
// 版本号
|
// 版本号
|
||||||
version: "0.0.1",
|
version: "0.0.1",
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
|
created() {
|
||||||
|
this.getList();
|
||||||
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
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) {
|
goTarget(href) {
|
||||||
window.open(href, "_blank");
|
window.open(href, "_blank");
|
||||||
},
|
},
|
||||||
|
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped lang="scss">
|
<style scoped lang="scss">
|
||||||
|
.count {
|
||||||
|
color: white;
|
||||||
|
width: 30%;
|
||||||
|
background-image: linear-gradient(
|
||||||
|
109.6deg,
|
||||||
|
rgba(255, 113, 113, 0.6) 11.2%,
|
||||||
|
#ff7171 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(255, 170, 113, 0.6) 11.2%,
|
||||||
|
#ffaa71 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(147, 181, 225, 0.6) 11.2%,
|
||||||
|
#93b5e1 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(132, 140, 207, 0.6) 11.2%,
|
||||||
|
#848ccf 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;
|
||||||
|
}
|
||||||
|
.icons {
|
||||||
|
// display:inline-block;
|
||||||
|
margin-top: 30px;
|
||||||
|
margin-left: 35px;
|
||||||
|
position: absolute;
|
||||||
|
font-size: 31px;
|
||||||
|
// font-family: Ionicons;
|
||||||
|
// speak: none;
|
||||||
|
// font-style: normal;
|
||||||
|
// font-weight: 400;
|
||||||
|
// font-variant: normal;
|
||||||
|
// text-transform: none;
|
||||||
|
// text-rendering: optimizeLegibility;
|
||||||
|
// line-height: 1;
|
||||||
|
// -webkit-font-smoothing: antialiased;
|
||||||
|
// -moz-osx-font-smoothing: grayscale;
|
||||||
|
// vertical-align: -0.125em;
|
||||||
|
// text-align: center;
|
||||||
|
}
|
||||||
|
.today {
|
||||||
|
// background: #ff7171;
|
||||||
|
// padding: 0 30px;
|
||||||
|
width: 100%;
|
||||||
|
height: 300px;
|
||||||
|
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;
|
||||||
|
span {
|
||||||
|
display: block;
|
||||||
|
color: #ff5c58;
|
||||||
|
font-size: 21px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.todayitem:hover {
|
||||||
|
cursor: pointer;
|
||||||
|
-webkit-transform: translateY(-10px);
|
||||||
|
transform: translateY(-10px);
|
||||||
|
z-index: 99;
|
||||||
|
}
|
||||||
.home {
|
.home {
|
||||||
// display: flex;
|
|
||||||
// justify-content: center;
|
|
||||||
// align-items: center;
|
|
||||||
height: 100%;
|
height: 100%;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
background-size: cover;
|
background-size: cover;
|
||||||
// margin-top: 300px;
|
}
|
||||||
// background-image: url("../assets/images/mian.png");
|
.homes {
|
||||||
// blockquote {
|
display: flex;
|
||||||
// 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;
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user