This commit is contained in:
xvv 2024-09-04 11:22:28 +08:00
parent 514893ecbd
commit 9358112b3b
10 changed files with 1113 additions and 69 deletions

View File

@ -0,0 +1,64 @@
import request from '@/utils/request'
// 查询首页店铺数量信息
export function storeTotalIndex(query) {
return request({
url: '/backendApi/store/getStoreTotal',
method: 'get',
params: query
})
}
// 查询首页店铺金额信息
export function storeAmountIndex(query) {
return request({
url: '/business/allOrderInfo/getAmount',
method: 'get',
params: query
})
}
// 查询首页店铺金额信息
export function storeAmountIndex1(query) {
return request({
url: '/business/allOrderInfo/getAmount1',
method: 'get',
params: query
})
}
// 查询首页店铺金额信息
export function selectStoreAmount(query) {
return request({
url: '/backendApi/store/selectStoreAmount',
method: 'get',
params: query
})
}
// 查询首页店铺金额信息
export function getStoreAmountByTime(query) {
return request({
url: '/backendApi/store/getStoreAmountByTime',
method: 'get',
params: query
})
}
// 查询首页店铺金额信息
export function getAccountInfo(query) {
return request({
url: '/system/dept/getInfo',
method: 'get',
params: query
})
}
export function resetPwd(data) {
return request({
url: '/backendApi/account/resetPwd',
method: 'post',
data: data
})
}

View File

@ -0,0 +1,37 @@
import request from '@/utils/request'
// 分页查询所有的订单信息
export function getListApi(query) {
return request({
url: 'hardwareStore',
method: 'get',
params: query
})
}
//
export function deleteApi(ids) {
return request({
url: 'hardwareStore?idList=' + ids,
method: 'delete'
})
}
//
export function saveApi(data) {
return request({
url: 'hardwareStore',
method: 'post',
data: data
})
}
// 保存修改信息
export function updateApi(data) {
return request({
url: 'hardwareStore',
method: 'put',
data: data
})
}

View File

