1030 lines
28 KiB
Vue
1030 lines
28 KiB
Vue
<template>
|
|
<div class="home-index">
|
|
<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.allAmount || 0 }}</div>
|
|
<div class="r-size">总交易金额（元）</div>
|
|
</div>
|
|
<div class="san-box" style="background: #fc6464">
|
|
<div class="r-title">{{ storeTotal.allNum || 0 }}</div>
|
|
<div class="r-size">总交易笔数</div>
|
|
</div>
|
|
<div class="san-box" style="background: #fcb12c">
|
|
<div class="r-title">{{ storeTotal.unitPrice || 0 }}</div>
|
|
<div class="r-size">笔均单价（元/单）</div>
|
|
</div>
|
|
<div class="san-box" style="background: #5bc557;">
|
|
<div class="r-title">{{ storeTotal.userBalance || 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;cursor: pointer; display: flex;align-items: center" @click="goList()" >更多 <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="结束日期"
|
|
@blur="getStoreAmount">
|
|
</el-date-picker>
|
|
</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.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>
|
|
<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>
|
|
<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>
|
|
<div class="num-size">{{ storeAmount.pointMallAmount || 0 }}/{{ storeAmount.pointMallNum || 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="left-box-t">
|
|
<div>数据展示</div>
|
|
</div>
|
|
<div class="right-box-t">
|
|
<div style="font-size: 16px;font-weight: bold">员工排行</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>
|
|
<div class="hang-box" v-for="(item,index) in employeList" :key="index">
|
|
<div style="width: 10%">{{index +1}}</div>
|
|
<div>{{ item.realName }}</div>
|
|
<div style="width: 25%">{{item.cardSum}}</div>
|
|
<div style="width: 25%">{{item.oilSum}}</div>
|
|
<div>{{item.totalSum}}</div>
|
|
</div>
|
|
</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";
|
|
import {employeeSalesApi} from "@/api/indexStatistics";
|
|
import {getDataBoard, getTotalAmount} from "@/api/allOrder";
|
|
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:[],
|
|
employeList:[],
|
|
}
|
|
},
|
|
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()
|
|
this.getEmployeList()
|
|
},
|
|
mounted() {
|
|
// this.initChart()
|
|
},
|
|
methods:{
|
|
goList(){
|
|
this.$router.push('/notificationList/index')
|
|
},
|
|
// 获取员工排行信息
|
|
getEmployeList() {
|
|
this.employeLoading = true
|
|
employeeSalesApi().then(res=>{
|
|
if(res.code == 200) {
|
|
if (res.data.length >=10) {
|
|
this.employeList = res.data.slice(0, 10);
|
|
} else {
|
|
this.employeList = res.data
|
|
}
|
|
this.employeLoading = false
|
|
}
|
|
|
|
|
|
})
|
|
},
|
|
getNoticeList(){
|
|
getNotificationlogList({pageNo: 1, pageSize: 4}).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()
|
|
},
|
|
// banner图
|
|
selectBannerList(){
|
|
let queryParams = {
|
|
pageNo:1,
|
|
pageSize:10,
|
|
systemPosition:"首页",
|
|
bannerStatus:true
|
|
}
|
|
getBannerListApi(queryParams).then(res=>{
|
|
this.bannerList = res.data.records
|
|
})
|
|
},
|
|
// 查询
|
|
selectChildByDeptIdApi() {
|
|
selectChildByDeptId().then(res => {
|
|
this.options = res.data
|
|
})
|
|
},
|
|
// 核心数据
|
|
getStoreTotal(){
|
|
getTotalAmount().then(res => {
|
|
this.storeTotal = res.data
|
|
})
|
|
},
|
|
getStoreAmount(){
|
|
getDataBoard(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'))
|
|
const chart4= echarts.init(document.getElementById('cccf'))
|
|
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',
|
|
'#fe8c4a',
|
|
],
|
|
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: '#fe8c4a',
|
|
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
|
|
}
|
|
};
|
|
const option4 = {
|
|
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: '#fe8c4a',
|
|
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)
|
|
chart4.setOption(option4)
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
|
|
.app-container{
|
|
width: 100%;
|
|
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;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
margin-top: 15px;
|
|
}
|
|
.left-box{
|
|
width: 74%;
|
|
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: 74%;
|
|
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;
|
|
scrollbar-width: none;
|
|
}
|
|
.san-box{
|
|
width: 24%;
|
|
height: 120px;
|
|
box-sizing: border-box;
|
|
border-radius: 8px;
|
|
background: #fe8c4a;
|
|
margin: 15px 0px;
|
|
margin-right: 15px;
|
|
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;
|
|
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: 220px;
|
|
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: 73%;
|
|
background: #fff;
|
|
border-radius: 10px;
|
|
}
|
|
.la-right{
|
|
height: 25%;
|
|
background: #fff;
|
|
border-radius: 10px;
|
|
}
|
|
.hui-box{
|
|
background: #F4F5F9;
|
|
border-radius: 8px;
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
padding: 10px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
margin: 10px auto;
|
|
div{
|
|
width: 20%;
|
|
text-align: center;
|
|
}
|
|
}
|
|
.hang-box{
|
|
border-radius: 8px;
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
padding: 10px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
margin: 10px auto;
|
|
div{
|
|
width: 20%;
|
|
text-align: center;
|
|
}
|
|
}
|
|
.home-index{
|
|
|
|
}
|
|
</style>
|