From f4e7782a86ae57d902a9e16b647d98e253f600e9 Mon Sep 17 00:00:00 2001
From: xk_guohonglei <2057494155@qq.com>
Date: Fri, 25 Sep 2020 18:16:52 +0800
Subject: [PATCH] =?UTF-8?q?=E5=88=86=E5=8C=85=E7=A7=BB=E5=8A=A8=E6=96=87?=
 =?UTF-8?q?=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packageChart/analysis-card.vue                |  85 +++++++
 packageChart/area-month.vue                   | 198 +++++++++++++++
 packageChart/area-time.vue                    | 193 ++++++++++++++
 .../operation-analysis/analysis/analysis.vue  |  39 +++
 .../operation-analysis/analysis/daily.vue     | 179 +++++++++++++
 .../operation-analysis/analysis/monthly.vue   | 180 +++++++++++++
 .../operation-analysis/operation-analysis.vue | 236 ++++++++++++++++++
 7 files changed, 1110 insertions(+)
 create mode 100644 packageChart/analysis-card.vue
 create mode 100644 packageChart/area-month.vue
 create mode 100644 packageChart/area-time.vue
 create mode 100644 packageChart/operation-analysis/analysis/analysis.vue
 create mode 100644 packageChart/operation-analysis/analysis/daily.vue
 create mode 100644 packageChart/operation-analysis/analysis/monthly.vue
 create mode 100644 packageChart/operation-analysis/operation-analysis.vue

diff --git a/packageChart/analysis-card.vue b/packageChart/analysis-card.vue
new file mode 100644
index 0000000..5a7de20
--- /dev/null
+++ b/packageChart/analysis-card.vue
@@ -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>
diff --git a/packageChart/area-month.vue b/packageChart/area-month.vue
new file mode 100644
index 0000000..b3b3cac
--- /dev/null
+++ b/packageChart/area-month.vue
@@ -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>
diff --git a/packageChart/area-time.vue b/packageChart/area-time.vue
new file mode 100644
index 0000000..f8697fc
--- /dev/null
+++ b/packageChart/area-time.vue
@@ -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>
diff --git a/packageChart/operation-analysis/analysis/analysis.vue b/packageChart/operation-analysis/analysis/analysis.vue
new file mode 100644
index 0000000..df37dd0
--- /dev/null
+++ b/packageChart/operation-analysis/analysis/analysis.vue
@@ -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>
diff --git a/packageChart/operation-analysis/analysis/daily.vue b/packageChart/operation-analysis/analysis/daily.vue
new file mode 100644
index 0000000..916eb4f
--- /dev/null
+++ b/packageChart/operation-analysis/analysis/daily.vue
@@ -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>
diff --git a/packageChart/operation-analysis/analysis/monthly.vue b/packageChart/operation-analysis/analysis/monthly.vue
new file mode 100644
index 0000000..39c2591
--- /dev/null
+++ b/packageChart/operation-analysis/analysis/monthly.vue
@@ -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>
diff --git a/packageChart/operation-analysis/operation-analysis.vue b/packageChart/operation-analysis/operation-analysis.vue
new file mode 100644
index 0000000..2cd7b24
--- /dev/null
+++ b/packageChart/operation-analysis/operation-analysis.vue
@@ -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>