LSM_OIL_SITE/pages/operation-analysis/analysis/monthly.vue

// 昨日经营分析
<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">
					<area-month :chartData="detailData" />
				</view>
			</view>
			<view class="cu-modal bottom-modal" :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 class="cu-bar bg-white justify-end">
						<view class="action">
							<button class="cu-btn line-green text-green" @tap="hideModal">取消</button>
							<button class="cu-btn bg-green margin-left" @tap="onConfirm">确定</button>
						</view>
					</view>
				</view>
			</view>

		</view>
	</view>
</template>

<script>
	import areaMonth from '@/components/area-month.vue'
	import analysisCard from '@/components/analysis-card/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 + '-' + day,
				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).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
				}
				if (this.day < 10) {
					d = '0' + this.day
				} else {
					d = this.day
				}
				this.selDate = this.year + '-' + m + '-' + d
				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>