xk_guohonglei
5 years ago
parent
d8a4e83078
commit
f4e7782a86
7 changed files with 1110 additions and 0 deletions
@ -0,0 +1,85 @@ |
|||||||
|
<template> |
||||||
|
<view class="margin radius bg-white"> |
||||||
|
<view class="main-money "> |
||||||
|
<view class="padding-xs flex align-center"> |
||||||
|
<view class="flex-sub text-center padding-top-lg"> |
||||||
|
<view class="txet-xxs"> |
||||||
|
<text class="">交易金额</text> |
||||||
|
</view> |
||||||
|
<view class=" text-sl padding padding-top-xs"><text class=""> |
||||||
|
￥{{basicData.totalAmout|numberFilter}} |
||||||
|
|
||||||
|
</text></view> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
<view class="bg-white to-top"> |
||||||
|
<view class=" flex "> |
||||||
|
<view class="padding text-center flex-sub"> |
||||||
|
<text>交易笔数</text> |
||||||
|
<view class="padding-sm"> |
||||||
|
<text class="text-lg oil-main-color padding-top-xs">{{basicData.totalCount}}</text> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
<view class="padding text-center flex-sub"> |
||||||
|
<text>客单均价</text> |
||||||
|
<view class="padding-sm"> |
||||||
|
<text class="text-lg oil-main-color">￥{{basicData.totalAmout/basicData.totalAccount|numberFilter}}</text> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
<view class="padding text-center flex-sub"> |
||||||
|
<text>顾客数</text> |
||||||
|
<view class="padding-sm"> |
||||||
|
<text class="text-lg oil-main-color padding-top-xs">{{basicData.totalAccount}}</text> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
|
||||||
|
</view> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
export default { |
||||||
|
props: { |
||||||
|
basicData: { |
||||||
|
type: Object, |
||||||
|
default () {} |
||||||
|
} |
||||||
|
}, |
||||||
|
data() { |
||||||
|
return { |
||||||
|
|
||||||
|
} |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
showModal() { |
||||||
|
this.$emit('showModal') |
||||||
|
} |
||||||
|
}, |
||||||
|
watch: { |
||||||
|
basicData: { |
||||||
|
handler(newVal, oldVal) { |
||||||
|
console.log('深度监听', newVal, oldVal) |
||||||
|
this.basicData = newVal |
||||||
|
}, |
||||||
|
deep: true |
||||||
|
} |
||||||
|
}, |
||||||
|
filters: { |
||||||
|
numberFilter(value) { |
||||||
|
if (value) { |
||||||
|
value = value - 1 + 1 |
||||||
|
return value.toFixed(2) |
||||||
|
} else { |
||||||
|
return '0.00' |
||||||
|
} |
||||||
|
|
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<style> |
||||||
|
|
||||||
|
</style> |
||||||
@ -0,0 +1,198 @@ |
|||||||
|
<template> |
||||||
|
<view class="qiun-columns"> |
||||||
|
<!--#ifdef H5 --> |
||||||
|
<view class="qiun-bg-white qiun-title-bar qiun-common-mt"> |
||||||
|
<view class="qiun-title-dot-light">页面地址</view> |
||||||
|
</view> |
||||||
|
<view class="qiun-bg-white qiun-padding"> |
||||||
|
<text>pages/basic/area/time</text> |
||||||
|
</view> |
||||||
|
<!--#endif--> |
||||||
|
<view class="qiun-bg-white qiun-title-bar qiun-common-mt"> |
||||||
|
<view class="qiun-title-dot-light">单量</view> |
||||||
|
</view> |
||||||
|
<view class="qiun-charts"> |
||||||
|
<!--#ifdef MP-ALIPAY --> |
||||||
|
<canvas canvas-id="canvasLineA" id="canvasLineA" class="charts" :width="cWidth*pixelRatio" :height="cHeight*pixelRatio" |
||||||
|
:style="{'width':cWidth+'px','height':cHeight+'px'}" @touchstart="touchLineA"></canvas> |
||||||
|
<!--#endif--> |
||||||
|
<!--#ifndef MP-ALIPAY --> |
||||||
|
<canvas canvas-id="canvasLineA" id="canvasLineA" class="charts" @touchstart="touchLineA"></canvas> |
||||||
|
<!--#endif--> |
||||||
|
</view> |
||||||
|
<!--#ifdef H5 --> |
||||||
|
<view class="qiun-bg-white qiun-title-bar qiun-common-mt"> |
||||||
|
<view class="qiun-title-dot-light">标准数据格式</view> |
||||||
|
</view> |
||||||
|
<view class="qiun-bg-white qiun-padding"> |
||||||
|
<textarea class="qiun-textarea" auto-height="true" maxlength="-1" v-model="textarea" /> |
||||||
|
</view> |
||||||
|
<view class="qiun-text-tips">Tips：修改后点击更新图表</view> |
||||||
|
<button class="qiun-button" @tap="changeData()">更新图表</button> |
||||||
|
<!--#endif--> |
||||||
|
</view> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
import uCharts from '@/js_sdk/u-charts/u-charts/u-charts.js'; |
||||||
|
import { isJSON } from '@/common/checker.js'; |
||||||
|
|
||||||
|
var _self; |
||||||
|
var canvaLineA = null; |
||||||
|
export default { |
||||||
|
props: { |
||||||
|
chartData: { |
||||||
|
type: Array, |
||||||
|
default: [] |
||||||
|
} |
||||||
|
}, |
||||||
|
|
||||||
|
data() { |
||||||
|
return { |
||||||
|
cWidth: '', |
||||||
|
cHeight: '', |
||||||
|
pixelRatio: 1, |
||||||
|
textarea: '' |
||||||
|
} |
||||||
|
}, |
||||||
|
created() { |
||||||
|
_self = this; |
||||||
|
//#ifdef MP-ALIPAY |
||||||
|
uni.getSystemInfo({ |
||||||
|
success: function (res) { |
||||||
|
if (res.pixelRatio > 1) { |
||||||
|
//正常这里给2就行，如果pixelRatio=3性能会降低一点 |
||||||
|
//_self.pixelRatio =res.pixelRatio; |
||||||
|
_self.pixelRatio = 2; |
||||||
|
} |
||||||
|
} |
||||||
|
}); |
||||||
|
//#endif |
||||||
|
this.cWidth = uni.upx2px(650); |
||||||
|
this.cHeight = uni.upx2px(500); |
||||||
|
console.log('chartData', this.chartData) |
||||||
|
}, |
||||||
|
watch: { |
||||||
|
chartData: { |
||||||
|
handler(newVal, oldVal) { |
||||||
|
console.log('深度监听', newVal, oldVal) |
||||||
|
this.chartData = newVal |
||||||
|
this.getServerData() |
||||||
|
}, |
||||||
|
deep: true |
||||||
|
} |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
getServerData() { |
||||||
|
if (this.chartData) { |
||||||
|
let LineA = { |
||||||
|
series: [{ |
||||||
|
name: '交易时段分布', data: this.chartData |
||||||
|
}] |
||||||
|
} |
||||||
|
_self.textarea = JSON.stringify(LineA); |
||||||
|
console.log('-----------------------') |
||||||
|
console.log('_self.textarea', _self.textarea) |
||||||
|
console.log('LineA', LineA) |
||||||
|
console.log('-----------------------') |
||||||
|
_self.showLineA("canvasLineA", LineA); |
||||||
|
} |
||||||
|
}, |
||||||
|
formatDateTime(timeStamp) { |
||||||
|
var date = new Date(); |
||||||
|
date.setTime(timeStamp); |
||||||
|
|
||||||
|
var m = date.getMonth() + 1; |
||||||
|
m = m < 10 ? ('0' + m) : m; |
||||||
|
var d = date.getDate(); |
||||||
|
d = d < 10 ? ('0' + d) : d; |
||||||
|
|
||||||
|
return m + '-' + d |
||||||
|
}, |
||||||
|
showLineA(canvasId, chartData) { |
||||||
|
canvaLineA = new uCharts({ |
||||||
|
$this: _self, |
||||||
|
canvasId: canvasId, |
||||||
|
type: 'area', |
||||||
|
fontSize: 11, |
||||||
|
padding: [15, 20, 0, 15], |
||||||
|
legend: false, |
||||||
|
dataLabel: true, |
||||||
|
dataPointShape: true, |
||||||
|
background: '#FFFFFF', |
||||||
|
pixelRatio: _self.pixelRatio, |
||||||
|
// categories: chartData.categories, |
||||||
|
series: chartData.series, |
||||||
|
animation: true, |
||||||
|
xAxis: { |
||||||
|
type: 'grid', |
||||||
|
gridColor: '#CCCCCC', |
||||||
|
gridType: 'dash', |
||||||
|
dashLength: 8, |
||||||
|
boundaryGap: 'justify', |
||||||
|
splitNumber: 5, |
||||||
|
format: (val) => { |
||||||
|
// console.log('----', val, '-----') |
||||||
|
// console.log('----', this.formatDateTime(val, 'str'), '-----') |
||||||
|
return this.formatDateTime(val) } |
||||||
|
}, |
||||||
|
yAxis: { |
||||||
|
gridType: 'dash', |
||||||
|
gridColor: '#CCCCCC', |
||||||
|
dashLength: 8, |
||||||
|
splitNumber: 5, |
||||||
|
format: (val) => { return val + '单' } |
||||||
|
}, |
||||||
|
width: _self.cWidth * _self.pixelRatio, |
||||||
|
height: _self.cHeight * _self.pixelRatio, |
||||||
|
extra: { |
||||||
|
area: { |
||||||
|
type: 'curve', |
||||||
|
addLine: true, |
||||||
|
gradient: true |
||||||
|
} |
||||||
|
} |
||||||
|
}); |
||||||
|
|
||||||
|
}, |
||||||
|
touchLineA(e) { |
||||||
|
var that = this |
||||||
|
canvaLineA.showToolTip(e, { |
||||||
|
format: function (item, category) { |
||||||
|
console.log(' item.data', item.data) |
||||||
|
return that.formatDateTime(item.data[0])+' ' + item.data[1] + '单 ' + '交易金额' + item.data[2] + '元' |
||||||
|
} |
||||||
|
}); |
||||||
|
}, |
||||||
|
changeData() { |
||||||
|
if (isJSON(_self.textarea)) { |
||||||
|
let newdata = JSON.parse(_self.textarea); |
||||||
|
canvaLineA.updateData({ |
||||||
|
series: newdata.series, |
||||||
|
categories: newdata.categories |
||||||
|
}); |
||||||
|
} else { |
||||||
|
uni.showToast({ |
||||||
|
title: '数据格式错误', |
||||||
|
image: '../../../static/images/alert-warning.png' |
||||||
|
}) |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<style scoped> |
||||||
|
/*样式的width和height一定要与定义的cWidth和cHeight相对应*/ |
||||||
|
.qiun-charts { |
||||||
|
width: 640upx; |
||||||
|
height: 500rpx; |
||||||
|
background-color: #ffffff; |
||||||
|
} |
||||||
|
|
||||||
|
.charts { |
||||||
|
width: 640upx; |
||||||
|
height: 500rpx; |
||||||
|
background-color: #ffffff; |
||||||
|
} |
||||||
|
</style> |
||||||
@ -0,0 +1,193 @@ |
|||||||
|
<template> |
||||||
|
<view class="qiun-columns"> |
||||||
|
<!--#ifdef H5 --> |
||||||
|
<view class="qiun-bg-white qiun-title-bar qiun-common-mt"> |
||||||
|
<view class="qiun-title-dot-light">页面地址</view> |
||||||
|
</view> |
||||||
|
<view class="qiun-bg-white qiun-padding"> |
||||||
|
<text>pages/basic/area/time</text> |
||||||
|
</view> |
||||||
|
<!--#endif--> |
||||||
|
<view class="qiun-bg-white qiun-title-bar qiun-common-mt"> |
||||||
|
<view class="qiun-title-dot-light">单量</view> |
||||||
|
</view> |
||||||
|
<view class="qiun-charts"> |
||||||
|
<!--#ifdef MP-ALIPAY --> |
||||||
|
<canvas canvas-id="canvasLineA" id="canvasLineA" class="charts" :width="cWidth*pixelRatio" :height="cHeight*pixelRatio" |
||||||
|
:style="{'width':cWidth+'px','height':cHeight+'px'}" @touchstart="touchLineA"></canvas> |
||||||
|
<!--#endif--> |
||||||
|
<!--#ifndef MP-ALIPAY --> |
||||||
|
<canvas canvas-id="canvasLineA" id="canvasLineA" class="charts" @touchstart="touchLineA"></canvas> |
||||||
|
<!--#endif--> |
||||||
|
</view> |
||||||
|
<!--#ifdef H5 --> |
||||||
|
<view class="qiun-bg-white qiun-title-bar qiun-common-mt"> |
||||||
|
<view class="qiun-title-dot-light">标准数据格式</view> |
||||||
|
</view> |
||||||
|
<view class="qiun-bg-white qiun-padding"> |
||||||
|
<textarea class="qiun-textarea" auto-height="true" maxlength="-1" v-model="textarea" /> |
||||||
|
</view> |
||||||
|
<view class="qiun-text-tips">Tips：修改后点击更新图表</view> |
||||||
|
<button class="qiun-button" @tap="changeData()">更新图表</button> |
||||||
|
<!--#endif--> |
||||||
|
</view> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
import uCharts from '@/js_sdk/u-charts/u-charts/u-charts.js'; |
||||||
|
import { isJSON } from '@/common/checker.js'; |
||||||
|
|
||||||
|
var _self; |
||||||
|
var canvaLineA = null; |
||||||
|
export default { |
||||||
|
props: { |
||||||
|
chartData: { |
||||||
|
type: Array, |
||||||
|
default: [] |
||||||
|
} |
||||||
|
}, |
||||||
|
|
||||||
|
data() { |
||||||
|
return { |
||||||
|
cWidth: '', |
||||||
|
cHeight: '', |
||||||
|
pixelRatio: 1, |
||||||
|
textarea: '' |
||||||
|
} |
||||||
|
}, |
||||||
|
created() { |
||||||
|
_self = this; |
||||||
|
//#ifdef MP-ALIPAY |
||||||
|
uni.getSystemInfo({ |
||||||
|
success: function (res) { |
||||||
|
if (res.pixelRatio > 1) { |
||||||
|
//正常这里给2就行，如果pixelRatio=3性能会降低一点 |
||||||
|
//_self.pixelRatio =res.pixelRatio; |
||||||
|
_self.pixelRatio = 2; |
||||||
|
} |
||||||
|
} |
||||||
|
}); |
||||||
|
//#endif |
||||||
|
this.cWidth = uni.upx2px(650); |
||||||
|
this.cHeight = uni.upx2px(500); |
||||||
|
console.log('chartData', this.chartData) |
||||||
|
}, |
||||||
|
watch: { |
||||||
|
chartData: { |
||||||
|
handler(newVal, oldVal) { |
||||||
|
console.log('深度监听', newVal, oldVal) |
||||||
|
this.chartData = newVal |
||||||
|
this.getServerData() |
||||||
|
}, |
||||||
|
deep: true |
||||||
|
} |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
getServerData() { |
||||||
|
if (this.chartData) { |
||||||
|
let LineA = { |
||||||
|
series: [{ |
||||||
|
name: '交易时段分布', data: this.chartData |
||||||
|
}] |
||||||
|
} |
||||||
|
_self.textarea = JSON.stringify(LineA); |
||||||
|
console.log('-----------------------') |
||||||
|
console.log('_self.textarea', _self.textarea) |
||||||
|
console.log('LineA', LineA) |
||||||
|
console.log('-----------------------') |
||||||
|
_self.showLineA("canvasLineA", LineA); |
||||||
|
} |
||||||
|
}, |
||||||
|
formatDateTime(timeStr) { |
||||||
|
console.log('-----------------------') |
||||||
|
console.log('timeStr', timeStr) |
||||||
|
console.log('-----------------------') |
||||||
|
return (timeStr > 0 ? timeStr.toFixed(0) : 0) + ':00' |
||||||
|
}, |
||||||
|
showLineA(canvasId, chartData) { |
||||||
|
canvaLineA = new uCharts({ |
||||||
|
$this: _self, |
||||||
|
canvasId: canvasId, |
||||||
|
type: 'area', |
||||||
|
fontSize: 11, |
||||||
|
padding: [15, 20, 0, 15], |
||||||
|
legend: false, |
||||||
|
dataLabel: true, |
||||||
|
dataPointShape: true, |
||||||
|
background: '#FFFFFF', |
||||||
|
pixelRatio: _self.pixelRatio, |
||||||
|
// categories: chartData.categories, |
||||||
|
series: chartData.series, |
||||||
|
animation: true, |
||||||
|
xAxis: { |
||||||
|
type: 'grid', |
||||||
|
gridColor: '#CCCCCC', |
||||||
|
gridType: 'dash', |
||||||
|
dashLength: 8, |
||||||
|
boundaryGap: 'justify', |
||||||
|
splitNumber: 5, |
||||||
|
format: (val) => { |
||||||
|
// console.log('----', val, '-----') |
||||||
|
// console.log('----', this.formatDateTime(val, 'str'), '-----') |
||||||
|
return this.formatDateTime(val) } |
||||||
|
}, |
||||||
|
yAxis: { |
||||||
|
gridType: 'dash', |
||||||
|
gridColor: '#CCCCCC', |
||||||
|
dashLength: 8, |
||||||
|
splitNumber: 5, |
||||||
|
format: (val) => { return val + '单' } |
||||||
|
}, |
||||||
|
width: _self.cWidth * _self.pixelRatio, |
||||||
|
height: _self.cHeight * _self.pixelRatio, |
||||||
|
extra: { |
||||||
|
area: { |
||||||
|
type: 'curve', |
||||||
|
addLine: true, |
||||||
|
gradient: true |
||||||
|
} |
||||||
|
} |
||||||
|
}); |
||||||
|
|
||||||
|
}, |
||||||
|
touchLineA(e) { |
||||||
|
var that = this |
||||||
|
canvaLineA.showToolTip(e, { |
||||||
|
format: function (item, category) { |
||||||
|
console.log(' item.data', item.data) |
||||||
|
return (item.data[0] + ':00 ') + item.data[1] + '单 ' + '交易金额' + item.data[2] + '元' |
||||||
|
} |
||||||
|
}); |
||||||
|
}, |
||||||
|
changeData() { |
||||||
|
if (isJSON(_self.textarea)) { |
||||||
|
let newdata = JSON.parse(_self.textarea); |
||||||
|
canvaLineA.updateData({ |
||||||
|
series: newdata.series, |
||||||
|
categories: newdata.categories |
||||||
|
}); |
||||||
|
} else { |
||||||
|
uni.showToast({ |
||||||
|
title: '数据格式错误', |
||||||
|
image: '../../../static/images/alert-warning.png' |
||||||
|
}) |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<style scoped> |
||||||
|
/*样式的width和height一定要与定义的cWidth和cHeight相对应*/ |
||||||
|
.qiun-charts { |
||||||
|
width: 640upx; |
||||||
|
height: 500rpx; |
||||||
|
background-color: #ffffff; |
||||||
|
} |
||||||
|
|
||||||
|
.charts { |
||||||
|
width: 640upx; |
||||||
|
height: 500rpx; |
||||||
|
background-color: #ffffff; |
||||||
|
} |
||||||
|
</style> |
||||||
@ -0,0 +1,39 @@ |
|||||||
|
<template> |
||||||
|
<view class="page-content my-bg"> |
||||||
|
<cu-custom bgColor="bg-gradual-pink" :isBack="true"> |
||||||
|
<block slot="backText">返回</block> |
||||||
|
<block slot="content">列表</block> |
||||||
|
</cu-custom> |
||||||
|
<view class=""> |
||||||
|
<analysis-card /> |
||||||
|
</view> |
||||||
|
<view class="margin bg-white radius"> |
||||||
|
<view class="margin"> |
||||||
|
<area-time /> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
|
||||||
|
</view> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
import areaTime from '../../area-time.vue' |
||||||
|
import analysisCard from '../../analysis-card.vue' |
||||||
|
export default { |
||||||
|
components: { |
||||||
|
areaTime,analysisCard |
||||||
|
}, |
||||||
|
data() { |
||||||
|
return { |
||||||
|
|
||||||
|
} |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
|
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<style> |
||||||
|
|
||||||
|
</style> |
||||||
@ -0,0 +1,179 @@ |
|||||||
|
// 昨日经营分析 |
||||||
|
<template> |
||||||
|
<view class="page-content my-bg"> |
||||||
|
<cu-custom bgColor="bg-main-oil" :isBack="true"> |
||||||
|
<block slot="backText">返回</block> |
||||||
|
<block slot="content">日报</block> |
||||||
|
</cu-custom> |
||||||
|
<view class="card-container"> |
||||||
|
<view class="cu-capsule-container"> |
||||||
|
<view class="cu-capsule round bg-white solid line-gray" @tap="showModal"> |
||||||
|
<view class='cu-tag bg-white'> |
||||||
|
{{selDate}} |
||||||
|
</view> |
||||||
|
<view class="cu-tag bg-white"> |
||||||
|
<text class='cuIcon-usefullfill rr90 padding-left-xs'></text> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
|
||||||
|
<analysis-card @showModal="showModal" :basicData="basicData" /> |
||||||
|
</view> |
||||||
|
<view class="margin bg-white radius"> |
||||||
|
<view class="margin"> |
||||||
|
<area-time :chartData="detailData" /> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
<view class="cu-modal bottom-modal" style="z-index: 999999;" :class="dialogModal"> |
||||||
|
<view class="cu-dialog"> |
||||||
|
<view class="cu-bar bg-white "> |
||||||
|
<view class="action text-blue" @tap="hideModal">取消</view> |
||||||
|
<view class="content">选择日期</view> |
||||||
|
<view class="action text-green" @tap="onConfirm">确定</view> |
||||||
|
</view> |
||||||
|
|
||||||
|
<picker-view :value="value" style="min-height: 250upx;width: 100%;" @change="bindChange"> |
||||||
|
<picker-view-column> |
||||||
|
<view class="item" v-for="(item,index) in years" :key="index">{{item}}年</view> |
||||||
|
</picker-view-column> |
||||||
|
<picker-view-column> |
||||||
|
<view class="item" v-for="(item,index) in months" :key="index">{{item}}月</view> |
||||||
|
</picker-view-column> |
||||||
|
<picker-view-column> |
||||||
|
<view class="item" v-for="(item,index) in days" :key="index">{{item}}日</view> |
||||||
|
</picker-view-column> |
||||||
|
</picker-view> |
||||||
|
|
||||||
|
</view> |
||||||
|
</view> |
||||||
|
|
||||||
|
</view> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
import areaTime from '../../area-time.vue' |
||||||
|
import analysisCard from '../../analysis-card.vue' |
||||||
|
import cloudSiteApi from '@/api/cloud-site.js' |
||||||
|
export default { |
||||||
|
components: { |
||||||
|
areaTime, |
||||||
|
analysisCard |
||||||
|
}, |
||||||
|
data: function() { |
||||||
|
const date = new Date() |
||||||
|
const years = [] |
||||||
|
const year = date.getFullYear() |
||||||
|
const months = [] |
||||||
|
const month = date.getMonth() + 1 |
||||||
|
const days = [] |
||||||
|
const day = date.getDate() |
||||||
|
for (let i = 2020; i <= date.getFullYear(); i++) { |
||||||
|
years.push(i) |
||||||
|
} |
||||||
|
for (let i = 1; i <= month; i++) { |
||||||
|
months.push(i) |
||||||
|
} |
||||||
|
for (let i = 1; i <= 31; i++) { |
||||||
|
days.push(i) |
||||||
|
} |
||||||
|
return { |
||||||
|
title: 'picker-view', |
||||||
|
years: [2020], |
||||||
|
year: 2020, |
||||||
|
months: months, |
||||||
|
dialogModal: '', |
||||||
|
month: month, |
||||||
|
days: days, |
||||||
|
day: day, |
||||||
|
// value: [9999, month - 1, day - 1], |
||||||
|
value: [0, month - 1, day - 1], |
||||||
|
selDate: year + '-' + month + '-' + day, |
||||||
|
detailData: [], |
||||||
|
basicData: { |
||||||
|
totalAccount: 0, |
||||||
|
totalAmout: 0, |
||||||
|
totalCount: 0 |
||||||
|
} |
||||||
|
} |
||||||
|
}, |
||||||
|
|
||||||
|
onPullDownRefresh() { |
||||||
|
this.onConfirm() |
||||||
|
// this.getUserInfo() |
||||||
|
// uni.stopPullDownRefresh(); |
||||||
|
}, |
||||||
|
onShow() { |
||||||
|
this.formatDate() |
||||||
|
this.getDaily() |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
getDaily() { |
||||||
|
cloudSiteApi.getAnyDay(this.selDate).then(res => { |
||||||
|
uni.stopPullDownRefresh(); |
||||||
|
if (res.code === 20000) { |
||||||
|
this.basicData = res.data.basicData |
||||||
|
this.detailData = res.data.detailData |
||||||
|
} |
||||||
|
}) |
||||||
|
}, |
||||||
|
onConfirm() { |
||||||
|
this.hideModal() |
||||||
|
this.formatDate() |
||||||
|
this.getDaily() |
||||||
|
}, |
||||||
|
formatDate() { |
||||||
|
var m = '' |
||||||
|
var d = '' |
||||||
|
if (this.month < 10) { |
||||||
|
m = '0' + this.month |
||||||
|
} else { |
||||||
|
m = this.month |
||||||
|
} |
||||||
|
if (this.day < 10) { |
||||||
|
d = '0' + this.day |
||||||
|
} else { |
||||||
|
d = this.day |
||||||
|
} |
||||||
|
this.selDate = this.year + '-' + m + '-' + d |
||||||
|
this.selDate = this.selDate.toString() |
||||||
|
console.log(this.selDate) |
||||||
|
}, |
||||||
|
showModal(e) { |
||||||
|
this.dialogModal = 'show' |
||||||
|
}, |
||||||
|
hideModal(e) { |
||||||
|
this.dialogModal = null |
||||||
|
}, |
||||||
|
bindChange: function(e) { |
||||||
|
const val = e.detail.value |
||||||
|
this.year = this.years[val[0]] |
||||||
|
this.month = this.months[val[1]] |
||||||
|
this.day = this.days[val[2]] |
||||||
|
console.log('年鱼儿', this.year, this.month, this.day) |
||||||
|
|
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<style scoped> |
||||||
|
.card-container { |
||||||
|
position: relative; |
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
.card-container .cu-capsule { |
||||||
|
margin: auto; |
||||||
|
margin-bottom: -40px; |
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
.cu-capsule-container { |
||||||
|
min-width: 100%; |
||||||
|
text-align: center; |
||||||
|
} |
||||||
|
|
||||||
|
.rr90 { |
||||||
|
rotate: 180deg; |
||||||
|
} |
||||||
|
</style> |
||||||
@ -0,0 +1,180 @@ |
|||||||
|
// 昨日经营分析 |
||||||
|
<template> |
||||||
|
<view class="page-content my-bg"> |
||||||
|
<cu-custom bgColor="bg-main-oil" :isBack="true"> |
||||||
|
<block slot="backText">返回</block> |
||||||
|
<block slot="content">月报</block> |
||||||
|
</cu-custom> |
||||||
|
<view class="card-container"> |
||||||
|
<view class="cu-capsule-container"> |
||||||
|
<view class="cu-capsule round bg-white solid line-gray" @tap="showModal"> |
||||||
|
<view class='cu-tag bg-white'> |
||||||
|
{{selDate}} |
||||||
|
</view> |
||||||
|
<view class="cu-tag bg-white"> |
||||||
|
<text class='cuIcon-usefullfill rr90 padding-left-xs'></text> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
|
||||||
|
<analysis-card @showModal="showModal" :basicData="basicData" /> |
||||||
|
<view class="margin bg-white radius"> |
||||||
|
<view class="margin" style="position: relative;z-index: 1;"> |
||||||
|
<area-month :chartData="detailData" /> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
<view class="cu-modal bottom-modal" style="z-index: 999999;" :class="dialogModal"> |
||||||
|
<view class="cu-dialog"> |
||||||
|
<view class="cu-bar bg-white "> |
||||||
|
<view class="action text-blue" @tap="hideModal">取消</view> |
||||||
|
<view class="content">选择日期</view> |
||||||
|
<view class="action text-green" @tap="onConfirm">确定</view> |
||||||
|
</view> |
||||||
|
<picker-view :value="value" style="min-height: 250upx;width: 100%;" @change="bindChange"> |
||||||
|
<picker-view-column> |
||||||
|
<view class="item" v-for="(item,index) in years" :key="index">{{item}}年</view> |
||||||
|
</picker-view-column> |
||||||
|
<picker-view-column> |
||||||
|
<view class="item" v-for="(item,index) in months" :key="index">{{item}}月</view> |
||||||
|
</picker-view-column> |
||||||
|
</picker-view> |
||||||
|
|
||||||
|
</view> |
||||||
|
</view> |
||||||
|
|
||||||
|
</view> |
||||||
|
</view> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
import areaMonth from '../../area-month.vue' |
||||||
|
import analysisCard from '../../analysis-card.vue' |
||||||
|
import cloudSiteApi from '@/api/cloud-site.js' |
||||||
|
export default { |
||||||
|
components: { |
||||||
|
areaMonth, |
||||||
|
analysisCard |
||||||
|
}, |
||||||
|
data: function() { |
||||||
|
const date = new Date() |
||||||
|
const years = [] |
||||||
|
const year = date.getFullYear() |
||||||
|
const months = [] |
||||||
|
const month = date.getMonth() + 1 |
||||||
|
const days = [] |
||||||
|
const day = date.getDate() - 1 |
||||||
|
for (let i = 2020; i <= date.getFullYear(); i++) { |
||||||
|
years.push(i) |
||||||
|
} |
||||||
|
for (let i = 1; i <= month; i++) { |
||||||
|
months.push(i) |
||||||
|
} |
||||||
|
for (let i = 1; i <= 31; i++) { |
||||||
|
days.push(i) |
||||||
|
} |
||||||
|
return { |
||||||
|
title: 'picker-view', |
||||||
|
years: [2020], |
||||||
|
year: 2020, |
||||||
|
months: months, |
||||||
|
dialogModal: '', |
||||||
|
month: month, |
||||||
|
days: days, |
||||||
|
day: day, |
||||||
|
// value: [9999, month - 1, day - 1], |
||||||
|
value: [0, month - 1, day - 1], |
||||||
|
selDate: year + '-' + month, |
||||||
|
detailData: [], |
||||||
|
basicData: { |
||||||
|
totalAccount: 0, |
||||||
|
totalAmout: 0, |
||||||
|
totalCount: 0 |
||||||
|
} |
||||||
|
} |
||||||
|
}, |
||||||
|
|
||||||
|
onPullDownRefresh() { |
||||||
|
this.onConfirm() |
||||||
|
// this.getUserInfo() |
||||||
|
// uni.stopPullDownRefresh(); |
||||||
|
}, |
||||||
|
onShow() { |
||||||
|
this.formatDate() |
||||||
|
this.getMonthly() |
||||||
|
var date = '2019-9-5'; |
||||||
|
date = date.substring(0, 19); |
||||||
|
date = date.replace(/-/g, '/'); |
||||||
|
var timestamp = new Date(date).getTime(); |
||||||
|
console.log(timestamp) |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
getMonthly() { |
||||||
|
cloudSiteApi.getAnyMonth(this.selDate+'-5').then(res => { |
||||||
|
uni.stopPullDownRefresh() |
||||||
|
if (res.code === 20000) { |
||||||
|
this.basicData = res.data.basicData |
||||||
|
res.data.detailData.forEach(item => { |
||||||
|
var date = item[0] |
||||||
|
date = date.substring(0, 19); |
||||||
|
date = date.replace(/-/g, '/'); |
||||||
|
item[0] = new Date(date).getTime(); |
||||||
|
}) |
||||||
|
this.detailData = res.data.detailData |
||||||
|
} |
||||||
|
}) |
||||||
|
}, |
||||||
|
onConfirm() { |
||||||
|
this.hideModal() |
||||||
|
this.formatDate() |
||||||
|
this.getMonthly() |
||||||
|
}, |
||||||
|
formatDate() { |
||||||
|
var m = '' |
||||||
|
var d = '' |
||||||
|
if (this.month < 10) { |
||||||
|
m = '0' + this.month |
||||||
|
} else { |
||||||
|
m = this.month |
||||||
|
} |
||||||
|
this.selDate = this.year + '-' + m |
||||||
|
console.log(this.selDate) |
||||||
|
}, |
||||||
|
showModal(e) { |
||||||
|
this.dialogModal = 'show' |
||||||
|
}, |
||||||
|
hideModal(e) { |
||||||
|
this.dialogModal = null |
||||||
|
}, |
||||||
|
bindChange: function(e) { |
||||||
|
const val = e.detail.value |
||||||
|
this.year = this.years[val[0]] |
||||||
|
this.month = this.months[val[1]] |
||||||
|
this.day = this.days[val[2]] |
||||||
|
console.log('年鱼儿', this.year, this.month, this.day) |
||||||
|
|
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<style scoped> |
||||||
|
.card-container { |
||||||
|
position: relative; |
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
.card-container .cu-capsule { |
||||||
|
margin: auto; |
||||||
|
margin-bottom: -40px; |
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
.cu-capsule-container { |
||||||
|
min-width: 100%; |
||||||
|
text-align: center; |
||||||
|
} |
||||||
|
|
||||||
|
.rr90 { |
||||||
|
rotate: 180deg; |
||||||
|
} |
||||||
|
</style> |
||||||
@ -0,0 +1,236 @@ |
|||||||
|
<template> |
||||||
|
<view class="page-content my-bg"> |
||||||
|
<cu-custom class="main-topbar bg-main-oil" bgColor="bg-main-oil" :isBack="true"> |
||||||
|
<block slot="content">经营分析</block> |
||||||
|
<block slot="backText" class="back-text">返回</block> |
||||||
|
</cu-custom> |
||||||
|
|
||||||
|
<view class="main-money bg-main-oil"> |
||||||
|
<view class="padding-xs flex align-center"> |
||||||
|
<view class="flex-sub text-center padding-top-lg"> |
||||||
|
<view class="txet-xxs"> |
||||||
|
<text class="text-white">昨日交易金额(元)</text> |
||||||
|
</view> |
||||||
|
<view class=" text-sl padding padding-top-xs"><text class="text-white">￥{{basicData.totalAmout|numberFilter}}</text></view> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
|
||||||
|
<view class="bg-main-oil bg-main-color main-money"> |
||||||
|
|
||||||
|
</view> |
||||||
|
<view class="bg-white radius margin-left margin-right to-top"> |
||||||
|
<view class=" flex "> |
||||||
|
<view class="padding text-center flex-sub" @tap="routerTo('/pages/orderList/dailyOrder/dailyOrder')"> |
||||||
|
<text>交易笔数</text> |
||||||
|
<view class="padding-sm"> |
||||||
|
<text class="oil-main-color">{{basicData.totalCount}}</text> |
||||||
|
</view> |
||||||
|
<!-- <button class="cu-btn bg-main-oil text-white text-sm "> |
||||||
|
查看明细 |
||||||
|
</button> --> |
||||||
|
</view> |
||||||
|
<view class="padding text-center flex-sub"> |
||||||
|
<text>顾客数</text> |
||||||
|
<view class="padding-sm"> |
||||||
|
<text class="oil-main-color">{{basicData.totalAccount}}</text> |
||||||
|
</view> |
||||||
|
<!-- <button class="cu-btn bg-main-oil text-white text-sm "> |
||||||
|
查看明细 |
||||||
|
</button> --> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
<view class="margin"> |
||||||
|
<view class="cu-list menu-avatar radius"> |
||||||
|
<view class="cu-item" @tap="routerTo('/packageChart/operation-analysis/analysis/daily')"> |
||||||
|
<view class="cu-avatar lg" :style="'background-image: url('+mainURL+'rb.png)'"> |
||||||
|
</view> |
||||||
|
<view class="content "> |
||||||
|
<text>经营分析——日报</text> |
||||||
|
</view> |
||||||
|
<view class="action"> |
||||||
|
<button class="cu-btn padding-left-xs padding-right-xs bg-white"> |
||||||
|
<text class="cuIcon-right"></text> |
||||||
|
</button> |
||||||
|
</view> |
||||||
|
|
||||||
|
</view> |
||||||
|
<view class="cu-item" @tap="routerTo('/packageChart/operation-analysis/analysis/monthly')"> |
||||||
|
<view class="cu-avatar lg" :style="'background-image: url('+mainURL+'yb.png)'"> |
||||||
|
</view> |
||||||
|
<view class="content"> |
||||||
|
<text> 经营分析——月报</text> |
||||||
|
</view> |
||||||
|
<view class="action "> |
||||||
|
<button class="cu-btn padding-left-xs padding-right-xs bg-white" @tap="routerTo('path')"> |
||||||
|
<text class="cuIcon-right"></text> |
||||||
|
</button> |
||||||
|
</view> |
||||||
|
|
||||||
|
</view> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
</view> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
import staffApi from '@/api/staff.js' |
||||||
|
import cloudSiteApi from '@/api/cloud-site.js' |
||||||
|
export default { |
||||||
|
data() { |
||||||
|
|
||||||
|
return { |
||||||
|
mainURL: this.global.mainURL, |
||||||
|
basicData: { |
||||||
|
totalAccount: 0, |
||||||
|
totalAmout: 0, |
||||||
|
totalCount: 0 |
||||||
|
}, |
||||||
|
scanUrl: '', |
||||||
|
userMenu: uni.getStorageSync('userMenu'), |
||||||
|
loginUser: uni.getStorageSync('loginUser'), |
||||||
|
title: 'Hello', |
||||||
|
cuIconList: [] |
||||||
|
}; |
||||||
|
}, |
||||||
|
|
||||||
|
onShow() { |
||||||
|
this.getYesterday() |
||||||
|
}, |
||||||
|
onPullDownRefresh() { |
||||||
|
this.getYesterday() |
||||||
|
}, |
||||||
|
filters: { |
||||||
|
|
||||||
|
numberFilter(value) { |
||||||
|
if (value) { |
||||||
|
value = value - 1 + 1 |
||||||
|
return value.toFixed(2) |
||||||
|
} else { |
||||||
|
return '0.00' |
||||||
|
} |
||||||
|
|
||||||
|
} |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
getSiteInfo() { |
||||||
|
cloudSiteApi.getSiteDetail().then(res => { |
||||||
|
if (res.code === 20000) { |
||||||
|
this.site = res.data.site |
||||||
|
this.oilList = res.data.oil |
||||||
|
uni.setStorage({ |
||||||
|
key: 'oilSite', |
||||||
|
data: res.data.site |
||||||
|
}) |
||||||
|
} |
||||||
|
}) |
||||||
|
}, |
||||||
|
getYesterday() { |
||||||
|
cloudSiteApi.getYesterday().then(res => { |
||||||
|
uni.stopPullDownRefresh() |
||||||
|
if (res.code === 20000) { |
||||||
|
this.basicData = res.data |
||||||
|
} |
||||||
|
}) |
||||||
|
}, |
||||||
|
scanQr() { |
||||||
|
var that = this |
||||||
|
uni.scanCode({ |
||||||
|
onlyFromCamera: true, |
||||||
|
success: function(res) { |
||||||
|
console.log('条码类型：' + res.scanType); |
||||||
|
console.log('条码内容：' + res.result); |
||||||
|
uni.setStorageSync('qrCode', res.result) |
||||||
|
uni.navigateTo({ |
||||||
|
url: that.scanUrl, |
||||||
|
fail: (err) => { |
||||||
|
console.log(err) |
||||||
|
}, |
||||||
|
success: (res) => { |
||||||
|
console.log('chengg', res) |
||||||
|
} |
||||||
|
}) |
||||||
|
} |
||||||
|
}) |
||||||
|
}, |
||||||
|
// 方便开发 |
||||||
|
// scanQr() { |
||||||
|
// uni.setStorageSync('qrCode', 'XM&1299257961238990848') |
||||||
|
// uni.navigateTo({ |
||||||
|
// url: '/pages/stationDetail/stationDetail', |
||||||
|
// fail: (err) => { |
||||||
|
// console.log(err) |
||||||
|
// }, |
||||||
|
// success: (res) => { |
||||||
|
// console.log('chengg', res) |
||||||
|
// } |
||||||
|
// }) |
||||||
|
|
||||||
|
// }, |
||||||
|
routerTo(url, name) { |
||||||
|
|
||||||
|
uni.navigateTo({ |
||||||
|
url: url |
||||||
|
}) |
||||||
|
} |
||||||
|
} |
||||||
|
}; |
||||||
|
</script> |
||||||
|
|
||||||
|
<style scoped> |
||||||
|
.bottom-bar { |
||||||
|
position: relative; |
||||||
|
padding-top: 50px; |
||||||
|
margin-bottom: 0; |
||||||
|
margin-top: 0; |
||||||
|
} |
||||||
|
|
||||||
|
.bottom-bar-fixed { |
||||||
|
position: fixed; |
||||||
|
bottom: 0; |
||||||
|
padding-top: 70rpx; |
||||||
|
width: 100%; |
||||||
|
} |
||||||
|
|
||||||
|
.main-money { |
||||||
|
position: relative; |
||||||
|
z-index: 1; |
||||||
|
} |
||||||
|
|
||||||
|
.van-tag { |
||||||
|
display: inline-block; |
||||||
|
padding: 0.3rem 0.4rem; |
||||||
|
position: absolute; |
||||||
|
right: 1px; |
||||||
|
font-size: 12px; |
||||||
|
top: 25%; |
||||||
|
background-color: #b9ffca; |
||||||
|
border-radius: 10rem 0 0 10rem; |
||||||
|
border-color: transparent; |
||||||
|
} |
||||||
|
|
||||||
|
.bg-main-color { |
||||||
|
min-height: 160rpx; |
||||||
|
} |
||||||
|
|
||||||
|
.to-top { |
||||||
|
position: relative; |
||||||
|
top: -140rpx; |
||||||
|
z-index: 1; |
||||||
|
} |
||||||
|
|
||||||
|
.cu-list { |
||||||
|
position: relative; |
||||||
|
top: -140rpx; |
||||||
|
z-index: 1; |
||||||
|
} |
||||||
|
|
||||||
|
.cu-list.grid>.cu-item [class*=cuIcon] { |
||||||
|
font-size: 75rpx; |
||||||
|
} |
||||||
|
|
||||||
|
.cu-avatar { |
||||||
|
background-color: transparent; |
||||||
|
} |
||||||
|
</style> |
||||||
Loading…
Reference in new issue