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

<template>
	<view class="inner">
		<view class="img">
			<canvas canvas-id="canvasRing" id="canvasRing" @touchstart="touchRing" style="width: 700upx; height:500upx;"></canvas>
		</view>

		<view class="container">
			<view class="title">
				<view class="row">
					<view class="item">
						<view class="icon"></view>
						<view class="name"> </view>
					</view>
					<view class="item">
						<view class="icon"></view>
						<view class="name">早班</view>
					</view>
					<view class="item">
						<view class="icon"></view>
						<view class="name">中班</view>
					</view>
					<view class="item">
						<view class="icon"></view>
						<view class="name">晚班</view>
					</view>
				</view>
			</view>
			
			
		
			<view class="content">
				<view class="row">
					<view class="item">当日</view>
					<view class="item">
						<view class="icon"></view>
						<view class="num">{{data[0].n1}}吨</view>
					</view>
					<view class="item">
						<view class="icon"></view>
						<view class="num">{{data[0].n2}}吨</view>
					</view>
					<view class="item">
						<view class="icon"></view>
						<view class="num">{{data[0].n3}}吨</view>
					</view>
				</view>
				<view class="row">
					<view class="item">昨日</view>
					<view class="item">
						<view class="icon"></view>
						<view class="num">{{data[1].n1}}吨</view>
					</view>
					<view class="item">
						<view class="icon"></view>
						<view class="num">{{data[1].n2}}吨</view>
					</view>
					<view class="item">
						<view class="icon"></view>
						<view class="num">{{data[1].n3}}吨</view>
					</view>
				</view>
				<view class="row">
					<view class="item">前日</view>
					<view class="item">
						<view class="icon"></view>
						<view class="num">{{data[2].n1}}吨</view>
					</view>
					<view class="item">
						<view class="icon"></view>
						<view class="num">{{data[2].n2}}吨</view>
					</view>
					<view class="item">
						<view class="icon"></view>
						<view class="num">{{data[2].n3}}吨</view>
					</view>
				</view>
			</view>
	
	
	
		</view>
	</view>
</template>

<script>
	import uCharts from '@/components/u-charts/u-charts.js';
	var _self;
	var canvaRing = null;

	export default {
		props:[
			"mine",
			"org_num"
		],
		data() {
			return {
				cWidth: '',
				cHeight: '',
				pixelRatio: 1,
				serverData: '',
				
				data:[
					{
						n1:0,
						n2:0,
						n3:0
					},
					{
						n1:0,
						n2:0,
						n3:0
					},
					{
						n1:0,
						n2:0,
						n3:0
					}
				]
			}
		},
		mounted() {
			_self = this;
			this.cWidth = uni.upx2px(700);
			this.cHeight = uni.upx2px(500);
			this.getServerData();
		},
		methods: {
			getServerData() {
				this.$p_api.coalmine_days_output({
					mine:this.mine,
					org_num:this.org_num
				}).then((res)=>{
					// console.log(res)
					
					this.data = res.data.data
					// console.log(this.data)
					
					let Ring = {
						"series": [{
							"name": "早班",
							"data": 0
						}, {
							"name": "中班",
							"data": 0
						}, {
							"name": "晚班",
							"data": 0
						}],
						"total":0
					};
					
					Ring.total = res.data.data[0].total
					
					Ring.series[0].data = res.data.data[0].n1
					Ring.series[1].data = res.data.data[0].n2
					Ring.series[2].data = res.data.data[0].n3
					
					_self.showRing("canvasRing", Ring);
				})
				
			},
			showRing(canvasId, chartData) {
				canvaRing = new uCharts({
					$this: _self,
					canvasId: canvasId,
					type: 'ring',
					fontSize: 11,
					legend: {
						show: true,
						position: 'right',
						lineHeight: 40,
					},
					title: {
						name: chartData.total + ' ',
						color: '#000000',
						fontSize: 20 * _self.pixelRatio,
						offsetY: 20 * _self.pixelRatio,
					},
					subtitle: {
						name: "总产量",
						color: '#666666',
						fontSize: 14 * _self.pixelRatio,
						offsetY: -30 * _self.pixelRatio,
					},
					extra: {
						pie: {
							offsetAngle: -90,
							ringWidth: 20 * _self.pixelRatio,
							labelWidth: 15
						}
					},
					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 + ' 吨'
					}
				});
			},
		}

	}
</script>

<style lang="scss">
	.inner {
		padding-bottom: 40rpx;
	}

	.img {
		height: 500rpx;
	}

	.container {
		.title {
			.row {
				display: flex;

				.item {
					width: 165rpx;

					display: flex;
					align-items: center;
					justify-content: center;

					line-height: 72rpx;
					border-bottom: 1px solid #eee;

					.icon {
						width: 16rpx;
						height: 16rpx;
						border-radius: 50%;
					}

					.name {
						margin-left: 16rpx;
						font-size: 20rpx;
						color: #9a9a9a;
					}
				}

				.item:nth-child(2) .icon {
					background-color: #00A0EC;
				}

				.item:nth-child(3) .icon {
					background-color: #F7BE3B;
				}

				.item:nth-child(4) .icon {
					background-color: #FFBEAD;
				}
			}
		}

		.content {
			padding: 0 20rpx;

			.row {
				display: flex;

				.item {
					width: 165rpx;

					display: flex;
					align-items: center;
					justify-content: center;


					line-height: 72rpx;
					border-bottom: 1px solid #eee;

					color: #9a9a9a;
					font-size: 20rpx;

					.icon {
						width: 16rpx;
						height: 16rpx;
						border-radius: 50%;
					}

					.num {
						margin-left: 16rpx;
						font-size: 24rpx;

						color: #1e1e1e;

					}
				}

				.item:nth-child(2) .icon {
					background-color: #00A0EC;
				}

				.item:nth-child(3) .icon {
					background-color: #F7BE3B;
				}

				.item:nth-child(4) .icon {
					background-color: #FFBEAD;
				}
			}
		}
	}
</style>