1278 lines
38 KiB
Vue
1278 lines
38 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="imagePath+item.productImage" alt="">
|
||
</div>
|
||
</el-carousel-item>
|
||
</el-carousel>
|
||
<div class="b-bs">
|
||
<div class="left-box">
|
||
<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>
|
||
<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" style="margin-right: 15px">数据看板</div>
|
||
<el-dropdown placement="bottom-start " @command="sjkbStoreAmount">
|
||
<div class="h-anniu" :class="{'q-anniu' : dataTimeShow == false}" @click="dataTimeShow = false ">{{sjkbTitle}} <i
|
||
class="el-icon-arrow-down el-icon--right"></i></div>
|
||
<el-dropdown-menu slot="dropdown" >
|
||
<el-dropdown-item v-for="(item,index) in amountList" :key="index" :command="item">{{item}} </el-dropdown-item>
|
||
</el-dropdown-menu>
|
||
</el-dropdown>
|
||
<div class="h-anniu" :class="{'q-anniu' : dataTimeShow == true}" @click="dataTimeShow = true"> 自定义
|
||
</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 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 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 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 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 style="color: #333">积分商城销售金额（元）/兑换笔数</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>
|
||
<el-popover
|
||
placement="top-start"
|
||
title="联系人：某某某"
|
||
width="200"
|
||
trigger="hover"
|
||
content="联系电话：1352415811">
|
||
<img slot="reference" style="width: 28px; height: 28px " src="../assets/images/telindex.png">
|
||
</el-popover>
|
||
</div>
|
||
<div style="height: 90%;overflow: auto;scrollbar-width: none;">
|
||
<div class="d-s" style="margin: 30px 0px" v-for="(item,index) in hardwareList" :key="index">
|
||
<div class="r-img">
|
||
<img :src="imagePath + item.image" style="width: 84px;height: 70px">
|
||
</div>
|
||
<div style="font-size: 14px">{{ item.name }}</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
<div class="b-bs">
|
||
<div class="left-box-t">
|
||
<div class="d-s" style="margin-bottom: 10px">
|
||
<div class="h-tt" style="margin-right: 15px">油品交易分析</div>
|
||
<el-dropdown placement="bottom-start" @command="editShow">
|
||
<div class="h-anniu" :class="{'q-anniu' : showTimeShow == false}" @click="showTimeShow = false ">{{ypjyTitle}} <i
|
||
class="el-icon-arrow-down el-icon--right"></i></div>
|
||
<el-dropdown-menu slot="dropdown">
|
||
<!-- <el-dropdown-item command="近一周" index="2">近一周</el-dropdown-item>-->
|
||
<!-- <el-dropdown-item command="近一月" index="2">本月</el-dropdown-item>-->
|
||
<!-- <el-dropdown-item command="近一年" index="2">本季度</el-dropdown-item>-->
|
||
<!-- <el-dropdown-item command="近一年" index="2">本年</el-dropdown-item>-->
|
||
<el-dropdown-item v-for="(item,index) in amountList" :key="index" :command="item">{{item}} </el-dropdown-item>
|
||
</el-dropdown-menu>
|
||
</el-dropdown>
|
||
<div class="h-anniu" :class="{'q-anniu' : showTimeShow == true}" @click="showTimeShow = true"> 自定义
|
||
</div>
|
||
<div style="margin-right: 40px">
|
||
<el-date-picker
|
||
v-model="showValue"
|
||
type="daterange"
|
||
value-format="yyyy-MM-dd HH:mm:ss"
|
||
range-separator="至"
|
||
start-placeholder="开始日期"
|
||
end-placeholder="结束日期"
|
||
@blur="getDataShow">
|
||
</el-date-picker>
|
||
</div>
|
||
</div>
|
||
<div id="cccf"
|
||
style="width: 100%; height: 315px;background: linear-gradient( 360deg, #F8F0E7 0%, #FFFFFF 100%); "></div>
|
||
</div>
|
||
<div class="right-box-t">
|
||
<div style="font-size: 16px;font-weight: bold"><span style="margin-right: 15px">员工排行</span>
|
||
<el-dropdown placement="bottom-start" @command="editColor">
|
||
<div class="h-anniu" :class="{'q-anniu' : timeShow == false}" @click="timeShow = false ">{{ygphTitle}} <i
|
||
class="el-icon-arrow-down el-icon--right"></i></div>
|
||
<el-dropdown-menu slot="dropdown">
|
||
<el-dropdown-item v-for="(item,index) in amountList" :key="index" :command="item">{{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>
|
||
<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%" v-if="index == 0">
|
||
<img src="../assets/images/one_icon.png" style="width: 22px;height: 22px">
|
||
|
||
|
||
</div>
|
||
<div style="width: 10%" v-if="index == 1">
|
||
<img src="../assets/images/two_icon.png" style="width: 22px;height: 22px">
|
||
</div>
|
||
<div style="width: 10%" v-if="index == 2">
|
||
<img src="../assets/images/three_icon.png" style="width: 22px;height: 22px">
|
||
</div>
|
||
<div style="width: 10%" v-if="index>2">{{ 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>
|
||
<div class="bottom_">
|
||
<div class="d-s">
|
||
<div class="h-tt" style="margin-right: 15px">数据统计</div>
|
||
<el-dropdown placement="bottom-start" @command="editCount">
|
||
<div class="h-anniu" :class="{'q-anniu' : countTimeShow == false}" @click="countTimeShow = false ">{{sjtjTitle}} <i
|
||
class="el-icon-arrow-down el-icon--right"></i></div>
|
||
<el-dropdown-menu slot="dropdown">
|
||
<!-- <el-dropdown-item command="近一周" index="1">近一周</el-dropdown-item>-->
|
||
<!-- <el-dropdown-item command="近一月" index="1">本月</el-dropdown-item>-->
|
||
<!-- <el-dropdown-item command="近一年" index="1">本季度</el-dropdown-item>-->
|
||
<!-- <el-dropdown-item command="近一年" index="1">本年</el-dropdown-item>-->
|
||
<el-dropdown-item v-for="(item,index) in amountList" :key="index" :command="item">{{item}} </el-dropdown-item>
|
||
|
||
</el-dropdown-menu>
|
||
</el-dropdown>
|
||
<div class="h-anniu" :class="{'q-anniu' : countTimeShow == true}" @click="countTimeShow = true"> 自定义
|
||
</div>
|
||
<div style="margin-right: 40px">
|
||
<el-date-picker
|
||
v-model="countValue"
|
||
type="daterange"
|
||
value-format="yyyy-MM-dd HH:mm:ss"
|
||
range-separator="至"
|
||
start-placeholder="开始日期"
|
||
end-placeholder="结束日期"
|
||
@blur="getDataCount">
|
||
</el-date-picker>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="ctct"
|
||
style="width: 100%; height: 315px;background: linear-gradient( 360deg, #F8F0E7 0%, #FFFFFF 100%); "></div>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import * as 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 {getDataAnalysis, getDataBoard, getDataCount, getDataShow, getTotalAmount} from "@/api/allOrder";
|
||
|
||
export default {
|
||
|
||
props: ["accountId"],
|
||
data() {
|
||
return {
|
||
amountList:[
|
||
// "今日" ,
|
||
// "昨日" ,
|
||
"近一周" ,
|
||
"本月" ,
|
||
"本季度" ,
|
||
"本年"
|
||
|
||
],
|
||
sjkbTitle: "近一周",
|
||
ypjyTitle: "近一周",
|
||
ygphTitle: "近一周",
|
||
sjtjTitle: "近一周",
|
||
xShow: false,
|
||
timeShow: false,
|
||
dataTimeShow : false,
|
||
showTimeShow: false,
|
||
countTimeShow: false,
|
||
form: {},
|
||
timeList: [
|
||
"今日",
|
||
"近一周",
|
||
"近一月",
|
||
"近一年",
|
||
],
|
||
|
||
options: [{
|
||
value: '选项1',
|
||
label: '黄金糕'
|
||
}, {
|
||
value: '选项2',
|
||
label: '双皮奶'
|
||
}, {
|
||
value: '选项3',
|
||
label: '蚵仔煎'
|
||
}, {
|
||
value: '选项4',
|
||
label: '龙须面'
|
||
}, {
|
||
value: '选项5',
|
||
label: '北京烤鸭'
|
||
}],
|
||
value: '',
|
||
value1: [],
|
||
showValue:[],
|
||
countValue:[],
|
||
value2: [],
|
||
imagePath: process.env.VUE_APP_SERVER_URL,
|
||
queryParams: {},
|
||
// 店铺数量
|
||
storeTotal: {},
|
||
// 店铺金额
|
||
storeAmount: {},
|
||
// banner图列表
|
||
bannerList: {},
|
||
storeList: [],
|
||
hardwareList: [],
|
||
noticeList: [],
|
||
employeList: [],
|
||
dataAnalysisOilNumberList: [],
|
||
dataAnalysisAllList: [],
|
||
dataAnalysisIfOilList: [],
|
||
//数据统计
|
||
dataCount: {},
|
||
//数据展示
|
||
dataShows: {},
|
||
}
|
||
},
|
||
created() {
|
||
let nowDate = new Date();
|
||
let oneWeekAgo = new Date(nowDate.getTime() - 6 * 24 * 60 * 60 * 1000)
|
||
this.value1 = [parseTime(oneWeekAgo), parseTime(nowDate)]
|
||
this.countValue = [parseTime(oneWeekAgo), parseTime(nowDate)]
|
||
this.showValue = [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 = [parseTime(oneWeekAgo), parseTime(nowDate)]
|
||
this.getStoreList()
|
||
this.getHardwareList()
|
||
this.getNoticeList()
|
||
this.getEmployeList()
|
||
this.getDataAnalysis()
|
||
this.getDataShow()
|
||
this.getDataCount()
|
||
},
|
||
mounted() {
|
||
setTimeout(() => {
|
||
this.initChart();
|
||
}, 2000);
|
||
|
||
},
|
||
methods: {
|
||
sjkbStoreAmount(e){
|
||
console.log(e)
|
||
this.sjkbTitle = e
|
||
let command = e
|
||
if (command=='今日'){
|
||
let start = new Date();
|
||
start.setHours(0)
|
||
start.setMinutes(0)
|
||
start.setSeconds(0)
|
||
start.setMilliseconds(0)
|
||
this.value1 = [parseTime(new Date()),parseTime(new Date())]
|
||
}else if (command=='昨日'){
|
||
let nowDate = new Date();
|
||
let oneWeekAgo = new Date(nowDate.getTime() - 1 * 24 * 60 * 60 * 1000)
|
||
this.value1 = [parseTime(oneWeekAgo),parseTime(oneWeekAgo)]
|
||
} else if (command=='近一周'){
|
||
let nowDate = new Date();
|
||
let oneWeekAgo = new Date(nowDate.getTime() - 6 * 24 * 60 * 60 * 1000)
|
||
this.value1 = [parseTime(oneWeekAgo),parseTime(nowDate)]
|
||
} else if (command=='本月'){
|
||
const [startTime, endTime] = this.getMonthStartAndToday();
|
||
this.value1 = [parseTime(startTime),parseTime(endTime)]
|
||
}else if (command=='本季度'){
|
||
const [startTime, endTime] = this.getQuarterStartAndEnd();
|
||
this.value1 = [parseTime(startTime), parseTime(endTime)];
|
||
} else if (command=='本年'){
|
||
const [startTime, endTime] = this.getYearStartAndEnd();
|
||
this.value1 = [parseTime(startTime),parseTime(endTime)]
|
||
}else if (command=='自定义'){
|
||
this.disabled = false
|
||
}
|
||
this.getStoreAmount()
|
||
},
|
||
goList() {
|
||
this.$router.push('/notificationList/index')
|
||
},
|
||
editShow(e){
|
||
this.disabled = true
|
||
console.log(e)
|
||
this.ypjyTitle = e
|
||
let command = e
|
||
if (command=='今日'){
|
||
let start = new Date();
|
||
start.setHours(0)
|
||
start.setMinutes(0)
|
||
start.setSeconds(0)
|
||
start.setMilliseconds(0)
|
||
this.showValue = [parseTime(new Date()),parseTime(new Date())]
|
||
}else if (command=='昨日'){
|
||
let nowDate = new Date();
|
||
let oneWeekAgo = new Date(nowDate.getTime() - 1 * 24 * 60 * 60 * 1000)
|
||
this.showValue = [parseTime(oneWeekAgo),parseTime(oneWeekAgo)]
|
||
} else if (command=='近一周'){
|
||
let nowDate = new Date();
|
||
let oneWeekAgo = new Date(nowDate.getTime() - 6 * 24 * 60 * 60 * 1000)
|
||
this.showValue = [parseTime(oneWeekAgo),parseTime(nowDate)]
|
||
} else if (command=='本月'){
|
||
let nowDate = new Date();
|
||
let oneWeekAgo = new Date(nowDate.getTime() - 30 * 24 * 60 * 60 * 1000)
|
||
const [startTime, endTime] = this.getMonthStartAndToday();
|
||
this.showValue = [parseTime(startTime),parseTime(endTime)]
|
||
}else if (command=='本季度'){
|
||
const [startTime, endTime] = this.getQuarterStartAndEnd();
|
||
this.showValue = [parseTime(startTime), parseTime(endTime)];
|
||
} else if (command=='本年'){
|
||
const [startTime, endTime] = this.getYearStartAndEnd();
|
||
this.showValue = [parseTime(startTime),parseTime(endTime)]
|
||
}else if (command=='自定义'){
|
||
this.disabled = false
|
||
}
|
||
this.getDataShow()
|
||
},
|
||
editCount(e){
|
||
this.disabled = true
|
||
this.sjtjTitle = e
|
||
console.log("e",e)
|
||
let command = e
|
||
if (command=='今日'){
|
||
let start = new Date();
|
||
start.setHours(0)
|
||
start.setMinutes(0)
|
||
start.setSeconds(0)
|
||
start.setMilliseconds(0)
|
||
// this.countValue = [start,new Date()]
|
||
this.countValue = [parseTime(new Date()),parseTime(new Date())]
|
||
}else if (command=='昨日'){
|
||
let nowDate = new Date();
|
||
let oneWeekAgo = new Date(nowDate.getTime() - 1 * 24 * 60 * 60 * 1000)
|
||
this.countValue = [parseTime(oneWeekAgo),parseTime(oneWeekAgo)]
|
||
} else if (command=='近一周'){
|
||
let nowDate = new Date();
|
||
let oneWeekAgo = new Date(nowDate.getTime() - 6 * 24 * 60 * 60 * 1000)
|
||
this.countValue = [parseTime(oneWeekAgo),parseTime(nowDate)]
|
||
} else if (command=='本月'){
|
||
let nowDate = new Date();
|
||
let oneWeekAgo = new Date(nowDate.getTime() - 30 * 24 * 60 * 60 * 1000)
|
||
const [startTime, endTime] = this.getMonthStartAndToday();
|
||
this.countValue = [parseTime(startTime),parseTime(endTime)]
|
||
}else if (command=='本季度'){
|
||
const [startTime, endTime] = this.getQuarterStartAndEnd();
|
||
this.countValue = [parseTime(startTime), parseTime(endTime)];
|
||
} else if (command=='本年'){
|
||
const [startTime, endTime] = this.getYearStartAndEnd();
|
||
this.countValue = [parseTime(startTime),parseTime(endTime)]
|
||
}else if (command=='自定义'){
|
||
this.disabled = false
|
||
}
|
||
this.getDataCount()
|
||
},
|
||
editColor(command){
|
||
this.disabled = true
|
||
this.ygphTitle = command
|
||
if (command=='今日'){
|
||
let start = new Date();
|
||
start.setHours(0)
|
||
start.setMinutes(0)
|
||
start.setSeconds(0)
|
||
start.setMilliseconds(0)
|
||
this.value2 = [start,new Date()]
|
||
} else if (command=='近一周'){
|
||
let nowDate = new Date();
|
||
let oneWeekAgo = new Date(nowDate.getTime() - 6 * 24 * 60 * 60 * 1000)
|
||
this.value2 = [parseTime(oneWeekAgo),parseTime(nowDate)]
|
||
} else if (command=='本月'){
|
||
let nowDate = new Date();
|
||
let oneWeekAgo = new Date(nowDate.getTime() - 30 * 24 * 60 * 60 * 1000)
|
||
const [startTime, endTime] = this.getMonthStartAndToday();
|
||
this.value2 = [parseTime(startTime),parseTime(endTime)]
|
||
}else if (command=='本季度'){
|
||
const [startTime, endTime] = this.getQuarterStartAndEnd();
|
||
this.value2 = [parseTime(startTime), parseTime(endTime)];
|
||
} else if (command=='本年'){
|
||
const [startTime, endTime] = this.getYearStartAndEnd();
|
||
this.value2 = [parseTime(startTime),parseTime(endTime)]
|
||
}else if (command=='自定义'){
|
||
this.disabled = false
|
||
}
|
||
this.getEmployeList()
|
||
},
|
||
getMonthStartAndToday() {
|
||
const now = new Date();
|
||
const year = now.getFullYear();
|
||
const month = now.getMonth();
|
||
|
||
// 获取当前月的第一天
|
||
const monthStart = new Date(year, month, 1);
|
||
|
||
// 获取当前月的最后一天
|
||
const monthEnd = new Date(year, month + 1, 0);
|
||
|
||
// 格式化输出
|
||
const format = (date) => {
|
||
const year = date.getFullYear();
|
||
const month = ('0' + (date.getMonth() + 1)).slice(-2);
|
||
const day = ('0' + date.getDate()).slice(-2);
|
||
return `${year}-${month}-${day}`;
|
||
};
|
||
|
||
const startTime = format(monthStart);
|
||
const endTime = format(monthEnd);
|
||
|
||
return [startTime, endTime];
|
||
},
|
||
getQuarterStartAndEnd() {
|
||
const now = new Date();
|
||
const year = now.getFullYear();
|
||
const month = now.getMonth();
|
||
|
||
// 计算当前季度的起始月份
|
||
const quarterStartMonth = Math.floor(month / 3) * 3;
|
||
|
||
// 获取当前季度的第一天
|
||
const quarterStart = new Date(year, quarterStartMonth, 1);
|
||
|
||
// 获取当前季度的最后一天
|
||
const quarterEnd = new Date(year, quarterStartMonth + 3, 0);
|
||
|
||
// 格式化输出
|
||
const format = (date) => {
|
||
const year = date.getFullYear();
|
||
const month = ('0' + (date.getMonth() + 1)).slice(-2);
|
||
const day = ('0' + date.getDate()).slice(-2);
|
||
return `${year}-${month}-${day}`;
|
||
};
|
||
|
||
const startTime = format(quarterStart);
|
||
const endTime = format(quarterEnd);
|
||
|
||
return [startTime, endTime];
|
||
},
|
||
getYearStartAndEnd() {
|
||
const now = new Date();
|
||
const year = now.getFullYear();
|
||
|
||
// 获取当前年的第一天
|
||
const yearStart = new Date(year, 0, 1);
|
||
|
||
// 获取当前年的最后一天
|
||
const yearEnd = new Date(year, 11, 31);
|
||
|
||
// 格式化输出
|
||
const format = (date) => {
|
||
const year = date.getFullYear();
|
||
const month = ('0' + (date.getMonth() + 1)).slice(-2);
|
||
const day = ('0' + date.getDate()).slice(-2);
|
||
return `${year}-${month}-${day}`;
|
||
};
|
||
|
||
const startTime = format(yearStart);
|
||
const endTime = format(yearEnd);
|
||
|
||
return [startTime, endTime];
|
||
},
|
||
// 获取员工排行信息
|
||
getEmployeList() {
|
||
this.employeLoading = true
|
||
let data = {
|
||
startTime: this.value2[0],
|
||
endTime: this.value2[1]
|
||
}
|
||
employeeSalesApi(data).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
|
||
}
|
||
})
|
||
},
|
||
// 获取数据分析信息
|
||
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 data = {
|
||
"startTime": this.showValue[0].split(' ')[0],
|
||
"endTime": this.showValue[1].split(' ')[0]
|
||
}
|
||
getDataShow(data).then(res => {
|
||
// console.log('首页数据展示', res.data)
|
||
this.dataShows = res.data
|
||
this.initChart()
|
||
})
|
||
},
|
||
//油站首页数据统计
|
||
getDataCount() {
|
||
const data = {
|
||
"startTime": this.countValue[0].split(' ')[0],
|
||
"endTime": this.countValue[1].split(' ')[0]
|
||
}
|
||
getDataCount(data).then(res => {
|
||
// console.log('首页数据统计', res.data)
|
||
if (res.code == 200) {
|
||
this.dataCount = res.data
|
||
this.initChart()
|
||
}
|
||
})
|
||
},
|
||
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 color = ['#FF9655', '#55F3FF', '#0DC291', '#fe8c4a', '#D55F5F'];
|
||
// 首页数据统计
|
||
const times = this.dataCount.oilData.map(item => item.time);
|
||
const count = [];
|
||
let c = ['product', ...this.dataCount.oilNames]
|
||
let countType = []
|
||
count.push(c)
|
||
this.dataCount.oilNames.forEach(item => {
|
||
let type={
|
||
type: 'bar'
|
||
}
|
||
countType.push(type)
|
||
})
|
||
this.dataCount.oilData.forEach(item => {
|
||
let a =[item.time, ...item.money]
|
||
count.push(a)
|
||
})
|
||
|
||
// 首页数据展示
|
||
const showTimes = this.dataShows.oilData.map(item => item.day);
|
||
const showCount = [];
|
||
let cshow = ['product', ...this.dataShows.oilNames]
|
||
showCount.push(cshow)
|
||
let showCountType = []
|
||
console.log("看看执行")
|
||
this.dataShows.oilNames.forEach(item => {
|
||
let type={
|
||
type: 'bar'
|
||
}
|
||
showCountType.push(type)
|
||
})
|
||
console.log(this.dataShows.oilData)
|
||
this.dataShows.oilData.forEach(item => {
|
||
let a =[item.day, ...item.oilPrices]
|
||
showCount.push(a)
|
||
console.log("showCount",a)
|
||
})
|
||
console.log("showCount",showCount)
|
||
console.log("showCountType",showCountType)
|
||
|
||
const option = {
|
||
color: [
|
||
'#b7f1e2',
|
||
'#fc7150',
|
||
'#fea500',
|
||
'#5facfe',
|
||
],
|
||
tooltip: {
|
||
trigger: 'item'
|
||
},
|
||
series: [
|
||
{
|
||
name: '',
|
||
type: 'pie',
|
||
itemStyle: {
|
||
borderRadius:8,
|
||
borderColor:'#fff',
|
||
borderWidth:4
|
||
},
|
||
radius: ['40%', '80%'],
|
||
data: this.dataAnalysisOilNumberList,
|
||
}
|
||
]
|
||
};
|
||
const option1 = {
|
||
color: [
|
||
'#3B6ADE',
|
||
'#fe8c4a',
|
||
],
|
||
tooltip: {
|
||
trigger: 'item'
|
||
},
|
||
|
||
series: [
|
||
{
|
||
name: '',
|
||
type: 'pie',
|
||
radius: '80%',
|
||
// ],
|
||
data: this.dataAnalysisIfOilList,
|
||
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: '',
|
||
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: '便利店交易占比'
|
||
// },
|
||
//
|
||
// ],
|
||
data: this.dataAnalysisAllList,
|
||
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: this.dataCount.oilNames,
|
||
left: 'right'
|
||
},
|
||
xAxis: [
|
||
{
|
||
type: 'category',
|
||
// data: ['中建锦绣广场1站', '中建锦绣广场2站', '中建锦绣广场3站', '中建锦绣广场4站', '中建锦绣广场5站', '中建锦绣广场6站', '中建锦绣广场7站'],
|
||
data: times,
|
||
axisPointer: {
|
||
type: 'shadow'
|
||
}
|
||
}
|
||
],
|
||
yAxis: [
|
||
{
|
||
type: 'value',
|
||
name: '金额(元)',
|
||
// min: 0,
|
||
// max: 10000,
|
||
// interval: 2000,
|
||
axisLabel: {
|
||
formatter: '{value}'
|
||
}
|
||
}
|
||
|
||
],
|
||
dataset: {
|
||
source: count
|
||
},
|
||
|
||
series: countType,
|
||
grid: {
|
||
left: '3%',
|
||
right: '3%',
|
||
bottom: '3%',
|
||
containLabel: true
|
||
}
|
||
};
|
||
const option4 = {
|
||
tooltip: {
|
||
trigger: 'axis',
|
||
axisPointer: {
|
||
type: 'cross',
|
||
crossStyle: {
|
||
color: '#999'
|
||
}
|
||
}
|
||
},
|
||
legend: {
|
||
data: this.dataShows.oilNames,
|
||
left: 'right'
|
||
|
||
},
|
||
xAxis: [
|
||
{
|
||
type: 'category',
|
||
data: showTimes,
|
||
axisPointer: {
|
||
type: 'shadow'
|
||
}
|
||
}
|
||
],
|
||
yAxis: [
|
||
{
|
||
type: 'value',
|
||
name: '金额(元)',
|
||
axisLabel: {
|
||
formatter: '{value}'
|
||
}
|
||
}
|
||
],
|
||
dataset: {
|
||
source: showCount
|
||
},
|
||
series: showCountType,
|
||
grid: {
|
||
left: '3%',
|
||
right: '3%',
|
||
bottom: '5%',
|
||
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;
|
||
|
||
|
||
}
|
||
|
||
.san-box {
|
||
width: 24%;
|
||
height: 100px;
|
||
box-sizing: border-box;
|
||
border-radius: 8px;
|
||
background: #fe8c4a;
|
||
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;
|
||
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: #333;
|
||
margin: 14px auto;
|
||
}
|
||
|
||
.h-tt {
|
||
font-size: 16px;
|
||
color: #333333;
|
||
font-weight: bold;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
.q-anniu {
|
||
width: 80px;
|
||
height: 26px;
|
||
background: #FF9655 !important;
|
||
border-radius: 4px 4px 4px 4px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
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: 24%;
|
||
height: 68px;
|
||
background: #FFFFFF;
|
||
border-radius: 8px;
|
||
border: 1px solid #e1e0e0;
|
||
box-sizing: border-box;
|
||
margin: 0 auto;
|
||
padding: 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;
|
||
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: 5px;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
margin: 0px auto;
|
||
|
||
div {
|
||
width: 20%;
|
||
text-align: center;
|
||
}
|
||
}
|
||
|
||
.home-index {
|
||
|
||
}
|
||
</style>
|