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