dianliang/oil-station
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

更新10.14

Browse Source
This commit is contained in:
许允枞 2024-10-14 14:24:53 +08:00
parent 3cbed13ed9
commit ee7d0db4c6
1 changed files with 211 additions and 143 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

202
fuintAdmin/src/views/shopowner.vue
View File

@ -2,7 +2,7 @@
<div class="home-index">
<el-carousel height="230px">
<el-carousel-item v-for="(item,index) in bannerList" :key="index">
<div class="bannser">
<div class="bannser">-
<img :src="imagePath+item.productImage" alt="" >
</div>
@ -10,7 +10,7 @@
</el-carousel>
<div class="b-bs">
<div class="left-box">
<div>核心数据</div>
<div class="h-tt">核心数据</div>
<div style="display: flex;justify-content: space-between">
<div class="san-box">
<div class="r-title">{{ storeTotal.allAmount || 0 }}</div>
@ -56,12 +56,10 @@
</el-dropdown-menu>
</el-dropdown>
<div class="h-anniu" :class="{'q-anniu' : timeShow == true}" @click="timeShow = true" > <img src="../assets/images/zdy.png" style="width: 14px; height: 14px" > 自定义</div>
<div class="h-tt">数据看板</div>
<div class="q-anniu">近一周</div>
<div style="margin-right: 40px">
<el-date-picker
v-model="value1"
type="datetimerange"
type="daterange"
value-format="yyyy-MM-dd HH:mm:ss"
range-separator="至"
start-placeholder="开始日期"
@ -74,28 +72,28 @@
<div class="k-box">
<div class="d-s" style="font-size: 12px;color: #999999;">
<div class="sian"></div>
<div>油品销售金额（元）/交易笔数</div>
<div style="color: #333">油品销售金额（元）/交易笔数</div>
</div>
<div class="num-size">{{ storeAmount.oilAmount || 0 }}/{{ storeAmount.oilNum || 0 }}</div>
</div>
<div class="k-box">
<div class="d-s" style="font-size: 12px;color: #999999;">
<div class="sian"></div>
<div>会员充值金额（元）/充值笔数</div>
<div style="color: #333">会员充值金额（元）/充值笔数</div>
</div>
<div class="num-size">{{ storeAmount.userRechargeAmount || 0 }}/{{ storeAmount.userRechargeNum || 0 }}</div>
</div>
<div class="k-box">
<div class="d-s" style="font-size: 12px;color: #999999;">
<div class="sian"></div>
<div>便利店销售金额（元）/交易笔数</div>
<div style="color: #333">便利店销售金额（元）/交易笔数</div>
</div>
<div class="num-size">{{ storeAmount.minimartAmount || 0 }}/{{ storeAmount.minimartNum || 0 }}</div>
</div>
<div class="k-box">
<div class="d-s" style="font-size: 12px;color: #999999;">
<div class="sian"></div>
<div>积分商城销售金额（元）/兑换笔数</div>
<div style="color: #333">积分商城销售金额（元）/兑换笔数</div>
</div>
<div class="num-size">{{ storeAmount.pointMallAmount || 0 }}/{{ storeAmount.pointMallNum || 0 }}</div>
</div>
@ -135,23 +133,57 @@
</div>
<div style="font-size: 14px">{{ item.name }}</div>
</div>
<div>{{ item.name }}</div>
</div>
</div>
</div>
<div class="b-bs">
<div class="left-box-t">
<div>数据展示</div>
<div class="d-s">
<div class="h-tt" style="margin-right: 15px" >油品交易分析</div>
<el-dropdown placement="bottom-start" >
<div class="h-anniu" :class="{'q-anniu' : timeShow == false}" @click="timeShow = false ">近一周 <i class="el-icon-arrow-down el-icon--right"></i></div>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item>今日</el-dropdown-item>
<el-dropdown-item>昨日</el-dropdown-item>
<el-dropdown-item>近一周</el-dropdown-item>
<el-dropdown-item>近一月</el-dropdown-item>
<el-dropdown-item>近一周</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
<div class="h-anniu" :class="{'q-anniu' : timeShow == true}" @click="timeShow = true" > <img src="../assets/images/zdy.png" style="width: 14px; height: 14px" > 自定义</div>
<div style="margin-right: 40px">
<el-date-picker
v-model="value1"
type="daterange"
value-format="yyyy-MM-dd HH:mm:ss"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
@blur="getStoreAmount">
</el-date-picker>
</div>
</div>
</div>
<div class="right-box-t">
<div style="font-size: 16px;font-weight: bold">员工排行</div>
<div style="font-size: 16px;font-weight: bold"><span style="margin-right: 15px">员工排行</span> <el-dropdown placement="bottom-start" >
<div class="h-anniu" :class="{'q-anniu' : timeShow == false}" @click="timeShow = false ">近一周 <i class="el-icon-arrow-down el-icon--right"></i></div>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item>今日</el-dropdown-item>
<el-dropdown-item>昨日</el-dropdown-item>
<el-dropdown-item>近一周</el-dropdown-item>
<el-dropdown-item>近一月</el-dropdown-item>
<el-dropdown-item>近一周</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown></div>
<div class="hui-box">
<div style="width: 10%">排名</div>
<div>员工姓名</div>
<div style="width: 25%">会员充值金额（元)</div>
<div style="width: 25%">油品销售金额（元)</div>
<div>总销售额（元）</div>
<div style="width: 25%">会员充值金额</div>
<div style="width: 25%">油品销售金额</div>
<div>总销售额</div>
</div>
<div style="overflow: auto; scrollbar-width: none; height: 74% ">
<div class="hang-box" v-for="(item,index) in employeList" :key="index">
<div style="width: 10%">{{index +1}}</div>
<div>{{ item.realName }}</div>
@ -160,6 +192,8 @@
<div>{{item.totalSum}}</div>
</div>
</div>
</div>
</div>
<div class="bottom_">
<div class="d-s">
@ -271,8 +305,6 @@ export default {
this.getHardwareList()
this.getNoticeList()
this.getEmployeList()
this.getDataAnalysis()
this.getDataShow()
},
mounted() {
// this.initChart()
@ -281,37 +313,6 @@ export default {
goList() {
this.$router.push('/notificationList/index')
},
// 获取数据分析信息
getDataAnalysis() {
getDataAnalysis().then(res => {
console.log('数据分析的数据',res)
if (res.code == 200) {
for (let i = 0; i < res.data.length; i++) {
if (res.data[i].type == 1) {
this.dataAnalysisOilNumberList.push(res.data[i])
}else if (res.data[i].type == 2) {
this.dataAnalysisIfOilList.push(res.data[i])
}else if (res.data[i].type == 3) {
this.dataAnalysisAllList.push(res.data[i])
}
}
console.log('dataAnalysisOilNumberList',this.dataAnalysisOilNumberList)
console.log('dataAnalysisIfOilList',this.dataAnalysisIfOilList)
console.log('dataAnalysisAllList',this.dataAnalysisAllList)
this.initChart()
}
})
},
//获取数据展示
getDataShow(){
const a = {
startTime: "2024-01-01",
endTime: "2024-11-01",
}
getDataShow(a).then(res => {
console.log('数据展示的数据',res)
})
},
// 获取员工排行信息
getEmployeList() {
this.employeLoading = true
@ -484,8 +485,14 @@ export default {
data: [
// { value: 28, name: '28%' },
// { value: 72, name: '72%' },
{ value: this.countPercentage(Number(this.storeAmount.oilNum),Number(this.storeAmount.oilNum)+Number(this.storeAmount.noOilNum)), name: "油品交易占比" },
{ value: this.countPercentage(Number(this.storeAmount.noOilNum),Number(this.storeAmount.oilNum)+Number(this.storeAmount.noOilNum)), name: "非油品交易占比" },
{
value: this.countPercentage(Number(this.storeAmount.oilNum), Number(this.storeAmount.oilNum) + Number(this.storeAmount.noOilNum)),
name: "油品交易占比"
},
{
value: this.countPercentage(Number(this.storeAmount.noOilNum), Number(this.storeAmount.oilNum) + Number(this.storeAmount.noOilNum)),
name: "非油品交易占比"
},
],
emphasis: {
@ -519,10 +526,22 @@ export default {
// { value: 72, name: '积分商城交易占比' },
// { value: 28, name: '油品交易占比' },
// { value: 72, name: '便利店交易占比' },
{ value: this.countPercentage(Number(this.storeAmount.userNum),Number(this.storeAmount.oilNum)+Number(this.storeAmount.userNum)+Number(this.storeAmount.integralNum)+Number(this.storeAmount.goodNum)), name: '会员充值占比' },
{ value: this.countPercentage(Number(this.storeAmount.integralNum),Number(this.storeAmount.oilNum)+Number(this.storeAmount.userNum)+Number(this.storeAmount.integralNum)+Number(this.storeAmount.goodNum)), name: '积分商城交易占比' },
{ value: this.countPercentage(Number(this.storeAmount.oilNum),Number(this.storeAmount.oilNum)+Number(this.storeAmount.userNum)+Number(this.storeAmount.integralNum)+Number(this.storeAmount.goodNum)), name: '油品交易占比' },
{ value: this.countPercentage(Number(this.storeAmount.goodNum),Number(this.storeAmount.oilNum)+Number(this.storeAmount.userNum)+Number(this.storeAmount.integralNum)+Number(this.storeAmount.goodNum)), name: '便利店交易占比' },
{
value: this.countPercentage(Number(this.storeAmount.userNum), Number(this.storeAmount.oilNum) + Number(this.storeAmount.userNum) + Number(this.storeAmount.integralNum) + Number(this.storeAmount.goodNum)),
name: '会员充值占比'
},
{
value: this.countPercentage(Number(this.storeAmount.integralNum), Number(this.storeAmount.oilNum) + Number(this.storeAmount.userNum) + Number(this.storeAmount.integralNum) + Number(this.storeAmount.goodNum)),
name: '积分商城交易占比'
},
{
value: this.countPercentage(Number(this.storeAmount.oilNum), Number(this.storeAmount.oilNum) + Number(this.storeAmount.userNum) + Number(this.storeAmount.integralNum) + Number(this.storeAmount.goodNum)),
name: '油品交易占比'
},
{
value: this.countPercentage(Number(this.storeAmount.goodNum), Number(this.storeAmount.oilNum) + Number(this.storeAmount.userNum) + Number(this.storeAmount.integralNum) + Number(this.storeAmount.goodNum)),
name: '便利店交易占比'
},
],
emphasis: {
@ -866,21 +885,25 @@ export default {
height: 100%;
background: #f4f5f9;
}
.d-s {
display: flex;
align-items: center;
}
.bannser {
width: 100%;
height: 230px;
border-radius: 8px;
overflow: hidden;
img {
width: 100%;
height: 100%;
}
}
.b-bs {
width: 100%;
display: flex;
@ -888,6 +911,7 @@ export default {
justify-content: space-between;
margin-top: 15px;
}
.left-box {
width: 74%;
background: #FFFFFF;
@ -900,6 +924,7 @@ export default {
box-sizing: border-box;
padding: 15px;
}
.left-box-t {
width: 74%;
box-sizing: border-box;
@ -910,6 +935,7 @@ export default {
height: 380px;
}
.right-box {
width: 25%;
border-radius: 8px;
@ -919,6 +945,7 @@ export default {
box-sizing: border-box;
padding: 15px;
}
.right-box-t {
width: 25%;
border-radius: 8px;
@ -927,31 +954,35 @@ export default {
height: 380px;
box-sizing: border-box;
padding: 15px;
overflow: auto;
scrollbar-width: none;
}
.san-box {
width: 24%;
height: 120px;
height: 100px;
box-sizing: border-box;
border-radius: 8px;
background: #fe8c4a;
margin: 15px 0px;
margin-right: 15px;
margin: 15px auto;
box-sizing: border-box;
padding: 20px 40px;
}
.r-title {
font-weight: bold;
font-size: 42px;
color: #FFFFFF;
text-align: center;
}
.r-size {
font-size: 14px;
color: #FFFFFF;
text-align: center;
}
.title_ {
font-size: 16px;
color: #333333;
@ -961,49 +992,71 @@ export default {
justify-content: space-between;
width: 100%;
}
.hang_ {
width: 100%;
white-space: nowrap; //不换行
overflow: hidden; //超出部分隐藏
text-overflow: ellipsis; //文本溢出显示省略号
font-size: 14px;
color: #777777;
color: #333;
margin: 14px auto;
}
.h-tt {
font-size: 16px;
color: #333333;
font-weight: bold;
margin-right: 40px;
display: flex;
justify-content: space-between;
}
.q-anniu {
width: 80px;
height: 26px;
background: #FF9655;
background: #FF9655 !important;
border-radius: 4px 4px 4px 4px;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
color: #fff !important;
font-size: 12px;
cursor: pointer;
margin-right: 20px;
}
.h-anniu {
width: 80px;
height: 26px;
background: #fafafa;
border-radius: 4px 4px 4px 4px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
margin-right: 20px;
font-weight: 400;
font-size: 12px;
color: #555555;
}
.k-box {
width: 220px;
width: 24%;
height: 68px;
background: #FFFFFF;
border-radius: 8px;
border: 1px solid #e1e0e0;
box-sizing: border-box;
margin: 0 auto;
padding: 10px;
margin-right: 10px;
}
.num-size {
font-weight: bold;
font-size: 24px;
color: #555555;
}
.sian {
width: 6px;
height: 6px;
@ -1011,23 +1064,27 @@ export default {
border-radius: 50%;
margin-right: 5px;
}
.hui-hang {
width: 100%;
height: 5px;
background: #F4F5F9;
margin: 15px auto;
}
.h-r-ba {
height: 170px;
margin: 0px 50px;
width: 5px;
background: #f4f5f9;
}
.r-img {
width: 84px;
height: 70px;
margin-right: 20px;
}
.bottom_ {
width: 100%;
border-radius: 10px;
@ -1036,6 +1093,7 @@ export default {
padding: 20px;
margin-top: 20px;
}
.anniu-h {
width: 80px;
height: 26px;
@ -1048,21 +1106,25 @@ export default {
color: #777777;
margin-right: 20px;
}
.anniu-act {
background: #FF9655 !important;
border: 1px solid #FF9655 !important;
color: #fff;
}
.la-left {
width: 73%;
background: #fff;
border-radius: 10px;
}
.la-right {
height: 25%;
background: #fff;
border-radius: 10px;
}
.hui-box {
background: #F4F5F9;
border-radius: 8px;
@ -1070,26 +1132,32 @@ export default {
box-sizing: border-box;
padding: 10px;
display: flex;
font-size: 14px;
justify-content: space-between;
margin: 10px auto;
div {
width: 20%;
text-align: center;
}
}
.hang-box {
border-radius: 8px;
font-size: 14px;
width: 100%;
box-sizing: border-box;
padding: 10px;
padding: 5px;
display: flex;
justify-content: space-between;
margin: 10px auto;
margin: 0px auto;
div {
width: 20%;
text-align: center;
}
}
.home-index {
}