|
@@ -0,0 +1,503 @@
|
|
|
+<template>
|
|
|
+ <view class="dataAnalyse">
|
|
|
+ 这是数据分析
|
|
|
+ <view class="header">
|
|
|
+ <view class="header-warp">
|
|
|
+ <view class="header-left">
|
|
|
+ <view class="uni-list">
|
|
|
+ <view class="uni-list-cell">
|
|
|
+ <view class="uni-list-cell-db">
|
|
|
+ <picker @change="bindPickerChange" :value="index" :range="shopArray" range-key="name">
|
|
|
+ <view class="uni-input" >{{ shopArray[index].name }}</view>
|
|
|
+ </picker>
|
|
|
+ <image src="../../static/images/downicon.png" mode="" class="icon"></image>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="header-bar header-center">数据分析</view>
|
|
|
+ <view class="header-right">
|
|
|
+ <image src="../../static/images/seticon.png" mode="" class="icon" @tap="tosetting"></image>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="tabS">
|
|
|
+ <view class="tab" :class="activeTab==0?'active_Tab':''" @tap="upTab(0)">
|
|
|
+ <picker mode="date" :value="startDate" @change=startChange($event)>
|
|
|
+ <view class="uni-input" >{{startDate}}</view>
|
|
|
+ </picker>
|
|
|
+ <image src="../../static/images/downicon.png" mode="" class="icon"></image>
|
|
|
+ </view>
|
|
|
+ 至
|
|
|
+ <view class="tab" :class="activeTab==1?'active_Tab':''" @tap="upTab(1)">
|
|
|
+ <picker mode="date" :value="endDate" @change=endChange($event)>
|
|
|
+ <view class="uni-input" >{{endDate}}</view>
|
|
|
+ </picker>
|
|
|
+ <image src="../../static/images/downicon.png" mode="" class="icon"></image>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ </view>
|
|
|
+
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="" style="height: 102rpx;"></view>
|
|
|
+ <view class="btnS">
|
|
|
+ <view class="btn" :class="activeBtn==0?'active_Btn':''" @tap="upBtn(0)">
|
|
|
+ 售检分析
|
|
|
+ </view>
|
|
|
+ <view class="btn" :class="activeBtn==1?'active_Btn':''" @tap="upBtn(1)">
|
|
|
+ 用户分析
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="sale_box" v-if="activeBtn==0">
|
|
|
+ <view class="box" v-if="intradayData">
|
|
|
+ <view class="advanceBox">
|
|
|
+ <view class="text">
|
|
|
+ <text>预订人次</text>
|
|
|
+ <text>{{intradayData.ydrc}}</text>
|
|
|
+ </view>
|
|
|
+ <view class="text">
|
|
|
+ <text>销售金额</text>
|
|
|
+ <text>{{intradayData.xsje}}</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="advanceBox">
|
|
|
+ <view class="text">
|
|
|
+ <text>入园人次</text>
|
|
|
+ <text>{{intradayData.ryrc}}</text>
|
|
|
+ </view>
|
|
|
+ <view class="text">
|
|
|
+ <text>核销金额</text>
|
|
|
+ <text>{{intradayData.hxje}}</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="box">
|
|
|
+ <view class="title">
|
|
|
+ 店铺订单量排行榜前(10)
|
|
|
+ </view>
|
|
|
+ <view class="orderBox">
|
|
|
+
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ </view>
|
|
|
+ <view class="user_box" v-else>
|
|
|
+
|
|
|
+ </view>
|
|
|
+ <tabBar :currentIndex="typeNum"></tabBar>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ import uCharts from '../../js_sdk/u-charts/u-charts/u-charts';
|
|
|
+ import moment from '@/common/moment';
|
|
|
+ let _self;
|
|
|
+ let canvaLineA = null;
|
|
|
+ let canvaPie = null;
|
|
|
+ let shopSellLine = null;
|
|
|
+ let shopMoneyLine = null;
|
|
|
+ let getDataBuyTime = null;
|
|
|
+ export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ intradayData:{},
|
|
|
+ uderName: '',
|
|
|
+ typeNum:null,
|
|
|
+ shopID: null,
|
|
|
+ index: 0,
|
|
|
+ activeTab:0,
|
|
|
+ activeBtn:0,
|
|
|
+ shopArray: [{ name: '全部', id: 0 }],
|
|
|
+ loading: true,
|
|
|
+ // 遮罩层
|
|
|
+ isShowMask: false,
|
|
|
+ iconShow: false,
|
|
|
+ masktxt: '',
|
|
|
+ // 商品销售走势
|
|
|
+ shopwidth: '',
|
|
|
+ shopheight: '',
|
|
|
+
|
|
|
+ // 销售金额走势
|
|
|
+ moneywidth: '',
|
|
|
+ moneyheight: '',
|
|
|
+
|
|
|
+ // 未来七天
|
|
|
+ cWidth: '',
|
|
|
+ cHeight: '',
|
|
|
+
|
|
|
+ // 饼图数据
|
|
|
+ bWidth: '',
|
|
|
+ bHeight: '',
|
|
|
+
|
|
|
+ pixelRatio: 1, // 像素比
|
|
|
+ ordernum: '', // 订单号
|
|
|
+
|
|
|
+ orderMessage: {},
|
|
|
+ todayforday: moment(new Date()).format('YYYY-MM-DD HH:mm:ss'),
|
|
|
+ today: moment(new Date()).format('YYYY-MM-DD'),
|
|
|
+ this_day: moment(new Date()).format('YYYY.MM.DD'),
|
|
|
+ startDate:moment(new Date()).format('YYYY-MM-DD'),
|
|
|
+ endDate:moment(new Date()).format('YYYY-MM-DD'),
|
|
|
+ }
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ // this.today = this.todayforday = this.this_day = moment(new Date()).format('YYYY-MM-DD')
|
|
|
+ this.getIntradayData()
|
|
|
+ },
|
|
|
+ onShow() {
|
|
|
+ this.todayforday = moment().format('YYYY-MM-DD HH:mm:ss')
|
|
|
+ _self = this;
|
|
|
+ this.cWidth = uni.upx2px(690); // upx2px 转换为px
|
|
|
+ this.cHeight = uni.upx2px(300);
|
|
|
+ this.bWidth = uni.upx2px(690);
|
|
|
+ this.bHeight = uni.upx2px(500);
|
|
|
+ this.getShopList()
|
|
|
+ getDataBuyTime = setInterval(() => {
|
|
|
+ this.todayforday = moment().format('YYYY-MM-DD HH:mm:ss')
|
|
|
+ this.loading = false;
|
|
|
+ this.getShopList();
|
|
|
+ // this.$mHelper.toast(`自动更新数据${moment().format('h:mm:ss')}`);
|
|
|
+ }, 1011 * 60 * 5);
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ // 选择商铺
|
|
|
+ bindPickerChange(e) {
|
|
|
+ this.loading = true;
|
|
|
+ this.shopID = null;
|
|
|
+ this.index = e.detail.value;
|
|
|
+ this.shopID = this.shopArray[this.index].id;
|
|
|
+ // this.getPendingData();
|
|
|
+ console.log(123,this.shopID)
|
|
|
+ // this.futureDayData();
|
|
|
+ // this.shopSellData();
|
|
|
+ // this.shopSellTrend();
|
|
|
+ // this.shopSellMoneyTrend();
|
|
|
+ this.loading = false;
|
|
|
+ },
|
|
|
+ // 获取店铺列表
|
|
|
+ async getShopList() {
|
|
|
+ this.loading = true
|
|
|
+ await this.$http.get('/homePage/getShopByMerId').then((res) => {
|
|
|
+ if (res.data && res.code === 200) {
|
|
|
+ let newarr = [{ name: '全部', id: 0 }];
|
|
|
+ this.shopArray = newarr.concat(res.data);
|
|
|
+ // this.getPendingData();
|
|
|
+ this.shopSellTrend();
|
|
|
+ this.shopSellMoneyTrend();
|
|
|
+ this.futureDayData();
|
|
|
+ this.shopSellData();
|
|
|
+ this.loading = false
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+
|
|
|
+ // 未来七天
|
|
|
+ async futureDayData() {
|
|
|
+ this.loadingMore3 = true;
|
|
|
+ if (this.shopID === 0) {
|
|
|
+ this.shopID = '';
|
|
|
+ }
|
|
|
+ await this.$http
|
|
|
+ .get('/homePage/getData0', {
|
|
|
+ date: this.todayforday,
|
|
|
+ shopId: this.shopID,
|
|
|
+ })
|
|
|
+ .then(async (res) => {
|
|
|
+ if (res.data) {
|
|
|
+ let LineA = {
|
|
|
+ categories: [],
|
|
|
+ series: [],
|
|
|
+ };
|
|
|
+ res.data.forEach((ele) => {
|
|
|
+ LineA.series.push(ele.num);
|
|
|
+ LineA.categories.push(ele.date.slice(5));
|
|
|
+ });
|
|
|
+ // _self.showLineA('canvasLineA', LineA);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // // 待处理事物
|
|
|
+ // async getPendingData() {
|
|
|
+ // this.loading = true
|
|
|
+ // if (this.shopID === 0) {
|
|
|
+ // this.shopID = '';
|
|
|
+ // }
|
|
|
+ // await this.$http
|
|
|
+ // .get('/homePage/pendingTransaction', {
|
|
|
+ // date: this.todayforday,
|
|
|
+ // shopId: this.shopID,
|
|
|
+ // })
|
|
|
+ // .then(async (res) => {
|
|
|
+ // if (res.data) {
|
|
|
+ // this.pendingData.store = res.data.shopCheck;
|
|
|
+ // this.pendingData.shop = res.data.goodsCheck;
|
|
|
+ // this.pendingData.shelf = res.data.upGoods;
|
|
|
+ // this.pendingData.payorder = res.data.payNum;
|
|
|
+ // this.pendingData.refund = res.data.refundNum;
|
|
|
+ // this.loading = false
|
|
|
+ // }
|
|
|
+ // });
|
|
|
+ // },
|
|
|
+ startChange(e){
|
|
|
+ this.startDate = e.detail.value
|
|
|
+
|
|
|
+ this.getIntradayData()
|
|
|
+ },
|
|
|
+ endChange(e){
|
|
|
+ this.endDate = e.detail.value
|
|
|
+ this.getIntradayData()
|
|
|
+ },
|
|
|
+ // 商品销售占比
|
|
|
+ async shopSellData() {
|
|
|
+ this.loadingMore4 = true;
|
|
|
+ await this.$http
|
|
|
+ .get('/homePage/getData1', {
|
|
|
+ date: this.todayforday,
|
|
|
+ shopId: this.shopID,
|
|
|
+ })
|
|
|
+ .then(async (res) => {
|
|
|
+ let pie = {
|
|
|
+ series: [],
|
|
|
+ };
|
|
|
+ if (res.data.length > 0) {
|
|
|
+ for (let i = 0; i < res.data.length; i++) {
|
|
|
+ let element = res.data[i];
|
|
|
+ pie.series.push({ name: element.name, data: element.value });
|
|
|
+ }
|
|
|
+ // _self.showPie('shopecharts', pie);
|
|
|
+ } else {
|
|
|
+ pie.series = [{ name: '无数据', data: 0 }];
|
|
|
+ // _self.showPie('shopecharts', pie);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // 商品销售数量走势
|
|
|
+ async shopSellTrend() {
|
|
|
+ this.loadingMore1 = true;
|
|
|
+ if (this.shopID === 0) {
|
|
|
+ this.shopI = '';
|
|
|
+ }
|
|
|
+ await this.$http
|
|
|
+ .get('/homePage/getData2', {
|
|
|
+ date: this.todayforday,
|
|
|
+ shopId: this.shopID,
|
|
|
+ })
|
|
|
+ .then(async (res) => {
|
|
|
+ if (res.data) {
|
|
|
+ let shopSellData = {
|
|
|
+ xdata: [],
|
|
|
+ jrdata: [],
|
|
|
+ zrdata: [],
|
|
|
+ };
|
|
|
+
|
|
|
+ res.data.forEach((ele) => {
|
|
|
+ shopSellData.xdata.push(ele.time);
|
|
|
+ shopSellData.jrdata.push(ele.jr);
|
|
|
+ shopSellData.zrdata.push(ele.zr);
|
|
|
+ });
|
|
|
+ // _self.shopSellEcharts('shopsellEcharts', shopSellData);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // 商品销售金额走势
|
|
|
+ async shopSellMoneyTrend() {
|
|
|
+ this.loadingMore2 = true;
|
|
|
+ if (this.shopID === 0) {
|
|
|
+ this.shopI = '';
|
|
|
+ }
|
|
|
+ await this.$http
|
|
|
+ .get('/homePage/getData3', {
|
|
|
+ date: this.todayforday,
|
|
|
+ shopId: this.shopID,
|
|
|
+ })
|
|
|
+ .then(async (res) => {
|
|
|
+ if (res.data) {
|
|
|
+ let shopMoney = {
|
|
|
+ xdata: [],
|
|
|
+ jrdata: [],
|
|
|
+ zrdata: [],
|
|
|
+ };
|
|
|
+
|
|
|
+ res.data.forEach((ele) => {
|
|
|
+ shopMoney.xdata.push(ele.time);
|
|
|
+ shopMoney.jrdata.push(ele.jr);
|
|
|
+ shopMoney.zrdata.push(ele.zr);
|
|
|
+ });
|
|
|
+ // _self.shopMoneyEcharts('shopmoneyEcharts', shopMoney);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ upTab(index){
|
|
|
+ this.activeTab = index
|
|
|
+ },
|
|
|
+ upBtn(index){
|
|
|
+ this.activeBtn = index
|
|
|
+ },
|
|
|
+ // 跳转设置页
|
|
|
+ tosetting() {
|
|
|
+ this.$mRouter.push({ route: '/pages/index/setting/setting' });
|
|
|
+ },
|
|
|
+ // 获取售检分析顶部数据
|
|
|
+ getIntradayData(){
|
|
|
+ console.log("today",this.today)
|
|
|
+ let data = {
|
|
|
+ dateType:'%Y-%m-%d',
|
|
|
+ filterType:"day",
|
|
|
+ shopId:this.shopID,
|
|
|
+ startDate:this.startDate,
|
|
|
+ endDate:this.endDate,
|
|
|
+ returnType:"%d"
|
|
|
+ };
|
|
|
+ this.$http.post('dataAnalyse/intradayData',data).then((res) => {
|
|
|
+ if (res.code === 200 && res.msg === 'OK') {
|
|
|
+ this.$mHelper.toast('提交成功!');
|
|
|
+ this.intradayData=res.data
|
|
|
+ console.log()
|
|
|
+ // setTimeout(() => {
|
|
|
+ // this.$mRouter.back();
|
|
|
+ // }, 800);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ },
|
|
|
+ computed:{
|
|
|
+ logingname: function (){
|
|
|
+ if ( this.uderName.indexOf('@') != -1) {
|
|
|
+ return this.uderName.slice(this.uderName.indexOf('@')+1)
|
|
|
+ } else {
|
|
|
+ return this.uderName
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onReady () {
|
|
|
+ this.uderName = uni.getStorageSync('scenicMessage').name
|
|
|
+ },
|
|
|
+ onLoad () {
|
|
|
+ this.typeNum = this.$mStore.state.roleIndex
|
|
|
+ },
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+ .header {
|
|
|
+ width: 100%;
|
|
|
+ padding: 0 30rpx;
|
|
|
+ background-color: $barColor;
|
|
|
+ position: fixed;
|
|
|
+ top: 0;
|
|
|
+ box-sizing: border-box;
|
|
|
+ z-index: 99;
|
|
|
+ .header-warp {
|
|
|
+ display: flex;
|
|
|
+ height: 80rpx;
|
|
|
+ color: #231726;
|
|
|
+ background-color: #ffcc01;
|
|
|
+ position: relative;
|
|
|
+ .header-left {
|
|
|
+ position: absolute;
|
|
|
+ font-size: 28rpx;
|
|
|
+ .uni-list:after {
|
|
|
+ border-color: transparent;
|
|
|
+ }
|
|
|
+ .uni-list-cell-db {
|
|
|
+ height: 80rpx;
|
|
|
+ font-size: 28rpx;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ background-color: $barColor;
|
|
|
+
|
|
|
+ .icon {
|
|
|
+ width: 17rpx;
|
|
|
+ height: 12rpx;
|
|
|
+ margin-left: 10rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .header-center {
|
|
|
+ flex: 1;
|
|
|
+ font-size: 36rpx;
|
|
|
+ font-weight: 700;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 80rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .header-right {
|
|
|
+ position: absolute;
|
|
|
+ right: 0;
|
|
|
+ top: 50%;
|
|
|
+ margin-top: -20rpx;
|
|
|
+ .icon {
|
|
|
+ width: 40rpx;
|
|
|
+ height: 40rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .tabS{
|
|
|
+ display: flex;
|
|
|
+ justify-content: left;
|
|
|
+ align-items: center;
|
|
|
+ .tab{
|
|
|
+ flex: 1;
|
|
|
+ text-align: center;
|
|
|
+ padding: 10rpx 0;
|
|
|
+ // border: 0.5rpx solid #999;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ .icon {
|
|
|
+ width: 17rpx;
|
|
|
+ height: 12rpx;
|
|
|
+ margin-left: 10rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .active_tab{
|
|
|
+ border: 0.5rpx solid #b15cfa;
|
|
|
+ color: #b15cfa;
|
|
|
+ background-color: #FFFFFF;
|
|
|
+ border-bottom: 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .btnS{
|
|
|
+ padding: 0 30rpx;
|
|
|
+ display: flex;
|
|
|
+ justify-content: left;
|
|
|
+ background-color: #FFFFFF;
|
|
|
+ .btn{
|
|
|
+ flex: 1;
|
|
|
+ text-align: center;
|
|
|
+ padding: 10rpx 0;
|
|
|
+ }
|
|
|
+ .active_Btn{
|
|
|
+ // border: 0.5rpx solid #b15cfa;
|
|
|
+ // color: #b15cfa;
|
|
|
+ // background-color: #FFFFFF;
|
|
|
+ border-bottom:2rpx solid #b15cfa;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .sale_box{
|
|
|
+ padding: 0 30rpx;
|
|
|
+ .box{
|
|
|
+ display: flex;
|
|
|
+ justify-content: left;
|
|
|
+ background-color: #E0E0E0;
|
|
|
+ margin-top: 30rpx;
|
|
|
+ padding: 20rpx;
|
|
|
+ border-radius: 10rpx;
|
|
|
+ .advanceBox{
|
|
|
+ height: 200rpx;
|
|
|
+ flex: 1;
|
|
|
+ text-align: center;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: space-between;
|
|
|
+ .text{
|
|
|
+ height: 60rpx;
|
|
|
+ line-height: 60rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</style>
|