caoliancun/LSM_OIL_SITE
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

老登陆，经营分析，被挤掉提示

Browse Source
This commit is contained in:
xk_guohonglei
2020-09-05 11:53:19 +08:00
parent 395ebd432d
commit a5fe20c721
14 changed files with 1065 additions and 329 deletions
Download Patch File Download Diff File Expand all files Collapse all files

85
components/analysis-card/analysis-card.vue Normal file
View File

@@ -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="oil-main-color">{{basicData.totalCount}}</text>
</view>
</view>
<view class="padding text-center flex-sub">
<text>客单均价</text>
<view class="padding-sm">
<text class="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="oil-main-color">{{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>

198
components/area-month.vue Normal file
View File

@@ -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 > 0 ? val.toFixed(0) : 0 + '单' }
},
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>

167
components/area-time.vue
View File

@@ -1,39 +1,32 @@
<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-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-->
@@ -47,6 +40,13 @@ import { isJSON } from '@/common/checker.js';
var _self;
var canvaLineA = null;
export default {
props: {
chartData: {
type: Array,
default: []
}
},
data() {
return {
cWidth: '',
@@ -70,66 +70,39 @@ export default {
//#endif
this.cWidth = uni.upx2px(650);
this.cHeight = uni.upx2px(500);
this.getServerData();
console.log('chartData', this.chartData)
},
watch: {
chartData: {
handler(newVal, oldVal) {
console.log('深度监听', newVal, oldVal)
this.chartData = newVal
this.getServerData()
},
deep: true
}
},
methods: {
getServerData() {
console.log('/')
uni.request({
url: 'https://www.ucharts.cn/data.json',
data: {
},
success: function (res) {
console.log(res.data.data)
let LineA = {
series: [{
name: '交易时段分布', data: [
[10000, 75], [50000, 35], [150000, 55], [170000, 35], [190000, 75],
[210000, 25], [280000, 5], [450000, 95], [460000, 5], [470000, 95],
[490000, 5]
]
},
{
name: '交易时段分布', data: [
[30000, 77], [50000, 25], [170000, 50], [200000, 40], [210000, 25],
[220000, 45], [280000,55], [450000,19], [460000, 30], [470000, 88],
[490000, 95]
]
}]
};
_self.textarea = JSON.stringify(res.data.data.LineA);
console.log('-----------------------')
console.log('res.data.data.LineA', res.data.data.LineA)
console.log('_self.textarea', _self.textarea)
console.log('LineA', LineA)
console.log('-----------------------')
_self.showLineA("canvasLineA", LineA);
},
fail: () => {
_self.tips = "网络错误，小程序端请检查合法域名";
},
});
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, returnType) {
var date = new Date();
date.setTime(timeStamp * 1000);
console.log('\n\n------ begin:', timeStamp, ' ------')
console.log('')
console.log('------ end: ', date.setTime(timeStamp * 1000), ' ------\n\n')
var y = date.getFullYear();
var m = date.getMonth() + 1;
m = m < 10 ? ('0' + m) : m;
var d = date.getDate();
d = d < 10 ? ('0' + d) : d;
var h = date.getHours();
h = h < 10 ? ('0' + h) : h;
var minute = date.getMinutes();
var second = date.getSeconds();
minute = minute < 10 ? ('0' + minute) : minute;
second = second < 10 ? ('0' + second) : second;
if (returnType == 'str') { return h + ':' + minute; }
// return [y, m, d, h, minute, second];
// return [y + '-'+ m + '-'+ d +' '+ h+ ':'+ minute + ':' + second];
formatDateTime(timeStr) {
console.log('-----------------------')
console.log('timeStr', timeStr)
console.log('-----------------------')
return (timeStr > 0 ? timeStr.toFixed(0) : 0) + ':00'
},
showLineA(canvasId, chartData) {
canvaLineA = new uCharts({
@@ -154,16 +127,16 @@ export default {
boundaryGap: 'justify',
splitNumber: 5,
format: (val) => {
console.log('----', val, '-----')
console.log('----', this.formatDateTime(val, 'str'), '-----')
return this.formatDateTime(val, 'str') }
// 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.toFixed(0) + '元' }
format: (val) => { return val>0?val.toFixed(0):0 + '单' }
},
width: _self.cWidth * _self.pixelRatio,
height: _self.cHeight * _self.pixelRatio,
@@ -178,11 +151,11 @@ export default {
},
touchLineA(e) {
var that = this
var that = this
canvaLineA.showToolTip(e, {
format: function (item, category) {
console.log(' item.data', item.data)
return that.formatDateTime(item.data[0], 'str') +'交易金额'+ item.data[1] + '元'
return (item.data[0] + ':00 ') + item.data[1] + '单 ' + '交易金额' + item.data[2] + '元'
}
});
},