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

Merge branch 'master' of http://192.168.31.244:3000/byx/oilSystem

Browse Source
This commit is contained in:
DESKTOP-369JRHT\12997 2024-07-06 18:00:48 +08:00
commit 4f7abd2c45
5 changed files with 593 additions and 383 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
fuintAdmin/src/assets/styles/btn.scss
View File

@ -99,13 +99,16 @@
}
.el-button--warning{
background: linear-gradient( 90deg, #409EFF 0%, #409EFF 100%) !important;
color: white !important;
border: 0px !important;
}
.el-button--primary{
background: linear-gradient( 90deg, #FF8646 0%, #FFA360 100%) !important;
color: white !important;
border: 0px !important;
}
.el-button--success{
background: linear-gradient( 90deg, #0DC291 0%, #0DC291 100%) !important;
color: white !important;
border: 0px !important;
}

3
fuintAdmin_zt/src/assets/styles/btn.scss
View File

@ -101,15 +101,18 @@
.el-button--warning{
color: white !important;
background: linear-gradient( 90deg, #409EFF 0%, #409EFF 100%) !important;
color: white !important;
border: 0px !important;
}
.el-button--primary{
color: white !important;
background: linear-gradient( 90deg, #FF8646 0%, #FFA360 100%) !important;
color: white !important;
border: 0px !important;
}
.el-button--success{
background: linear-gradient( 90deg, #0DC291 0%, #0DC291 100%) !important;
color: white !important;
border: 0px !important;
}
.el-button--text{

381
fuintAdmin_zt/src/views/Service/index.vue
View File

@ -1,177 +1,266 @@
<template>
<div class="app-container">
<div class="bannser">
<img src="../../assets/images/banner.png" alt="" >
</div>
<div class="b-bs">
<div class="left-box">
<div class="san-box">
<div>
<img src="../../assets/images/l-one.png" style="width: 80px;height: 80px">
</div>
<div>
<div class="r-title">568</div>
<div class="r-size">合作油站总数</div>
</div>
</div>
<div class="san-box" style="background: linear-gradient( 90deg, #FFDC9B 0%, #FFC154 100%);">
<div>
<img src="../../assets/images/l-two.png" style="width: 80px;height: 80px">
</div>
<div>
<div class="r-title">568</div>
<div class="r-size">合作油站总数</div>
</div>
</div>
<div class="san-box" style="background: linear-gradient( 90deg, #9CDCA0 0%, #5BC557 100%);">
<div>
<img src="../../assets/images/l-three.png" style="width: 80px;height: 80px">
</div>
<div>
<div class="r-title">568</div>
<div class="r-size">合作油站总数</div>
</div>
</div>
</div>
<div class="right-box">
<div class="title_">
<div>通知中心</div>
<div style="font-size: 12px;color: #BBBBBB;display: flex;align-items: center">更多 <i class="el-icon-arrow-right"></i> </div>
</div>
<div class="hang_" v-for="(item,index) in 4" :key="index" >【到期提醒】百业兴智慧油站系统将于2024年07月10日到期...</div>
</div>
<div class="app-container">
<el-card >
<el-row :gutter="24">
<el-form ref="queryParams" :model="queryParams" label-width="40px">
<el-col :span="4">
<el-form-item label="名称">
<el-input v-model="queryParams.storeName"></el-input>
</el-form-item>
</el-col>
<el-col :span="4">
<el-form-item label="状态">
<el-select v-model="queryParams.status" placeholder="店铺状态">
<el-option label="启用" value="qy"></el-option>
<el-option label="禁用" value="jy"></el-option>
</el-select>
</el-form-item>
</el-col>
<!-- <el-col :span="4">
<el-form-item label="套餐">
<el-select v-model="form.region" placeholder="店铺套餐">
<el-option label="店铺套餐一" value="shanghai"></el-option>
<el-option label="店铺套餐二" value="beijing"></el-option>
</el-select>
</el-form-item>
</el-col> -->
<!-- <el-col :span="6">
<el-form-item label="时间">
<el-date-picker
v-model="value1"
type="daterange"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期">
</el-date-picker>
</el-form-item>
</el-col> -->
<el-col :span="4">
<el-button type="primary" icon="el-icon-search" @click="getlist()">搜索</el-button>
<el-button type="" icon="el-icon-refresh" @click="res()">重置</el-button>
</el-col>
</el-form>
</el-row>
</el-card>
<el-card style="margin-top: 20px" v-for="(item,index) in arrlist" :key="index">
<div slot="header" class="clearfix">
<span>{{item.storeName || ''}}</span>
<!-- <el-button style="float: right; padding: 3px 0" type="text">进入</el-button>-->
</div>
<div class="b-bs">
<div class="left-box-t"> </div>
<div class="right-box-t"> </div>
<div class="box-wrap">
<div class="zong-box" v-for="(items,index) in item.storeList" :key="index" >
<div class="pur-box" @click="godetails(items.id)">
<el-tag type="success" v-if="items.status=='qy'">启用</el-tag>
<el-tag type="danger" v-else>禁用</el-tag>
<div class="disper-box">
<div class="box-img">
<img v-if="items.logo" :src="imagePath + items.logo" style="width: 96px;height: 96px">
<img v-else src="https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png" style="width: 96px;height: 96px">
</div>
<div >
<div class="title">{{items.name || ''}}</div>
<div class="box-hui">
<div>注册时间：</div>
<div>{{ items.createTime.substring(0,10) || ''}}</div>
</div>
<div class="box-hui">
<div>联系人：</div>
<div>{{items.contact || '暂无'}}</div>
</div>
<div class="box-hui">
<div>联系电话：</div>
<div>{{items.phone || '暂无'}}</div>
</div>
</div>
</div>
</div>
<div class="hui-bottom">
<div>
<div class="shang-biao">{{item.storeList.length || 0}}</div>
<div class="xia-biao">创建门店数（个）</div>
</div>
<div>
<!-- <div class="shang-biao">{{ items.userNum}}</div> -->
<div class="shang-biao">{{ items.userNum}}</div>
<div class="xia-biao">会员数（人）</div>
</div>
<div>
<div class="shang-biao">{{ items.orderNum}}</div>
<div class="xia-biao">支付订单（笔）</div>
</div>
</div>
</div>
</div>
</div>
</el-card>
</div>
</template>
<script>
import { Storelist,getUserNumApi,
getOrderNumApi } from "@/api/service/service";
export default {
name: 'service',
dicts: ['zhzt'],
data(){
return{
form: {
name: '',
region: '',
date1: '',
date2: '',
delivery: false,
type: [],
resource: '',
desc: ''
},
imagePath: process.env.VUE_APP_SERVER_URL,
export default {
arrlist:[],
value1:'',
queryParams: {
storeName: '',
status: '',
pageNo: 1,
pageSize: 10,
data(){
return{
form: {},
imagePath: process.env.VUE_APP_SERVER_URL,
}
},
}
},
async mounted() {
await this.getlist()
},
methods:{
async getlist(){
await Storelist(this.queryParams).then(res=>{
console.log(res)
this.arrlist = res.data.records
})
},
methods:{
res() {
this.queryParams= {
storeName: '',
status: '',
pageNo: 1,
pageSize: 10,
}
}
this.getlist()
},
godetails(id){
this.$router.push({
path:'/Service/details',
query:{
id:id
}
})
},
}
}
</script>
<style scoped lang="scss">
.app-container{
width: 100%;
height: 100%;
/* height: 100vh; */
background: #f4f5f9;
}
.bannser{
width: 100%;
height: 230px;
height: 100%;
/* height: 100vh; */
background: white;
}
.ding-top{
width: 100%;
box-sizing: border-box;
}
.box-dis{
display: flex;
align-items: center;
}
.clearfix:before,
.clearfix:after {
display: table;
content: "";
}
.clearfix:after {
clear: both
}
.box-wrap{
width: 100%;
display: flex;
flex-wrap: wrap;
}
.zong-box{
width: 18%;
overflow: hidden;
border-radius: 8px;
box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
margin-bottom: 30px;
margin-right: 30px;
}
.pur-box{
width: 100%;
padding: 10px;
}
.disper-box{
display: flex;
margin-top: 10px;
}
.box-img{
width: 96px;
height: 96px;
border-radius: 8px;
overflow: hidden;
img{
width: 100%;
height: 100%;
}
margin-right: 10px;
}
.b-bs{
width: 100%;
.box-hui{
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 20px;
font-size: 14px;
color: #99a9bf;
margin-top: 4px;
}
.left-box{
background: #FFFFFF;
border-radius: 10px 10px 10px 10px;
border: 1px solid #FFFFFF;
height: 192px;
display: flex;
align-items: center;
justify-content: space-between;
box-sizing: border-box;
padding: 15px;
}
.left-box-t{
box-sizing: border-box;
padding: 15px;
border-radius: 8px;
background: #fff;
border: 1px solid #FFFFFF;
height: 380px;
}
.right-box{
width: 435px;
border-radius: 8px;
background: #fff;
border: 1px solid #FFFFFF;
height: 192px;
box-sizing: border-box;
padding: 15px;
}
.right-box-t{
width: 435px;
border-radius: 8px;
background: #fff;
border: 1px solid #FFFFFF;
height: 380px;
box-sizing: border-box;
padding: 15px;
}
.san-box{
width: 360px;
height: 150px;
box-sizing: border-box;
border-radius: 8px;
background: linear-gradient( 90deg, #70CAFD 0%, #02AAFE 100%);
margin: 15px 0px;
margin-right: 15px;
box-sizing: border-box;
padding: 20px 40px;
display: flex;
align-items: center;
justify-content: space-between;
}
.r-title{
.title{
font-size: 18px;
font-weight: bold;
font-size: 42px;
color: #FFFFFF;
}
.hui-bottom{
width: 100%;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: space-around;
background: #fafafc;
padding: 20px 10px;
}
.shang-biao{
font-size: 16px;
font-weight: bold;
width: 100%;
text-align: center;
}
.r-size{
font-size: 14px;
color: #FFFFFF;
}
.title_{
font-size: 16px;
color: #333333;
font-weight: bold;
display: flex;
align-items: center;
justify-content: space-between;
.xia-biao{
width: 100%;
}
.hang_{
width: 100%;
white-space: nowrap; //不换行
overflow: hidden; //超出部分隐藏
text-overflow: ellipsis; //文本溢出显示省略号
font-size: 14px;
color: #777777;
margin: 14px auto;
overflow: auto;
text-align: center;
font-size: 12px;
}
</style>

588
fuintAdmin_zt/src/views/index.vue
View File

@ -1,256 +1,370 @@
<template>
<div class="app-container">
<div class="overview">
<div class="title">中台系统运营概况 </div>
<div class="content" v-loading="loading">
<el-row class="line">
<el-col class="item" :span="6">
<div class="do">
<svg t="1641957967018" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7597" width="64" height="64"><path d="M917.504 376.832c-20.48 0-36.864 16.384-36.864 36.864v450.56c0 4.096 0 16.384-12.288 28.672-8.192 8.192-16.384 12.288-28.672 12.288H180.224c-20.48 0-40.96-16.384-40.96-40.96V155.648c0-20.48 16.384-40.96 40.96-40.96h344.064c20.48 0 36.864-16.384 36.864-36.864s-16.384-36.864-36.864-36.864H180.224C118.784 40.96 65.536 90.112 65.536 155.648v708.608c0 61.44 49.152 114.688 114.688 114.688h663.552c28.672 0 57.344-12.288 81.92-32.768 28.672-28.672 32.768-65.536 32.768-81.92V409.6c-4.096-16.384-20.48-32.768-40.96-32.768z" fill="#8a8a8a" p-id="7598"></path><path d="M782.336 528.384c0-20.48-20.48-40.96-40.96-40.96H266.24c-24.576 0-40.96 20.48-40.96 40.96v8.192c0 20.48 16.384 40.96 40.96 40.96h475.136c20.48 0 40.96-20.48 40.96-40.96v-8.192zM741.376 712.704H266.24c-24.576 0-40.96 20.48-40.96 40.96v8.192c0 20.48 16.384 40.96 40.96 40.96h475.136c20.48 0 40.96-20.48 40.96-40.96v-8.192c0-20.48-16.384-40.96-40.96-40.96zM584.04864 304.08704l298.43456-262.30784 62.17728 70.73792-298.43456 262.30784zM532.48 413.696l90.112-20.48-61.44-69.632z" fill="#8a8a8a" p-id="7599"></path></svg>
<p class="text">今日新增订单数（笔）</p>
<p class="number">{{ homeData.todayOrder }}</p>
</div>
</el-col>
<el-col class="item" :span="6">
<div class="do">
<svg t="1641958321700" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="10174" width="64" height="64"><path d="M204.8 438.528c-16.896 0-30.72-13.824-30.72-30.72 0-121.088 98.56-219.648 219.648-219.648 16.896 0 30.72 13.824 30.72 30.72s-13.824 30.72-30.72 30.72c-87.296 0-158.208 70.912-158.208 158.208 0 16.896-13.824 30.72-30.72 30.72zM393.728 856.064c-121.088 0-219.648-98.56-219.648-219.648 0-16.896 13.824-30.72 30.72-30.72s30.72 13.824 30.72 30.72c0 87.296 70.912 158.208 158.208 158.208 16.896 0 30.72 13.824 30.72 30.72 0 16.896-13.824 30.72-30.72 30.72zM622.336 856.064c-16.896 0-30.72-13.824-30.72-30.72 0-16.896 13.824-30.72 30.72-30.72 87.296 0 158.208-70.912 158.208-158.208 0-16.896 13.824-30.72 30.72-30.72 16.896 0 30.72 13.824 30.72 30.72 0 121.088-98.56 219.648-219.648 219.648zM811.264 438.528c-16.896 0-30.72-13.824-30.72-30.72 0-87.296-70.912-158.208-158.208-158.208-16.896 0-30.72-13.824-30.72-30.72s13.824-30.72 30.72-30.72c121.088 0 219.648 98.56 219.648 219.648 0 16.896-13.824 30.72-30.72 30.72z" fill="#8a8a8a" p-id="10175"></path><path d="M684.544 564.224H355.328c-16.896 0-30.72-13.824-30.72-30.72s13.824-30.72 30.72-30.72h329.216c16.896 0 30.72 13.824 30.72 30.72s-13.824 30.72-30.72 30.72z" fill="#8a8a8a" p-id="10176"></path></svg>
<p class="text">今日交易金额（元）</p>
<p class="number">{{ homeData.todayPay ? homeData.todayPay.toFixed(2) : 0.00.toFixed(2) }}</p>
</div>
</el-col>
<el-col class="item" :span="6">
<div class="do">
<svg t="1641957839736" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6014" width="64" height="64"><path d="M624.6 211.8c58.3 0 105.7 46.3 105.7 103.2s-47.4 103.2-105.7 103.2S518.9 371.9 518.9 315s47.4-103.2 105.7-103.2m0-50c-86 0-155.7 68.6-155.7 153.2s69.7 153.2 155.7 153.2S780.3 399.6 780.3 315s-69.7-153.2-155.7-153.2zM427 314.9c0-24.3 5.9-47.3 16.5-67.7-22.8-19.5-52.9-31.4-85.8-31.4-71.2 0-128.9 55.2-128.9 123.4s57.7 123.4 128.9 123.4c43.2 0 81.4-20.3 104.8-51.6-22.3-26.2-35.5-59.6-35.5-96.1zM297.5 727.2v16.9c0-103.5 72.5-191.8 173.7-226.2-29.2-13.3-62.1-20.9-96.9-20.9h-28.5c-118.6 0-215.6 87.2-215.6 194.7v-13.6c0 56.3-4.5 102.3 57.6 102.3H298c-0.9-16.2-0.5-34.2-0.5-53.2z" p-id="6015" fill="#8a8a8a"></path><path d="M639.4 561c27.9 0 55.1 5.2 80.6 15.4 24.5 9.8 46.6 23.9 65.5 41.7 38.3 36.2 59.4 83.9 59.4 134.5h0.2c0.1 5.1 0.3 10 0.4 14.9 0.4 13 0.8 25.2 0.3 34.9-0.3 4.5-0.7 7.7-1.1 9.8-1.9 0.3-4.8 0.5-8.7 0.5H418.4c-8.1 0-12.1-1.1-13.7-1.6-0.7-1.6-2.3-5.9-3.4-15.6-1.3-11.8-1.3-26.8-1.2-42.8h0.1c0-50.6 21.1-98.3 59.4-134.5 18.9-17.9 40.9-31.9 65.5-41.7 25.5-10.2 52.6-15.4 80.6-15.4h33.7m0-50.1h-33.8c-140.5 0-255.5 108.3-255.5 241.6v-16.9c0 69.8-5.3 127 68.2 127H836c73.6 0 58.9-57.1 58.9-127v16.9c0-133.4-115-241.6-255.5-241.6z" p-id="6016" fill="#8a8a8a"></path><path d="M785.1 706.4c0 10.2-8.4 18.5-18.7 18.5h-37.9v36.4c0 10.2-8.4 18.5-18.7 18.5h-9.4c-10.3 0-18.7-8.3-18.7-18.5v-36.4h-39.8c-10.3 0-18.7-8.3-18.7-18.5v-9.2c0-10.2 8.4-18.5 18.7-18.5h39.8v-40.2c0-10.2 8.4-18.5 18.7-18.5h9.4c10.3 0 18.7 8.3 18.7 18.5v40.2h37.9c10.3 0 18.7 8.3 18.7 18.5v9.2z" p-id="6017" fill="#8a8a8a"></path></svg>
<p class="text">今日新增会员数</p>
<p class="number">{{ homeData.todayUser }}</p>
</div>
</el-col>
<el-col class="item" :span="6">
<div class="do">
<svg t="1641958094548" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9210" width="64" height="64"><path d="M888.34834 0.000284H127.658773A126.776854 126.776854 0 0 0 0.853475 126.777138v295.82214a126.776854 126.776854 0 0 0 126.805298 126.805298v169.045287a211.313719 211.313719 0 0 0 169.045287 207.075498v46.506653a42.268433 42.268433 0 0 0 84.508421 0V887.466705c0-23.324438-18.91555-42.268433-42.268433-42.268433a126.776854 126.776854 0 0 1-126.776854-126.776854v-169.045286h302.16525a241.3226 241.3226 0 0 0-42.268433 146.63107 42.268433 42.268433 0 1 0 84.536865 0c-1.706666-146.63107 120.433744-146.63107 120.433745-146.63107a42.268433 42.268433 0 0 0 42.268433-42.268433 54.527985 54.527985 0 0 0 0-8.021331 44.799988 44.799988 0 0 0 0-8.021331v-142.421294a48.611542 48.611542 0 0 1 42.268432-52.849763 48.611542 48.611542 0 0 1 42.268433 52.849763v369.777675a126.776854 126.776854 0 0 1-126.805298 126.776854c-23.324438 0-42.239988 18.91555-42.239988 42.268433v84.536865a42.268433 42.268433 0 0 0 84.508421 0v-46.506654a211.313719 211.313719 0 0 0 169.045286-207.075498v-169.045286a126.776854 126.776854 0 0 0 126.805298-126.776854v-295.82214A126.776854 126.776854 0 0 0 888.319895 0.000284z m42.268433 422.627439c0 23.324438-18.91555 42.239988-42.268433 42.239988v-116.195523a132.693296 132.693296 0 0 0-126.776854-137.386629 122.993744 122.993744 0 0 0-105.642637 62.151094 150.015958 150.015958 0 1 0-21.134216 76.060423v115.370635H127.630329c-23.324438 0-42.239988-18.91555-42.239988-42.239988v-295.82214c0-23.352882 18.91555-42.268433 42.268432-42.268433H888.319895c23.324438 0 42.268433 18.91555 42.268433 42.239988v295.82214z m-359.224789-147.91107a63.402649 63.402649 0 1 1-126.776854 0 63.402649 63.402649 0 0 1 126.776854 0z" p-id="9211" fill="#8a8a8a"></path></svg>
<p class="text">今日活跃会员数</p>
<p class="number">{{ homeData.todayActiveUser }}</p>
</div>
</el-col>
</el-row>
<el-row class="line">
<el-col class="item second-line" :span="6">
<div class="do">
<svg t="1641957661068" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5770" width="64" height="64"><path d="M261.7 522.6h0.2c19.3 0 35-15.7 35-35s-15.7-35-35-35c-31.9 0-58.8-37.7-58.8-82.4s26.9-82.4 58.8-82.4c19.3 0 35-15.7 35-35s-15.7-35-35-35c-35.4 0-69.5 17.3-93.7 47.5-22.6 28.4-35.1 65.6-35.1 104.9s12.5 76.5 35.1 104.9c0.6 0.8 1.3 1.6 2 2.4-22.9 13.2-43.4 31-61.1 53.2-38.3 48-59.5 111.4-59.5 178.4 0 19.3 15.7 35 35 35s35-15.7 35-35c0-51.2 15.7-99.1 44.1-134.7 26.6-33.3 61.3-51.7 97.7-51.7 0.2 0 0.3-0.1 0.3-0.1zM914.8 530.7c-17.7-22.2-38.2-40-61.1-53.2 0.7-0.8 1.3-1.6 2-2.4 22.6-28.4 35.1-65.6 35.1-104.9s-12.5-76.5-35.1-104.9c-24.1-30.2-58.3-47.5-93.7-47.5-19.3 0-35 15.7-35 35s15.7 35 35 35c31.9 0 58.8 37.7 58.8 82.4s-26.9 82.4-58.8 82.4c-19.3 0-35 15.7-35 35s15.7 35 35 35H762.3c36.4 0 71.1 18.4 97.7 51.7 28.5 35.6 44.1 83.5 44.1 134.7 0 19.3 15.7 35 35 35s35-15.7 35-35c0.2-67-21-130.3-59.3-178.3z" p-id="5771" fill="#8a8a8a"></path><path d="M747.4 541c-30.9-30.8-66.9-54.7-106.1-70.8 40.3-34.7 65.8-86 65.8-143.2 0-104.2-84.8-188.9-188.9-188.9-104.2 0-188.9 84.8-188.9 188.9 0 57 25.4 108.2 65.4 142.9C355.2 486 318.9 510 287.8 541c-61.2 61.1-95.1 142.4-95.5 228.9V850.8c0 19.3 15.7 35 35 35h580.5c19.3 0 35-15.7 35-35v-80.2-0.8c-0.3-86.4-34.2-167.6-95.4-228.8zM518.2 208.1c65.6 0 118.9 53.4 118.9 118.9s-53.4 118.9-118.9 118.9S399.3 392.6 399.3 327s53.4-118.9 118.9-118.9z m254.7 607.8H262.3v-44.6-0.6c0.2-140.5 114.8-254.8 255.3-254.8s255 114.3 255.3 254.8v45.2z" p-id="5772" fill="#8a8a8a"></path></svg>
<p class="text">总会员数</p>
<p class="number">{{ homeData.totalUser }}</p>
</div>
</el-col>
<el-col class="item second-line" :span="6">
<div class="do">
<svg t="1641969647517" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3586" width="64" height="64"><path d="M128 544h128v288H128zM320 480h128v352H320zM512 320h128v512H512zM704 416h128v416H704z" p-id="3587" fill="#8a8a8a"></path><path d="M576 128L352 352h448L576 128z" p-id="3588" fill="#8a8a8a"></path></svg>
<p class="text">总交易金额（元）</p>
<p class="number">{{ homeData.totalPay ? homeData.totalPay : '0.00'}}</p>
</div>
</el-col>
<el-col class="item second-line" :span="6">
<div class="do">
<svg t="1641957411945" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4780" width="64" height="64"><path d="M725.504 768C725.290667 768 725.333333 170.709333 725.333333 170.709333L640 170.666667V128h85.376C748.928 128 768 146.986667 768 170.709333v597.248A42.666667 42.666667 0 0 1 725.504 810.666667H170.496C147.029333 810.666667 128 791.68 128 767.957333V170.709333C128 147.114667 147.157333 128 170.624 128H256v42.666667H170.624L170.666667 767.957333 725.504 768z m124.949333-469.333333H810.666667v-42.666667h42.666666c23.573333 0 42.666667 18.986667 42.666667 42.709333v597.248A42.666667 42.666667 0 0 1 853.504 938.666667H298.496A42.453333 42.453333 0 0 1 256 896v-42.666667h42.666667v42.666667l554.666666-0.042667 0.021334-228.416c-0.042667-168.597333-0.021333-368.853333-0.021334-368.853333L850.453333 298.666667zM298.666667 341.333333h298.666666v42.666667H298.666667v-42.666667z m0 128h213.333333v42.666667H298.666667v-42.666667z m0-341.376C298.666667 104.405333 317.802667 85.333333 341.461333 85.333333h213.077334C578.176 85.333333 597.333333 104.490667 597.333333 127.957333v42.752A42.688 42.688 0 0 1 554.538667 213.333333h-213.077334A42.752 42.752 0 0 1 298.666667 170.709333V127.957333z m42.666666 42.752L554.538667 170.666667 554.666667 127.957333 341.461333 128 341.333333 170.709333z" fill="#8a8a8a" p-id="4781"></path></svg>
<p class="text">总订单数</p>
<p class="number">{{ homeData.totalOrder }}</p>
</div>
</el-col>
<el-col class="item second-line" :span="6">
<div class="do">
<svg t="1641958462543" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="13815" width="64" height="64"><path d="M983.696 422.704A480 480 0 1 0 40.72 602.72a469.456 469.456 0 0 0 69.44 172.688 36.4 36.4 0 1 0 60.672-40.24 408.16 408.16 0 0 1 3.664-452.224 400.832 400.832 0 0 1 260.24-171.2 407.136 407.136 0 1 1-112.576 760.288 36.8 36.8 0 0 0-34.352 65.12 477.024 477.024 0 0 0 223.68 54.88 467.984 467.984 0 0 0 89.92-8.784A481.424 481.424 0 0 0 983.712 422.72z" p-id="13816" fill="#8a8a8a"></path><path d="M471.712 579.84h-130.768a36.944 36.944 0 0 0 0 73.888h130.768v116.8a36.944 36.944 0 1 0 73.888 0v-116.8h130.768a36.944 36.944 0 1 0 0-73.888H545.6v-71.664a22.784 22.784 0 0 0-0.736-7.392h131.504a36.944 36.944 0 1 0 0-73.888H341.68a36.944 36.944 0 1 0 0 73.888h131.504a25.152 25.152 0 0 0-0.736 7.392v71.664z" p-id="13817" fill="#8a8a8a"></path><path d="M405.968 383.312a37.104 37.104 0 0 0 52.464-52.464l-79.792-79.792a37.104 37.104 0 1 0-52.464 52.464z" p-id="13818" fill="#8a8a8a"></path><path d="M602.48 383.312l79.792-79.792a37.088 37.088 0 1 0-52.448-52.464l-79.792 79.792a36.576 36.576 0 0 0 0 52.464 37.936 37.936 0 0 0 52.448 0z" p-id="13819" fill="#8a8a8a"></path></svg>
<p class="text">总支付人数</p>
<p class="number">{{ homeData.totalPayUser }}</p>
</div>
</el-col>
</el-row>
<div class="bannser">
<img src="./../assets/images/banner.png" alt="" >
</div>
<div class="b-bs">
<div class="left-box">
<div class="san-box">
<div>
<img src="./../assets/images/l-one.png" style="width: 80px;height: 80px">
</div>
</div>
<div class="overview">
<div class="title">常用功能</div>
<div class="content">
<el-row class="line home-tools">
<el-col class="item no-border" :span="8"><div class="do" @click="toCashier('/cashier/index')"><img class="t-icon" src="@/assets/images/home/pay.png"><div class="text">收银下单</div></div></el-col>
<el-col class="item no-border" :span="8"><div class="do" @click="toTarget('/coupon/confirm/index')"><img class="t-icon" src="@/assets/images/home/coupon.png"><div class="text">核销卡券</div></div></el-col>
<el-col class="item no-border" :span="8"><div class="do" @click="toTarget('/member/index')"><img class="t-icon" src="@/assets/images/home/member.png"><div class="text">会员管理</div></div></el-col>
</el-row>
<el-row class="line home-tools">
<el-col class="item no-border" :span="8"><div class="do" @click="toTarget('/order/index')"><img class="t-icon" src="@/assets/images/home/order.png"><div class="text">订单管理</div></div></el-col>
<el-col class="item no-border" :span="8"><div class="do" @click="toTarget('/coupon/coupon/index')"><img class="t-icon" src="@/assets/images/home/card.png"><div class="text">卡券管理</div></div></el-col>
<el-col class="item no-border" :span="8"><div class="do" @click="toTarget('/goods/goods/index')"><img class="t-icon" src="@/assets/images/home/goods.png"><div class="text">商品管理</div></div></el-col>
</el-row>
<div>
<div class="r-title">568</div>
<div class="r-size">合作油站总数</div>
</div>
</div>
<div class="san-box" style="background: linear-gradient( 90deg, #FFDC9B 0%, #FFC154 100%);">
<div>
<img src="./../assets/images/l-two.png" style="width: 80px;height: 80px">
</div>
<div>
<div class="r-title">568</div>
<div class="r-size">合作油站总数</div>
</div>
</div>
<div class="san-box" style="background: linear-gradient( 90deg, #9CDCA0 0%, #5BC557 100%);">
<div>
<img src="./../assets/images/l-three.png" style="width: 80px;height: 80px">
</div>
<div>
<div class="r-title">568</div>
<div class="r-size">合作油站总数</div>
</div>
</div>
<div class="overview">
<div class="title">报表统计</div>
<div class="content">
<el-row>
<el-col class="item" :span="12">
<commonChart v-if="chartData1.length > 0" :title="chart1.title" :color="chart1.color" :chart-type="chart1.chartType" :head-list="chart1.header" :data-list="chartData1" width="100%" id="chart1" height="400px"/>
</el-col>
<el-col class="item" :span="12">
<commonChart v-if="chartData2.length > 0" :title="chart2.title" :color="chart2.color" :chart-type="chart2.chartType" :head-list="chart2.header" :data-list="chartData2" width="100%" id="chart2" height="400px"/>
</el-col>
</el-row>
</div>
</div>
<div class="overview">
<commonChartwo></commonChartwo>
<div class="right-box">
<div class="title_">
<div>通知中心</div>
<div style="font-size: 12px;color: #BBBBBB;display: flex;align-items: center">更多 <i class="el-icon-arrow-right"></i> </div>
</div>
<div class="hang_" v-for="(item,index) in 4" :key="index" >【到期提醒】百业兴智慧油站系统将于2024年07月10日到期...</div>
</div>
</div>
<div class="b-bs">
<div class="left-box-t">
<div class="d-s">
<div class="h-tt" >数据看板</div>
<div class="q-anniu">近一周</div>
<div style="margin-right: 40px">
<el-date-picker
v-model="value1"
type="datetimerange"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期">
</el-date-picker>
</div>
<div style="margin-right: 40px">
<el-select v-model="value" clearable placeholder="请选择">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</div>
</div>
<div class="d-s" style="margin-top: 15px">
<div class="k-box">
<div class="d-s" style="font-size: 12px;color: #999999;">
<div class="sian"></div>
<div>活跃油站数</div>
</div>
<div class="num-size">868</div>
</div>
<div class="k-box">
<div class="d-s" style="font-size: 12px;color: #999999;">
<div class="sian"></div>
<div>交易金额(万元)/交易笔数</div>
</div>
<div class="num-size">1080.50</div>
</div>
<div class="k-box">
<div class="d-s" style="font-size: 12px;color: #999999;">
<div class="sian"></div>
<div>退款金额(元)/退款笔数</div>
</div>
<div class="num-size">1868.20</div>
</div>
<div class="k-box">
<div class="d-s" style="font-size: 12px;color: #999999;">
<div class="sian"></div>
<div>笔均单价(元)</div>
</div>
<div class="num-size">508.00</div>
</div>
<div class="k-box">
<div class="d-s" style="font-size: 12px;color: #999999;">
<div class="sian"></div>
<div>日均交易额(万元)/日均交易笔数</div>
</div>
<div class="num-size">5208.60 / 90</div>
</div>
</div>
<div class="hui-hang"></div>
<div class="d-s">
<div>
<div class="h-tt" >活跃油站</div>
<div id="pie" style="width: 150px;height: 150px;"></div>
</div>
</div>
</div>
<div class="right-box-t">
</div>
</div>
</div>
</template>
<script>
import { getHomeData, getStatisticData } from "@/api/home";
import commonChart from './components/charts/index'
import commonChartwo from './components/charts/chartstwo'
export default {
name: "HomePage",
components: {
commonChart,
commonChartwo
},
data() {
return {
loading: false,
homeData: { todayUser: 0, totalUser: 0, todayOrder: 0, totalOrder: 0, todayPay: 0, totalPay: 0, todayActiveUser: 0, totalPayUser: 0 },
chart1: { title: '近七日订单数量', color: '#ff5b57', chartType: 'bar', header: ['订单统计'] },
chart2: { title: '近七日会员活跃数', color: '#00acac', chartType: 'line', header: ['会员统计'] },
chartData1: [],
chartData2: [],
};
},
created() {
// this.getHomeData();
this.getChartsData();
},
methods: {
// 查询首页数据
getHomeData() {
this.loading = true;
getHomeData().then(response => {
this.homeData = response.data;
this.loading = false
}
);
},
// 查询统计数据
getChartsData() {
const app = this;
app.loading = true;
// 近7日订单数量和活跃会员数量
getStatisticData({ tag : 'order,user_active' }).then(response => {
const data = response.data;
const labelData1 = data.data[0] ? data.data[0] : [];
const labelData2 = data.data[1] ? data.data[1] : [];
const dataList1 = [];
const dataList2 = [];
data.labels.forEach(function(label, index) {
const value1 = labelData1[index] ? labelData1[index] : 0;
const value2 = labelData2[index] ? labelData2[index] : 0;
dataList1.push( { name: label, value0: value1 } );
dataList2.push( { name: label, value0: value2 } );
})
app.chartData1 = dataList1;
app.chartData2 = dataList2;
app.loading = false;
}
)
},
// 页面跳转
toTarget(url) {
this.$router.push( { path: url } );
},
// 去收银台
toCashier(url) {
const routeLink = this.$router.resolve({ path: url });
window.open(routeLink.href, '_blank');
export default {
data(){
return{
form: {},
options: [{
value: '选项1',
label: '黄金糕'
}, {
value: '选项2',
label: '双皮奶'
}, {
value: '选项3',
label: '蚵仔煎'
}, {
value: '选项4',
label: '龙须面'
}, {
value: '选项5',
label: '北京烤鸭'
}],
value: '',
value1: [new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)],
imagePath: process.env.VUE_APP_SERVER_URL,
}
},
};
methods:{
initChart() {
const chart = echarts.init(document.getElementById('pie'))
const option = {
color: [
'#ff9655',
'#86E1BB',
'#8195F5',
],
dataset: {
source: [
['product', '#92', '#95', '#98'],
]
},
xAxis: {
type: 'category',
boundaryGap: false,
// data: ['2023.1.1', '2023.2.1', '2023.3.1', '2023.4.1', '2023.5.1', '2023.6.1', '2023.7.1']
data: this.timeDate
},
yAxis: {
type: 'value'
},
series: [
{
data: this.oilDate,
type: 'line',
smooth: true,
lineStyle: {
width: 4
},
areaStyle: {
opacity: 0.8,
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: '#fff'
},
{
offset: 1,
color: '#F8F1E7'
}
])
},
},
]
};
chart.setOption(option)
}
}
}
</script>
<style scoped lang="scss">
.overview {
min-height: 270px;
background: #FFFFFF;
margin-bottom: 0px;
box-shadow: 0 1px 2px #d5d7d8;
.title {
margin: 10px 0px 0px 0px;
padding: 10px 0px 0px 10px;
height: 44px;
border: 1px solid #e2e1e1;
background: #f4f4f4;
color: #333;
font-weight: bold;
}
.content {
padding: 15px;
border: solid 1px #d5d7d8;
.item {
display: block;
border-right: none;
border-bottom: none;
min-height: 100px;
padding: 6px;
text-align: center;
cursor: pointer;
.do {
border: solid 1px #cccccc;
padding: 20px;
border-radius: 2px;
}
.icon {
height: 40px;
width: 40px;
display: block;
padding: 5px;
float: left;
border: solid #8a8a8a 1px;
border-radius: 30px;
}
.text {
text-align: left;
margin: 0px;
text-indent: 10px;
font-size: 14px;
}
.number {
text-align: left;
margin: 0px;
font-weight: bold;
text-indent: 10px;
font-size: 18px;
color: #ff5b57;
}
}
.home-tools {
.do {
height: 90px;
margin-bottom: 10px;
cursor: pointer;
font-weight: bold;
color: #666666;
border-radius: 2px;
text-align: left;
padding: 20px 0px 10px 20px;
float: left;
width: 100%;
background: #ffffff;
border: solid 1px #cccccc;
.text {
margin-top: 14px;
}
}
.t-icon {
width: 50px;
height: 50px;
float: left;
}
}
}
}
.app-container{
width: 100%;
height: 100%;
/* height: 100vh; */
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;
align-items: center;
justify-content: space-between;
margin-top: 20px;
}
.left-box{
background: #FFFFFF;
border-radius: 10px 10px 10px 10px;
border: 1px solid #FFFFFF;
height: 192px;
display: flex;
align-items: center;
justify-content: space-between;
box-sizing: border-box;
padding: 15px;
}
.left-box-t{
box-sizing: border-box;
padding: 15px;
border-radius: 8px;
background: #fff;
border: 1px solid #FFFFFF;
height: 380px;
}
.right-box{
width: 435px;
border-radius: 8px;
background: #fff;
border: 1px solid #FFFFFF;
height: 192px;
box-sizing: border-box;
padding: 15px;
}
.right-box-t{
width: 435px;
border-radius: 8px;
background: #fff;
border: 1px solid #FFFFFF;
height: 380px;
box-sizing: border-box;
padding: 15px;
}
.san-box{
width: 360px;
height: 150px;
box-sizing: border-box;
border-radius: 8px;
background: linear-gradient( 90deg, #70CAFD 0%, #02AAFE 100%);
margin: 15px 0px;
margin-right: 15px;
box-sizing: border-box;
padding: 20px 40px;
display: flex;
align-items: center;
justify-content: space-between;
}
.r-title{
font-weight: bold;
font-size: 42px;
color: #FFFFFF;
text-align: center;
}
.r-size{
font-size: 14px;
color: #FFFFFF;
}
.title_{
font-size: 16px;
color: #333333;
font-weight: bold;
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
}
.hang_{
width: 100%;
white-space: nowrap; //不换行
overflow: hidden; //超出部分隐藏
text-overflow: ellipsis; //文本溢出显示省略号
font-size: 14px;
color: #777777;
margin: 14px auto;
overflow: auto;
}
.h-tt{
font-size: 16px;
color: #333333;
font-weight: bold;
margin-right: 40px;
}
.q-anniu{
width: 80px;
height: 26px;
background: #FF9655;
border-radius: 4px 4px 4px 4px;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
cursor: pointer;
margin-right: 20px;
}
.k-box{
width: 215px;
height: 68px;
background: #FFFFFF;
border-radius: 8px;
border: 1px solid #e1e0e0;
box-sizing: border-box;
padding: 10px;
margin-right: 10px;
}
.num-size{
font-weight: bold;
font-size: 24px;
color: #555555;
}
.sian{
width: 6px;
height: 6px;
background: #2BBCFF;
border-radius: 50%;
margin-right: 5px;
}
.hui-hang{
width: 100%;
height: 5px;
background: #F4F5F9;
margin: 15px auto;
}
</style>

1
fuintCashierWeb/src/assets/styles/btn.scss
View File

@ -108,6 +108,7 @@
border: 0px !important;
}
.el-button--success{
color: white !important;
background: linear-gradient( 90deg, #0DC291 0%, #0DC291 100%) !important;
border: 0px !important;
}