uni-zhihuikuangshan-2/components/p-production-report-inner-2/p-production-report-inner-2.vue

<template>
	<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-show="index_active == 0">
					<view class="inner_content">
						<canvas style="width: 700upx; height:600upx;" canvas-id="canvasColumnStack" id="canvasColumnStack" class="charts"  @touchstart="touchColumn"></canvas>
					</view>
				</view>
				<view v-show="index_active == 1">
					<view class="inner_content">
						<canvas style="width: 700upx; height:2500upx;" canvas-id="canvasColumnStack_month" id="canvasColumnStack_month" class="charts"  @touchstart="touchColumn_month"></canvas>
					</view>
				</view>
				<view v-show="index_active == 2">
					<view class="inner_content">
						<canvas style="width: 700upx; height:600upx;" canvas-id="canvasColumnStack_year" id="canvasColumnStack_year" class="charts"  @touchstart="touchColumn_year"></canvas>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import uCharts from '@/components/u-charts/u-charts.js';
	var _self;
	
	// 周产量
	var canvaColumn=null;
	
	// 月产量
	var canvaColumn_month=null;
	
	// 年产量
	var canvaColumn_year=null;
   
	
	
	export default {
		name:"p-production-report-inner-2",
		props:[
			"mine",
			"org_num"
		],
		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: 0,
				// 年 月
				date: currentDate,
				// 
				date_year:currentDate_year,
				
				
				
				// 当前月
				month:""
				
			}
		},
		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');
			}
		},
		created() {
			this.month = (new Date().getFullYear()) + "-" + (new Date().getMonth()+1)
			// console.log(this.month)
			_self = this;
			this.cWidth = uni.upx2px(680);
			this.cHeight = uni.upx2px(500);
			
			this.cWidth_month = uni.upx2px(680);
			this.cHeight_month = uni.upx2px(2500);
			
			// 周产量
			this.getServerData_week();
			
			// 月产量
			this.getServerData_month(this.date);
			
			// 年产量
			this.getServerData_year(this.date_year);
			
		},
		methods: {
			// 产量趋势 选择列表
			bindPickerChange_active: function(e) {
				console.log('picker发送选择改变，携带值为', e.target.value)
				this.index_active = 0
				
				setTimeout(()=>{
					this.index_active = e.target.value
					
					if(this.index_active == 0){
						this.getServerData_week(this.date)
					}else if(this.index_active == 1){
						// uni.switchTab({
						// 	url:"../../tabbar/production/production",
						// 	animationType:"fade-in",
						// 	animationDuration:50
						// })
						// uni.navigateTo({
						// 	url:"../../production/p-i-metering/p-i-metering",
						// 	animationType:"fade-in",
						// 	animationDuration:150
						// })
						// console.log(this.date)
						this.date = this.month
						this.getServerData_month(this.month)
					}else if(this.index_active == 2){
						this.getServerData_year(this.date_year)
					}
					
				},100)
				
				
			},
			// 月
			bindDateChange: function(e) {
				this.date = e.target.value
				console.log(this.date)
				this.getServerData_month(this.date);
			},
			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;
				}else{
					year = year
				}
				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(this.date_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(){
				this.$p_api.coalmine_one_trend({
					type:"week",
					mine:this.mine,
					org_num:this.org_num
				}).then((res)=>{
					// console.log(res.data.data)
					
					let ColumnStack={
						categories:[],
						series:[
							{
								"name": "早班",
								"data": []
							},
							{
								"name": "中班",
								"data": []
							},
							{
								"name": "晚班",
								"data": []
							}
						],
					};
					
					const categories = res.data.data
					categories.map(function(item,index){
						// console.log(item.date,index)
						//新数组的项，用来盛放每一项中的各个参数，每次清空，这样避免改变sevm的值
						var sevm = {};
						//给每一项中的参数初始化并赋值
						sevm = item.date;
						//将项放进新的数组
						ColumnStack.categories[index] = sevm
					})
					
					res.data.data.map(function(item,index){
						//新数组的项，用来盛放每一项中的各个参数，每次清空，这样避免改变sevm的值
						var sevm = {};
						//给每一项中的参数初始化并赋值
						sevm = item.n1;
						//将项放进新的数组
						ColumnStack.series[0].data[index] = sevm
					})
					res.data.data.map(function(item,index){
						//新数组的项，用来盛放每一项中的各个参数，每次清空，这样避免改变sevm的值
						var sevm = {};
						//给每一项中的参数初始化并赋值
						sevm = item.n2;
						//将项放进新的数组
						ColumnStack.series[1].data[index] = sevm
					})
					res.data.data.map(function(item,index){
						//新数组的项，用来盛放每一项中的各个参数，每次清空，这样避免改变sevm的值
						var sevm = {};
						//给每一项中的参数初始化并赋值
						sevm = item.n3;
						//将项放进新的数组
						ColumnStack.series[2].data[index] = sevm
					})
					
					_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(date){
				this.$p_api.coalmine_one_trend({
					type:"month",
					date: date,
					mine:this.mine,
					org_num:this.org_num
				}).then((res)=>{
					// console.log(res.data.data)
					let ColumnStack_month={
						categories:[],
						series:[
							{
								"name": "晚班",
								"data": []
							}, {
								"name": "早班",
								"data": []
							}, {
								"name": "中班",
								"data": []
							}
						],
					}
				
					res.data.data.map(function(item,index){
						// console.log(item.date,index)
						//新数组的项，用来盛放每一项中的各个参数，每次清空，这样避免改变sevm的值
						var sevm = {};
						//给每一项中的参数初始化并赋值
						sevm = item.date;
						//将项放进新的数组
						ColumnStack_month.categories[index] = sevm
					})
					
					res.data.data.map(function(item,index){
						//新数组的项，用来盛放每一项中的各个参数，每次清空，这样避免改变sevm的值
						var sevm = {};
						//给每一项中的参数初始化并赋值
						sevm = item.n1;
						//将项放进新的数组
						ColumnStack_month.series[0].data[index] = sevm
					})
					res.data.data.map(function(item,index){
						//新数组的项，用来盛放每一项中的各个参数，每次清空，这样避免改变sevm的值
						var sevm = {};
						//给每一项中的参数初始化并赋值
						sevm = item.n2;
						//将项放进新的数组
						ColumnStack_month.series[1].data[index] = sevm
					})
					res.data.data.map(function(item,index){
						//新数组的项，用来盛放每一项中的各个参数，每次清空，这样避免改变sevm的值
						var sevm = {};
						//给每一项中的参数初始化并赋值
						sevm = item.n3;
						//将项放进新的数组
						ColumnStack_month.series[2].data[index] = sevm
					})
					
					
					
					_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(date){
				this.$p_api.coalmine_one_trend({
					type:"year",
					date: date,
					mine:this.mine,
					org_num:this.org_num
				}).then((res)=>{
					
					// console.log(res.data.data)
					
					let ColumnStack_year={
						categories:[],
						series:[
							{
								"name": "早班",
								"data": []
							}, {
								"name": "中班",
								"data": []
							}, {
								"name": "晚班",
								"data": []
							}
						],
					}
								
					res.data.data.map(function(item,index){
						// console.log(item.date,index)
						//新数组的项，用来盛放每一项中的各个参数，每次清空，这样避免改变sevm的值
						var sevm = {};
						//给每一项中的参数初始化并赋值
						sevm = item.date;
						//将项放进新的数组
						ColumnStack_year.categories[index] = sevm
					})
					
					res.data.data.map(function(item,index){
						//新数组的项，用来盛放每一项中的各个参数，每次清空，这样避免改变sevm的值
						var sevm = {};
						//给每一项中的参数初始化并赋值
						sevm = item.n1;
						//将项放进新的数组
						ColumnStack_year.series[0].data[index] = sevm
					})
					res.data.data.map(function(item,index){
						//新数组的项，用来盛放每一项中的各个参数，每次清空，这样避免改变sevm的值
						var sevm = {};
						//给每一项中的参数初始化并赋值
						sevm = item.n2;
						//将项放进新的数组
						ColumnStack_year.series[1].data[index] = sevm
					})
					res.data.data.map(function(item,index){
						//新数组的项，用来盛放每一项中的各个参数，每次清空，这样避免改变sevm的值
						var sevm = {};
						//给每一项中的参数初始化并赋值
						sevm = item.n3;
						//将项放进新的数组
						ColumnStack_year.series[2].data[index] = sevm
					})
					
					_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">
	
	.content{
		width: 700rpx;
		margin-top: 16rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 3rpx 29rpx 0rpx 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;
			}
		}
		.title_box{
			height: 96rpx;
			border-bottom: 2rpx solid #f3f3f3;
			
			display: flex;
			align-items: center;
			.box{
				margin-left: 22rpx;
				height: 50rpx;
				border-radius: 14rpx;
				border: 1rpx 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>