@ -106,6 +106,12 @@ export const constantRoutes = [
name: 'resource_oilstore',
meta: { title: '系统首页', icon: 'dashboard', affix: true }
},
{
path: '/shopowner',
component: () => import('@/views/shopowner'),
name: 'shopowner',
meta: { title: '系统新首页', icon: 'dashboard', affix: true }
},
{
path: '/account',
component: Layout,

View File

@ -0,0 +1,33 @@
import request from '@/utils/request'
// 查询分时优惠列表 1
export function getRequestList(query) {
return request({
url: '/business/activePrice/page',
method: 'get',
params: query
})
}
export function getID(id) {
return request({
url: '/business/activePrice/'+id,
method: 'get',
})
}
// 查询oil油号列表
export function getoilList(query) {
return request({
url: '/business/petrolStationManagement/oilNumber/getOilNumber',
method: 'get',
params: query
})
}
// 新增oil油号列表
export function postaddList(data) {
return request({
url: '/business/activePrice/add',
method: 'post',
data: data
})
}

View File

@ -1,16 +1,16 @@
<template>
<div class="a-container">
<!---->
<activeNewlyweds v-show="id == 1"></activeNewlyweds>
<activeConsumption v-show="id == 3" ></activeConsumption>
<invite v-show="id == 4"></invite>
<birthday v-show="id == 5" ></birthday>
<separate v-show="id == 9" ></separate>
<TimeLimited v-show="id == 10"></TimeLimited>
<liJianMarketing v-show="id == 11"></liJianMarketing>
<userRecharge v-show="id == 6"></userRecharge>
<userConsume v-show="id == 7"></userConsume>
<popUp v-show="id == 8"></popUp>
<activeNewlyweds v-if="id == 1"></activeNewlyweds>
<activeConsumption v-if="id == 3" ></activeConsumption>
<invite v-if="id == 4"></invite>
<birthday v-if="id == 5" ></birthday>
<separate v-if="id == 9" ></separate>
<TimeLimited v-if="id == 10"></TimeLimited>
<liJianMarketing v-if="id == 11"></liJianMarketing>
<userRecharge v-if="id == 6"></userRecharge>
<userConsume v-if="id == 7"></userConsume>
<popUp v-if="id == 8"></popUp>
</div>
</template>

View File

@ -44,7 +44,7 @@
<div class="gang"></div>
<div class="g-title">分时优惠</div>
</div>
<el-button type="primary" @click="centerDialogVisible =! centerDialogVisible">新增分时优惠</el-button>
<el-button type="primary" @click="Timeshare()">新增分时优惠</el-button>
</div>
<el-table
:data="tableData"
@ -58,32 +58,33 @@
</el-table-column>
<el-table-column
align="center"
prop="name"
prop="title"
label="分时优惠名称"
>
</el-table-column>
<el-table-column
align="center"
prop="name"
prop="countCom"
label="适用商品数量"
>
</el-table-column>
<el-table-column
align="center"
prop="name"
prop="createBy"
label="创建人"
>
</el-table-column>
<el-table-column
align="date"
prop="address"
label="地址">
align="center"
prop="createTime"
label="创建时间">
</el-table-column>
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
<template slot-scope="scope">
<el-button
size="mini"
type="text"
@click="modifySeparateList(scope.row.id)"
>修改</el-button>
<el-button
size="mini"
@ -187,6 +188,7 @@
<el-button
size="mini"
type="text"
@click="showDialogVisible =! showDialogVisible"
>修改</el-button>
<el-button
@ -200,69 +202,79 @@
<el-dialog
title="新增/修改分时优惠"
:visible.sync="centerDialogVisible"
width="40%"
width="48%"
center>
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="120px" class="demo-ruleForm">
<el-form-item label="分时优惠名称" prop="name">
<el-input v-model="ruleForm.name" style="width: 217px"></el-input>
<el-form-item label="分时优惠名称" prop="title">
<el-input v-model="ruleForm.title" style="width: 217px"></el-input>
</el-form-item>
<el-form-item label="类型" prop="region">
<el-select v-model="ruleForm.region" placeholder="请选择活动区域">
<el-option label="固定价格" value="yi"></el-option>
<el-option label="折扣" value="re"></el-option>
<el-option label="减价" value="san"></el-option>
<el-form-item label="类型" prop="category">
<el-select v-model="ruleForm.category" placeholder="请选择类型">
<el-option label="固定价格" value="1"></el-option>
<el-option label="折扣" value="2"></el-option>
<el-option label="减价" value="3"></el-option>
</el-select>
<div>当手动/自动调整商品价格后若调整后的售价低于规则设置时的会员
则该规则不生效</div>
</el-form-item>
<el-form-item label="折扣" prop="name" v-if="ruleForm.region == 're' ">
<el-input v-model="ruleForm.name" style="width: 217px"></el-input>
<el-form-item label="折扣" prop="disValue" v-if="ruleForm.category == '2' ">
<el-input v-model="ruleForm.disValue" style="width: 217px"></el-input>
<div>折扣请填写0~1的数字例如输入0.8表示打8折</div>
</el-form-item>
<el-form-item label="减价金额" prop="name" v-if="ruleForm.region == 'san' " >
<el-input v-model="ruleForm.name" style="width: 217px"></el-input>
<el-form-item label="减价金额" prop="disValue" v-if="ruleForm.category == '3' " >
<el-input v-model="ruleForm.disValue" style="width: 217px"></el-input>
<div>减价金额不能小于 0.01</div>
</el-form-item>
<el-table
:data="tableData"
:data="ruleForm.oilList"
border
style="width: 100%">
<el-table-column
align="center"
prop="name"
prop="oilNames"
label="油品油号"
>
</el-table-column>
<el-table-column
align="center"
prop="name"
prop="oilPrice"
label="当前挂牌价(元/L)"
>
</el-table-column>
<el-table-column
align="center"
prop="name"
prop="price"
label="优惠价(元/L"
>
<template slot-scope="scope">
<el-input-number v-model="scope.row.price" controls-position="right" :min="0.1" :max="999"></el-input-number>
<!-- scope.row-->
</template>
</el-table-column>
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
<template slot-scope="scope">
<el-button
v-if="scope.row.type == '0'"
size="mini"
type="text"
@click="deleteType(scope.row)"
>删除</el-button>
<el-button
v-if="scope.row.type == '1'"
size="mini"
type="text"
@click="addType(scope.row)"
>添加</el-button>
</template>
</el-table-column>
</el-table>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="centerDialogVisible = false"> </el-button>
<el-button type="primary" @click="centerDialogVisible = false"> </el-button>
<el-button type="primary" @click="addSeparateList()"> </el-button>
</span>
</el-dialog>
<el-dialog
@ -380,47 +392,112 @@
</el-form>
</el-dialog>
</div>
</template>
<script>
import {getoilList, getRequestList,postaddList,getID} from "./api/separate";
export default {
data() {
return {
//
queryParams: {
pageNum: 1,
pageSize: 5,
activeType:1
},
ruleForm: {
activeType:1,
title:'',
name: '',
region: '',
category:'',
disValue:'',
type: [],
oilList:[]
},
rules: {
name: [
{required: true, message: '请输入活动名称', trigger: 'blur'},
{min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur'}
title: [
{required: true, message: '请输入名称', trigger: 'blur'},
],
region: [
{required: true, message: '请选择活动区域', trigger: 'change'}
category: [
{required: true, message: '请选择类型', trigger: 'change'}
],
},
centerDialogVisible: false,
showDialogVisible:false,
tableData: [{
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1517 弄'
}, {
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄'
}, {
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄'
}]
//
tableData: [],
//
oilList:[]
}
},
created() {
this.getList()
},
methods:{
//
modifySeparateList(id){
getID(id).then(res=>{
console.log(res)
if(res.code == 200){
this.ruleForm = null
this.ruleForm = res.data
}
})
},
//
addSeparateList(){
this.centerDialogVisible = false
postaddList(this.ruleForm).then(res=>{
console.log(res)
if(res.code == 200){
this.$message({
message: '添加成功',
type: 'success'
})
this.getList()
}
})
},
//
getList(){
getRequestList(this.queryParams).then(res=>{
console.log(res)
this.tableData = res.data.records
})
},
//
Timeshare(){
getoilList().then(res=>{
this.ruleForm.oilList = res.data
for (let i = 0; i < this.ruleForm.oilList.length; i++) {
this.ruleForm.oilList[i].type = 0
}
})
this.centerDialogVisible =! this.centerDialogVisible
},
deleteType(data){
data.type = '1'
this.$forceUpdate()
console.log('1',this.ruleForm.oilList)
let tempList = JSON.stringify(this.ruleForm.oilList)
this.ruleForm.oilList = []
this.ruleForm.oilList = JSON.parse(tempList)
},
addType(data){
data.type = '0'
this.$forceUpdate()
console.log('0',this.ruleForm.oilList)
let tempList = JSON.stringify(this.ruleForm.oilList)
this.ruleForm.oilList = []
this.ruleForm.oilList = JSON.parse(tempList)
}
}
}
</script>

View File

@ -1,6 +1,6 @@
<template>
<div class="app-container">
推荐会员消费有礼
<div class="cot-box">
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="120px" style="width: 70%;margin: 0 auto">
<el-form-item label="活动名称" prop="name">

View File

@ -1,16 +1,18 @@
<template>
<div class="app-container">
<div class="banner-box">
<img src="./../assets/new/banner1.png" alt="">
</div>
<topindex></topindex>
<centenrindex></centenrindex>
<bottomindex></bottomindex>
<bottom_z></bottom_z>
<shopowner></shopowner>
<!-- <div class="banner-box">-->
<!-- <img src="./../assets/new/banner1.png" alt="">-->
<!-- </div>-->
<!-- <topindex></topindex>-->
<!-- <centenrindex></centenrindex>-->
<!-- <bottomindex></bottomindex>-->
<!-- <bottom_z></bottom_z>-->
</div>
</template>
<script>
import shopowner from "./shopowner.vue"
import { getHomeData, getStatisticData } from "@/api/home";
import topindex from "@/views/indexcomponents/topindex.vue";
import centenrindex from "@/views/indexcomponents/centenrindex.vue";
@ -22,7 +24,8 @@ export default {
centenrindex,
topindex,
bottomindex,
bottom_z
bottom_z,
shopowner
},
data() {
return {

View File

@ -0,0 +1,825 @@
<template>
<div class="app-container">
<el-carousel height="230px">
<el-carousel-item v-for="(item,index) in bannerList" :key="index">
<div class="bannser">
<!-- <img src="../../assets/images/banner.png" alt="" >-->
<img :src="imagePath+item.productImage" alt="" >
</div>
</el-carousel-item>
</el-carousel>
<div class="b-bs">
<div class="left-box">
<div>核心数据</div>
<div style="display: flex;justify-content: space-between">
<div class="san-box">
<div class="r-title">{{ storeTotal.allTotal || 0 }}</div>
<div class="r-size">总交易金额</div>
</div>
<div class="san-box" style="background: #fc6464">
<div class="r-title">{{ storeTotal.weekTotal || 0 }}</div>
<div class="r-size">总交易笔数</div>
</div>
<div class="san-box" style="background: #fcb12c">
<div class="r-title">{{ storeTotal.monthTotal || 0 }}</div>
<div class="r-size">笔均单价/</div>
</div>
<div class="san-box" style="background: #5bc557;">
<div class="r-title">{{ storeTotal.monthTotal || 0 }}</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 class="hang_" v-for="(item,index) in noticeList" :key="index" >{{ item.notificationType }}{{ item.templateContent }}</div>
<div class="hang_" v-if="this.noticeList.length==0">暂无通知</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"
value-format="yyyy-MM-dd HH:mm:ss"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
@change="getStoreAmount">
</el-date-picker>
</div>
<div style="margin-right: 40px">
<el-select v-model="value" clearable placeholder="请选择" @change="chooseDept()">
<el-option
v-for="item in options"
:key="item.deptId"
:label="item.deptName"
:value="item.deptId">
</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">{{ storeAmount.storeTotal || 0 }}</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">{{ storeAmount.tradeAmount || 0 }}/{{ storeAmount.tradeTotal || 0 }}</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">{{ storeAmount.refundAmount || 0 }}/{{ storeAmount.refundTotal || 0 }}</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">{{ storeAmount.averagePrice || 0 }}</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">{{ storeAmount.dayTradeAmount || 0 }}/{{ storeAmount.dayTradeTotal || 0 }}</div>
</div>
</div>
<div class="hui-hang"></div>
<div class="d-s" >
<div>
<div class="h-tt" >活跃油站</div>
<div id="ccc" style="width: 300px;height: 200px; "></div>
</div>
<div class="h-r-ba"></div>
<div>
<!-- <div class="h-tt" >活跃油站</div>-->
<div class="d-s" style="justify-content: space-between">
<div id="cccc" style="width: 300px;height: 200px;margin-right: 50px"></div>
<div id="ccct" style="width: 300px;height: 200px;"></div>
</div>
</div>
</div>
</div>
<div class="right-box-t">
<div class="h-tt" >硬件设备</div>
<div class="d-s" style="margin: 30px 0px" v-for="(item,index) in hardwareList" :key="index" >
<!-- <div class="r-img">-->
<!-- <img src="../../assets/images/pcin.png" style="width: 84px;height: 70px">-->
<!-- </div>-->
<!-- <div>容大(RT RONGTA)RP76II针式76mm小票打印机加油站二三联票据 RP76II/USB口</div>-->
<div class="r-img">
<img :src="imagePath + item.image" style="width: 84px;height: 70px">
</div>
<div>{{ item.name }}</div>
</div>
</div>
</div>
<div class="b-bs">
<div class="la-left">
<div>数据展示</div>
</div>
<div class="la-right"></div>
</div>
<div class="bottom_">
<div class="h-tt" style="margin-bottom: 15px" >数据统计</div>
<div class="d-s">
<div class="anniu-h" :class="{ 'anniu-act': index == 0 }" v-for="(item,index) in timeList" :key="index">
{{item}}
</div>
<el-date-picker
v-model="value2"
type="datetimerange"
range-separator="至"
value-format="yyyy-MM-dd HH:mm:ss"
start-placeholder="开始日期"
end-placeholder="结束日期">
</el-date-picker>
</div>
<div id="ctct" style="width: 100%; height: 315px;background: linear-gradient( 360deg, #F8F0E7 0%, #FFFFFF 100%); "></div>
</div>
</div>
</template>
<script>
import echarts from "echarts";
import {selectStoreAmount, storeAmountIndex, storeTotalIndex} from "@/api/indexBanner";
import {getListApi} from "@/api/setting/hardware";
import {selectChildByDeptId} from "@/api/system/Site/site";
import {parseTime} from "@/utils/fuint";
import {getBannerListApi} from "@/api/sys/banner";
import {getNotificationlogList} from "@/api/sys/sysNotificationlog";
export default {
props:["accountId"],
data(){
return{
form: {},
timeList:[
"今日",
"近一周",
"近一月",
"近一年",
],
options: [{
value: '选项1',
label: '黄金糕'
}, {
value: '选项2',
label: '双皮奶'
}, {
value: '选项3',
label: '蚵仔煎'
}, {
value: '选项4',
label: '龙须面'
}, {
value: '选项5',
label: '北京烤鸭'
}],
value: '',
value1: [],
value2: [],
imagePath: process.env.VUE_APP_SERVER_URL,
queryParams:{},
//
storeTotal:{},
//
storeAmount:{},
// banner
bannerList:{},
storeList:[],
hardwareList:[],
noticeList:[]
}
},
created() {
let nowDate = new Date();
let oneWeekAgo = new Date(nowDate.getTime() - 6 * 24 * 60 * 60 * 1000)
this.value1 = [parseTime(oneWeekAgo),parseTime(nowDate)]
this.getStoreTotal()
this.selectChildByDeptIdApi()
this.getStoreAmount()
this.selectBannerList()
let start = new Date();
start.setHours(0)
start.setMinutes(0)
start.setSeconds(0)
start.setMilliseconds(0)
this.value2 = [start,new Date()];
this.getStoreList()
this.getHardwareList()
this.getNoticeList()
},
mounted() {
// this.initChart()
},
methods:{
getNoticeList(){
getNotificationlogList({pageNo: 1, pageSize: 4,sentTo:this.accountId}).then(res => {
this.noticeList = res.data.records
})
},
getHardwareList(){
getListApi({page: 1, pageSize: 3,status:'1'}).then(res=>{
this.hardwareList = res.data.records;
this.hardwareList.forEach(item => {
if (item.image.includes(",")){
item.image = item.image.split(",")[0]
}
})
})
},
getStoreList(){
selectStoreAmount(this.addDateRange({},this.value2)).then(res => {
this.storeList = res.data
this.initChart()
})
},
//
chooseDept(){
this.options.forEach(item => {
if (item.deptId == this.value){
this.queryParams.ancestors = item.ancestors
}
})
this.getStoreAmount()
},
selectBannerList(){
let queryParams = {
pageNo:1,
pageSize:10,
system_position:"系统首页",
bannerStatus:true
}
getBannerListApi(queryParams).then(res=>{
this.bannerList = res.data.records
})
},
//
selectChildByDeptIdApi() {
selectChildByDeptId().then(res => {
this.options = res.data
})
},
getStoreTotal(){
storeTotalIndex().then(res => {
this.storeTotal = res.data
})
},
getStoreAmount(){
storeAmountIndex(this.addDateRange(this.queryParams,this.value1)).then(res => {
this.storeAmount = res.data
this.initChart()
})
},
countPercentage(upNum,downNum){
let percentage = 0;
percentage = (upNum / downNum)*100
return percentage.toFixed(2)
},
initChart() {
const chart = echarts.init(document.getElementById('ccc'))
const chart1 = echarts.init(document.getElementById('cccc'))
const chart2= echarts.init(document.getElementById('ccct'))
const chart3= echarts.init(document.getElementById('ctct'))
let dataList = []
let allTotal = 0
if (this.storeAmount.oilNameList) {
this.storeAmount.oilNameList.forEach(item => {
allTotal += item.countNum
})
this.storeAmount.oilNameList.forEach(item => {
let data = {value: 0, name: ""}
data.value = this.countPercentage(item.countNum, allTotal);
data.name = item.oilName + item.oilType + "占比"
dataList.push(data)
})
}
let storeNameList = []
let oilAmountList = []
let noOilAmountList = []
let rechargeBalanceList = []
let consumeBalanceList = []
let userBalanceList = []
if (this.storeList.length>0) {
this.storeList.forEach(item => {
storeNameList.push(item.storeName)
oilAmountList.push(item.oilAmount)
noOilAmountList.push(item.noOilAmount)
rechargeBalanceList.push(item.userRechargeBalance)
consumeBalanceList.push(item.userConsumeBalance)
userBalanceList.push(item.userBalance)
})
}
const option = {
color: [
'#b7f1e2',
'#fc7150',
'#fea500',
'#5facfe',
],
tooltip: {
trigger: 'item'
},
series: [
{
name: 'Access From',
type: 'pie',
roseType: 'area',
radius: [5, '80%'],
// data: [
// { value: 36, name: '#98' },
// { value: 42, name: '0#' },
// { value: 40, name: '#95' },
// { value: 38, name: '#92' },
//
//
// ],
data: dataList,
emphasis: {
itemStyle: {
shadowBlur: 10,
borderRadius: 8,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
};
const option1 = {
color: [
'#3B6ADE',
'#409eff',
],
tooltip: {
trigger: 'item'
},
series: [
{
name: 'Access From',
type: 'pie',
radius: '80%',
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: "非油品交易占比" },
],
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
};
const option2 = {
color: [
'#46c2c4',
'#6e4dd8',
'#214790',
'#d55f5f',
],
tooltip: {
trigger: 'item'
},
series: [
{
name: 'Access From',
type: 'pie',
radius: [50, '80%'],
data: [
// { value: 28, name: '' },
// { 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: '便利店交易占比' },
],
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
};
const option3 = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
crossStyle: {
color: '#999'
}
}
},
legend: {
data: ['Evaporation','油品交易额','非油品交易额', '会员充值金额','会员消费金额', '会员余额']
},
xAxis: [
{
type: 'category',
// data: ['广1', '广2', '广3', '广4', '广5', '广6', '广7'],
data: storeNameList,
axisPointer: {
type: 'shadow'
}
}
],
yAxis: [
{
type: 'value',
name: '金额(元)',
// min: 0,
// max: 10000,
// interval: 2000,
axisLabel: {
formatter: '{value}'
}
}
// {
// type: 'value',
// name: '',
// min: 0,
// max: 25,
// interval: 5,
// axisLabel: {
// formatter: '{value} '
// }
// }
],
series: [
{
name: '油品交易额',
color: '#FF9655',
type: 'bar',
tooltip: {
valueFormatter: function (value) {
return value;
}
},
barWidth: 13,
itemStyle: {
normal: {
barBorderRadius: [50, 50, 0, 0]
}
},
barGap: '60%',
// data: [
// 2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3
// ]
data: oilAmountList
},
{
name: '非油品交易额',
color: '#55F3FF',
type: 'bar',
tooltip: {
valueFormatter: function (value) {
return value;
}
},
barWidth: 13,
itemStyle: {
normal: {
barBorderRadius: [50, 50, 0, 0]
}
},
// data: [
// 2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3
// ]
data: noOilAmountList
},
{
name: '会员充值金额',
color: '#0DC291',
type: 'bar',
tooltip: {
valueFormatter: function (value) {
return value;
}
},
barWidth: 13,
itemStyle: {
normal: {
barBorderRadius: [50, 50, 0, 0]
}
},
// data: [
// 2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3
// ]
data: rechargeBalanceList
},
{
name: '会员消费金额',
color: '#409EFF',
type: 'bar',
tooltip: {
valueFormatter: function (value) {
return value;
}
},
barWidth: 13,
itemStyle: {
normal: {
barBorderRadius: [50, 50, 0, 0]
}
},
// data: [
// 2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3
// ]
data: consumeBalanceList
},
{
name: '会员余额',
color: '#D55F5F',
type: 'bar',
tooltip: {
valueFormatter: function (value) {
return value;
}
},
barWidth: 13,
itemStyle: {
normal: {
barBorderRadius: [50, 50, 0, 0]
}
},
// data: [
// 2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3
// ]
data: userBalanceList
}
],
grid: {
left: '3%',
right: '3%',
bottom: '3%',
containLabel: true
}
};
chart.setOption(option)
chart1.setOption(option1)
chart2.setOption(option2)
chart3.setOption(option3)
}
}
}
</script>
<style scoped lang="scss">
.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{
width: 73%;
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{
width: 73%;
box-sizing: border-box;
padding: 15px;
border-radius: 8px;
background: #fff;
border: 1px solid #FFFFFF;
height: 380px;
}
.right-box{
width: 25%;
border-radius: 8px;
background: #fff;
border: 1px solid #FFFFFF;
height: 192px;
box-sizing: border-box;
padding: 15px;
}
.right-box-t{
width: 25%;
border-radius: 8px;
background: #fff;
border: 1px solid #FFFFFF;
height: 380px;
box-sizing: border-box;
padding: 15px;
overflow: auto;
}
.san-box{
width: 24%;
height: 120px;
box-sizing: border-box;
border-radius: 8px;
background: #409eff;
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;
text-align: center;
}
.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;
}
.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;
}
.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;
background: #fff;
box-sizing: border-box;
padding: 20px;
margin-top: 20px;
}
.anniu-h{
width: 80px;
height: 26px;
background: #FAFAFA;
border-radius: 4px 4px 4px 4px;
border: 1px solid #DDDDDD;
display: flex;
align-items: center;
justify-content: center;
color: #777777;
margin-right: 20px;
}
.anniu-act{
background: #FF9655 !important;
border: 1px solid #FF9655 !important;
color: #fff;
}
.la-left{
width: 70%;
background: #fff;
border-radius: 10px;
}
.la-right{
height: 25%;
background: #fff;
border-radius: 10px;
}
</style>

View File

@ -55,7 +55,6 @@ public class ActivePriceController extends BaseController {
public ResponseObject selectOne(@PathVariable Integer id) {
return getSuccessResult(activePriceService.getActPriceById(id));
}
/**
* 新增营销活动与更新调用同一个接口为方便从Controller层控制后端权限分开写
*