uni-zhks-app/pages/p-i-statistics/p-i-statistics.vue

<template>
	<view>
		<view class="content">
			<view class="time">
				2020年11月6日 星期五 10:15:32
			</view>
		</view>
		<view class="content">
			<view class="title">
				今日产量
			</view>
			<view class="inner">
				<canvas style="width: 720upx; height:500upx;" canvas-id="canvasRing" id="canvasRing" @touchstart="touchRing"></canvas>
			</view>
		</view>
		<!-- 产量趋势 -->
		<view class="content">
			<view class="title_box">
				<picker mode="selector" :range="array_active" :value="index_active" @change="bindPickerChange_active">
					<view class="box">
						<view>{{array_active[index_active]}}</view>
						<view class="icon">
							<uni-icons type="arrowdown"></uni-icons>
						</view>
					</view>
				</picker>
				
				<view v-if="index_active==1">
					<picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange" fields="month">
						<view class="box">
							<view>{{date}}</view>
						</view>
					</picker>
				</view>
				
				<view v-if="index_active==2">
					<picker mode="date" :value="date_year" :start="startDate_year" :end="endDate_year" @change="bindDateChange_year" fields="year">
						<view class="box">
							<view>{{date_year}}</view>
						</view>
					</picker>
				</view>
				
			</view>
			<view class="inner">
				<view v-if="index_active == 0">
					<view class="inner_content">
						<canvas style="width: 720upx; height:600upx;" canvas-id="canvasColumnStack" id="canvasColumnStack" class="charts"  @touchstart="touchColumn"></canvas>
					</view>
				</view>
				<view v-if="index_active == 1">
					<view class="inner_content">
						<canvas style="width: 720upx; height:2500upx;" canvas-id="canvasColumnStack_month" id="canvasColumnStack_month" class="charts"  @touchstart="touchColumn_month"></canvas>
					</view>
				</view>
				<view v-if="index_active == 2">
					<view class="inner_content">
						<canvas style="width: 720upx; height:600upx;" canvas-id="canvasColumnStack_year" id="canvasColumnStack_year" class="charts"  @touchstart="touchColumn_year"></canvas>
					</view>
				</view>
			</view>
		
			<view class="inner_bottom">
				<view class="list">
					<view class="item item_title">
						<view class="item_box">日期</view>
						<view class="item_box">晚班</view>
						<view class="item_box">早班</view>
						<view class="item_box">中班</view>
						<view class="item_box">日产量</view>
					</view>
					<view class="item">
						<view class="item_box">8-22</view>
						<view class="item_box">3000吨</view>
						<view class="item_box">10000吨</view>
						<view class="item_box">21231吨</view>
						<view class="item_box">110000吨</view>
					</view>
					<view class="item">
						<view class="item_box">8-22</view>
						<view class="item_box">3000吨</view>
						<view class="item_box">10000吨</view>
						<view class="item_box">21231吨</view>
						<view class="item_box">110000吨</view>
					</view>
					<view class="item">
						<view class="item_box">8-22</view>
						<view class="item_box">3000吨</view>
						<view class="item_box">10000吨</view>
						<view class="item_box">21231吨</view>
						<view class="item_box">110000吨</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import uCharts from '@/components/u-charts/u-charts.js';
	var _self;
	// 今日产量
	var canvaRing = null;
	
	// 周产量
	var canvaColumn=null;
	
	// 月产量
	var canvaColumn_month=null;
	
	// 年产量
	var canvaColumn_year=null;
   
	
	
	export default {
		data() {
			const currentDate = this.getDate({
				format: true
			})
			const currentDate_year = this.getDate_year({
				format: true
			})
			return {
				cWidth: '',
				cHeight: '',
				pixelRatio: 1,
				// serverData: '',
				
				
				// 月
				cWidth_month: '',
				cHeight_month: '',
				pixelRatio_month: 1,
				cHeight_month:'',
				
				// 周产量
				
				// 产量趋势
				array_active: ['周产量趋势', '月产量趋势','年产量趋势'],
				index_active: 1,
				// 年 月
				date: currentDate,
				// 
				date_year:currentDate_year,
				
			}
		},
		computed: {
			// 月
			startDate() {
				return this.getDate('start');
			},
			endDate() {
				return this.getDate('end');
			},
			// 年
			startDate_year() {
				return this.getDate_year('start');
			},
			endDate_year() {
				return this.getDate_year('end');
			}
		},
		onLoad() {
			_self = this;
			this.cWidth = uni.upx2px(720);
			this.cHeight = uni.upx2px(500);
			
			this.cWidth_month = uni.upx2px(720);
			this.cHeight_month = uni.upx2px(2500);
			// 今日产量
			this.getServerData();
			// 周产量
			this.getServerData_week();
			
			// 月产量
			this.getServerData_month();
			
			// 年产量
			this.getServerData_year();
			
		},
		methods: {
			getServerData() {

				let Ring = {
					series: [{
						"name": "晚班",
						"data": 10000
					}, {
						"name": "中班",
						"data": 3000
					}, {
						"name": "早班",
						"data": 1000
					}, ]
				}
				_self.showRing("canvasRing", Ring);

			},
			
			showRing(canvasId, chartData) {
				canvaRing = new uCharts({
					$this: _self,
					canvasId: canvasId,
					type: 'ring',
					fontSize: 11,
					// 图裂配置
					// legend: true,
					legend: {
						position: "right",
						lineHeight: 30,
					},
					title: {
						name: '今日产量',
						color: '#666666',
						fontSize: 15 * _self.pixelRatio,
						offsetY: 0 * _self.pixelRatio,
					},
					subtitle: {
						name: '14000吨',
						color: '#666666',
						fontSize: 20 * _self.pixelRatio,
						offsetY: 0 * _self.pixelRatio,
					},
					extra: {
						pie: {
							offsetAngle: -45,
							ringWidth: 30 * _self.pixelRatio,
							labelWidth: 20
						}
					},
					background: '#FFFFFF',
					pixelRatio: _self.pixelRatio,
					
					series: chartData.series,
					animation: true,
					width: _self.cWidth * _self.pixelRatio,
					height: _self.cHeight * _self.pixelRatio,
					disablePieStroke: true,
					// 百分比指示 关
					dataLabel: false,
				});
			},
			touchRing(e) {
				canvaRing.showToolTip(e, {
					format: function(item) {
						return item.name + ':' + item.data + '吨'
					}
				});
			},

			// 产量趋势 选择列表
			bindPickerChange_active: function(e) {
				console.log('picker发送选择改变，携带值为', e.target.value)
				this.index_active = e.target.value
				
				if(this.index_active == 0){
					this.getServerData_week()
				}else if(this.index_active == 1){
					uni.switchTab({
						url:"../tabbar/production/production",
						animationType:"fade-in",
						animationDuration:150
					})
					uni.navigateTo({
						url:"../../p-i-statistics/p-i-statistics",
						animationType:"fade-in",
						animationDuration:150
					})
				}else if(this.index_active == 2){
					this.getServerData_year()
				}
			},
			// 月
			bindDateChange: function(e) {
				this.date = e.target.value
				console.log(this.date)
				this.getServerData_month();
			},
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();

				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;
				return `${year}-${month}`;
			},
			
			// 年
			bindDateChange_year: function(e) {
				this.date_year = e.target.value
				console.log(this.date_year)
				
				this.getServerData_year()
			},
			getDate_year(type) {
				const date = new Date();
				let year = date.getFullYear();
			
				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				}
				return `${year}`;
			},
			
			
			
			// 周产量
			getServerData_week(){
				let ColumnStack={
					categories:["11-16", "11-17", "11-18", "11-19", "11-20", "11-21"],
					series:[
						{
							"name": "晚班",
							"data": [7652.62, 10443.55, 15854.48, 15241.27, 13046.29, 12791.2]
						}, {
							"name": "早班",
							"data": [655.55, 6.05, 363.9, 2207.58, 1916.27, 1796.61]
						}, {
							"name": "中班",
							"data": [14719.67, 14176.65, 10660.04, 12575.22, 12125.56, 13293.5]
						}
					],
				};
				_self.showColumnStack("canvasColumnStack",ColumnStack);
			
			},
			showColumnStack(canvasId,chartData){
				canvaColumn=new uCharts({
					$this:_self,
					canvasId: canvasId,
					type: 'column',
					legend:{show:true},
					fontSize:11,
					background:'#FFFFFF',
					pixelRatio:_self.pixelRatio,
					animation: true,
					categories: chartData.categories,
					legend:{
						position:'top',
						margin:10,
						
					},
					series: chartData.series,
					xAxis: {
						disableGrid:true,
					},
					yAxis: {
						//disabled:true
					},
					dataLabel: false,
					width: _self.cWidth*_self.pixelRatio,
					height: _self.cHeight*_self.pixelRatio,
					extra: {
						column: {
							type:'stack',
							width: _self.cWidth*_self.pixelRatio*0.5/chartData.categories.length
						}
					  }
				});
				
			},
			touchColumn(e){
				canvaColumn.showToolTip(e, {
					format: function (item, category) {
						return category + ' ' + item.name + ':' + item.data 
					}
				});
			},

			// 月产量
			getServerData_month(){
				let ColumnStack_month={
					categories:["11-01", "11-02", "11-03", "11-04", "11-05","11-06", "11-07","11-08","11-09","11-10","11-11","11-12","11-13", "11-14", "11-15","11-16", "11-17","11-18","11-19","11-20","11-21","11-22","11-23", "11-24", "11-25","11-26", "11-27","11-28","11-29"],
					series:[
						{
							"name": "晚班",
							"data": [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29]
						}, {
							"name": "早班",
							"data": [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29]
						}, {
							"name": "中班",
							"data": [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29]
						}
					],
				};
				_self.showColumnStack_month("canvasColumnStack_month",ColumnStack_month);
			
			},
			showColumnStack_month(canvasId,chartData){
				canvaColumn_month=new uCharts({
					$this:_self,
					canvasId: canvasId,
					type: 'column',
					legend:{show:true},
					fontSize:11,
					background:'#FFFFFF',
					pixelRatio:_self.pixelRatio_month,
					animation: true,
					rotate:true,
					categories: chartData.categories,
					legend:{
						show:false,
						position:'top',
						margin:10,
						
					},
					series: chartData.series,
					xAxis: {
						disableGrid:true,
					},
					yAxis: {
						//disabled:true
					},
					dataLabel: false,
					width: _self.cWidth_month*_self.pixelRatio_month,
					height: _self.cHeight_month*_self.pixelRatio_month,
					extra: {
						column: {
							type:'stack',
							width: _self.cWidth_month*_self.pixelRatio_month*0.5/chartData.categories.length
						}
					  }
				});
				
			},
			touchColumn_month(e){
				canvaColumn_month.showToolTip(e, {
					format: function (item, category) {
						return item.name + ':' + item.data 
					}
				});
			},
			
					


			// 年产量
			getServerData_year(){
				let ColumnStack_year={
					categories:["1", "2", "3", "4", "5","6", "7", "8", "9", "10", "11","12"],
					series:[
						{
							"name": "晚班",
							"data": [7652.62, 10443.55, 15854.48, 15241.27, 13046.29, 12791.2,7652.62, 10443.55, 15854.48, 15241.27, 13046.29, 12791.2]
						}, {
							"name": "早班",
							"data": [655.55, 6.05, 363.9, 2207.58, 1916.27, 1796.61,655.55, 6.05, 363.9, 2207.58, 1916.27, 1796.61]
						}, {
							"name": "中班",
							"data": [14719.67, 14176.65, 10660.04, 12575.22, 12125.56, 13293.5,655.55, 6.05, 363.9, 2207.58, 1916.27, 1796.61]
						}
					],
				};
				_self.showColumnStack_year("canvasColumnStack_year",ColumnStack_year);
			
			},
			showColumnStack_year(canvasId,chartData){
				canvaColumn_year=new uCharts({
					$this:_self,
					canvasId: canvasId,
					type: 'column',
					legend:{show:true},
					fontSize:11,
					background:'#FFFFFF',
					pixelRatio:_self.pixelRatio,
					animation: true,
					categories: chartData.categories,
					legend:{
						position:'top',
						margin:10,
						
					},
					series: chartData.series,
					xAxis: {
						disableGrid:true,
					},
					yAxis: {
						//disabled:true
					},
					dataLabel: false,
					width: _self.cWidth*_self.pixelRatio,
					height: _self.cHeight*_self.pixelRatio,
					extra: {
						column: {
							type:'stack',
							width: _self.cWidth*_self.pixelRatio*0.5/chartData.categories.length
						}
					  }
				});
				
			},
			touchColumn_year(e){
				canvaColumn_year.showToolTip(e, {
					format: function (item, category) {
						return item.name + ':' + item.data 
					}
				});
			},
			
					
		
		}
	}
