LSM_OIL_SITE/packageChart/operation-analysis/analysis/daily.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>
		<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 <= 12; i++) {
				months.push(i)
			}
			for (let i = 1; i <= 31; i++) {
				days.push(i)
			}
			return {
				title: 'picker-view',
				years: years,
				year: year,
				months: months,
				dialogModal: '',
				month: month,
				days: days,
				day: day,
				// value: [9999, month - 1, day - 1],
				value: [year, 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>