</script>


<style lang="scss">
	page{
		background-color: #f3f3f3;
		padding: 15rpx;
		box-sizing: border-box;
	}
	.content{
		margin-top: 16rpx;
		background: #FFFFFF;
		box-shadow: 0px 3rpx 29rpx 0px rgba(59, 74, 116, 0.14);
		border-radius: 20rpx;
		
		.time{
			line-height: 94rpx;
			padding: 0 20rpx;
			box-sizing: border-box;
		}
		
		.title{
			line-height: 96rpx;
			text-align: center;
			
			
			font-size: 30rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #232627;
			
			border-bottom: 2rpx solid #f3f3f3;
		}
		.inner{
			min-height: 200rpx;
			.inner_content{
				margin-top: 20rpx;
			}
		}
		.inner_bottom{
			padding-bottom: 20rpx;
			.list{
				box-sizing: border-box;
				padding: 0 10rpx;
				.item{
					width: 700rpx;
					height: 80rpx;
					display: flex;
					align-items: center;
					text-align: center;
					border-bottom: 1px solid #f3f3f3;
					.item_box{
						width: 140rpx;
						font-size: 27rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #232627;
					}
				}
				.item_title{
					background: #F3F6FA;
				}
			}
		}
		
		.title_box{
			height: 96rpx;
			border-bottom: 2rpx solid #f3f3f3;
			
			display: flex;
			align-items: center;
			.box{
				margin-left: 22rpx;
				height: 50rpx;
				border-radius: 14rpx;
				border: 1px solid #BDC3C7;
				
				box-sizing: border-box;
				padding: 0 20rpx;
				// 文本
				font-size: 28rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #232627;
				line-height: 50rpx;
				
				display: flex;
				.icon{
					margin-left: 10rpx;
				}
			}
		}
	}
</style>