<template>
	<view class="content">
		<scroll-view class="data_body" scroll-y style="height:100%">
			<view class="view_item">
				<view class="progress_circle">
					<view v-for="(item,index) in CircleData" :key="index" :class="['progress_block','block_'+index]">
						<view class="name">{{item.series[0].name}}</view>
						<!-- <view class="value">{{item.series[0].value}}</view> -->
						<view class="charts-box arcbar" style="height: 180rpx;width: 60%;">
							<qiun-data-charts type="arcbar" :chartData="item" :canvas2d="canvas2d"
								:canvasId="'four_a_'+index" :resshow="delayload"
								:opts="{title:{name:item.series[0].precent,color:item.series[0].color,fontSize:15},subtitle:{name:'',color:'#666666',fontSize:12},extra:{arcbar:{backgroundColor:item.series[0].backgroundColor}}}" />
						</view>
						<view class="planet">
							<view class="planet_shadow"></view>
							<view class="crater1"></view>
							<view class="crater2"></view>
							<view class="crater3"></view>
							<view class="crater4"></view>
						</view>
						<view class="star" :class="['star'+index]"></view>
						<view class="star pink" :class="['star'+index]"></view>
						<view class="star blue" :class="['star'+index]"></view>
						<view class="star yellow" :class="['star'+index]"></view>
					</view>
				</view>
			</view>
			<view class="split_line"></view>
			<view class="friend_operate">
				<view class="title">工单状态分布
				</view>
				<view v-if="delayload" class="charts-box" style="">
					<qiun-data-charts type="ring" canvasId="four_b" :canvas2d="canvas2d" :resshow="delayload"
						:opts="{legend:{position: 'bottom'},title:{name: '',},subtitle: {name: ''},extra:{ring:{customRadius:'55'}}}"
						:chartData="ProductRateData" style="height: 350px;" />
				</view>
			</view>
			<view class="split_line"></view>
			<!--概览-->
			<view class="friend_operate">
				<text-block :content="CardData"></text-block>
			</view>
			<view class="friend_operate">
				<view class="title">本周报工产量</view>
				<view v-if="delayload" class="charts-box" style="height: 300px;">
					<qiun-data-charts type="line" canvasId="four_c" :canvas2d="canvas2d" :resshow="delayload"
						:chartData="TrendData" />
				</view>
			</view>
		</scroll-view>
	</view>
</template>
<script>
	import CircleData from "./json/user-server/1.json"
	import {
		listPwo,
		listPo,
		listReport,
		reportRate
	} from '@/api/mes/pwoDraw.js'
	import {
		getWeekReport,
		getPwoStatus,
		getProduceReport,
	} from '@/api/mes/jobIn.js'
	export default {
		mounted() {
			uni.showLoading();
			//获取饼图数据
			this.getStatus();
			this.getReport();
			this.getNum();
			this.getRate();
			setTimeout(() => {
				this.delayload = true;
				uni.hideLoading();
			}, 1000)
		},
		data() {
			return {
				value: new Date(),
				CircleData: CircleData,
				ProductRateData: {},
				TrendData: [],
				CardData: [],
				isRank: true,
				canvas2d: this.$config.ISCANVAS2D,
				delayload: false, //延时加载图表，否则会出现图表加载完后定位错乱
				//饼图数据
				status1: 0,
				status2: 0,
				status3: 0,
				status4: 0,
				status5: 0,
				status6: 0,
				status7: 0,
				status8: 0,
				status9: 0,
				status10: 0,
				status11: 0,
				status12: 0,
				status13: 0,
				//卡片数据
				dayAddedPo: 0,
				dayAddedPwo: 0,
				dayAddedReport: 0,
				dayAvgQltyRate: 0,
				//折线图数据
				data: [
					0, 0, 0, 0, 0, 0, 0,
				],
				finishValue: 0,
				defectValue: 0,
			}
		},
		methods: {
			reset() {
				this.status1 = 0;
				this.status2 = 0;
				this.status3 = 0;
				this.status4 = 0;
				this.status5 = 0;
				this.status6 = 0;
				this.status7 = 0;
				this.status8 = 0;
				this.status9 = 0;
				this.status10 = 0;
				this.status11 = 0;
				this.status12 = 0;
				this.status13 = 0;
				this.dayAddedPo = 0;
				this.dayAddedPwo = 0;
				this.dayAddedReport = 0;
				this.data = [0, 0, 0, 0, 0, 0, 0];
			},
			getTime() {
				var year = this.value.getFullYear() // 年
				var month = this.value.getMonth() + 1 < 10 ? "0" + (this.value.getMonth() + 1) : this.value.getMonth() + 1;
				var day = this.value.getDate() < 10 ? "0" + this.value.getDate() : this.value.getDate();
				var currentTime = year + '-' + month + '-' + day;
				return currentTime;
			},
			async getStatus() {
				this.reset();
				await getPwoStatus().then((resp) => {
					let data = resp.data;
					this.status1 = data.status1 ? data.status1 : 0;
					this.status2 = data.status2 ? data.status2 : 0;
					this.status3 = data.status3 ? data.status3 : 0;
					this.status4 = data.status4 ? data.status4 : 0;
					this.status5 = data.status5 ? data.status5 : 0;
					this.status6 = data.status6 ? data.status6 : 0;
					this.status7 = data.status7 ? data.status7 : 0;
					this.status8 = data.status8 ? data.status8 : 0;
					this.status9 = data.status9 ? data.status9 : 0;
					this.status10 = data.status10 ? data.status10 : 0;
					this.status11 = data.status11 ? data.status11 : 0;
					this.status12 = data.status12 ? data.status12 : 0;
					this.status13 = data.status13 ? data.status13 : 0;
				});
				this.getBarData();
			},
			getBarData() {
				this.ProductRateData = {
					"series": [{
							"name": "计划中",
							"data": this.status1,
							"color": "#2fc25b"
						},
						{
							"name": "已生成作业",
							"data": this.status2,
							"color": "#facc14"
						},
						{
							"name": "已投料",
							"data": this.status3,
							"color": "#f04864"
						},
						{
							"name": "已领料",
							"data": this.status4,
							"color": "#8543e0"
						},
						{
							"name": "已开工",
							"data": this.status5,
							"color": "#51c2d5"
						},
						{
							"name": "暂停",
							"data": this.status6,
							"color": "#C8AB7E"
						}, {
							"name": "已完成",
							"data": this.status7,
							"color": "#81A1C6"
						}, {
							"name": "已领料",
							"data": this.status8,
							"color": "#C185BB"
						}, {
							"name": "结案",
							"data": this.status9,
							"color": "#4BA2FB"
						}, {
							"name": "取消",
							"data": this.status1,
							"color": "#98AFA7"
						}, {
							"name": "待入库",
							"data": this.status10,
							"color": "#9DD86E"
						}, {
							"name": "待转出",
							"data": this.status11,
							"color": "#DE68C4"
						}, {
							"name": "已转出",
							"data": this.status12,
							"color": "#BF2A39"
						}, {
							"name": "其他",
							"data": this.status13,
							"color": "#266186"
						},
					]
				}
				console.log(this.ProductRateData)
			},
			async getReport() {
				await getWeekReport().then(async res => {
					var now = new Date();
					var today = now.getDay();
					//获取当前时间所在的周一的日期
					const startOfWeek = new Date(
						now.getFullYear(),
						now.getMonth(),
						now.getDate() - (today === 0 ? 6 : today - 1)
					);
					// 当前周的结束日
					const endOfWeek = new Date(
						startOfWeek.getTime() + 7 * 24 * 60 * 60 * 1000
					);
					//将所有属于当前周的数据都存入新的数组里
					const dataThisWeek = res.data
						.filter((item) => {
							const date = new Date(item.createTime);
							return date >= startOfWeek && date < endOfWeek;
						})
						.map((item) => {
							// 获取星期几，值为 0（周日）到 6（周六）
							const dayOfWeek = new Date(item.createTime).getDay();
							// 将数字转换为中文星期表示
							const dayOfWeekStr = [0, 1, 2, 3, 4, 5, 6][dayOfWeek];
							// 将星期几加入原始数据中
							return {
								...item,
								dayOfWeek: dayOfWeekStr
							};
						});
					for (var i = 0; i < dataThisWeek.length; i++) {
						switch (dataThisWeek[i].dayOfWeek) {
							case 0:
								this.data[6] += dataThisWeek[i].reportNumber;
								break;
							case 1:
								this.data[0] += dataThisWeek[i].reportNumber;
								break;
							case 2:
								this.data[1] += dataThisWeek[i].reportNumber;
								break;
							case 3:
								this.data[2] += dataThisWeek[i].reportNumber;
								break;
							case 4:
								this.data[3] += dataThisWeek[i].reportNumber;
								break;
							case 5:
								this.data[4] += dataThisWeek[i].reportNumber;
								break;
							case 6:
								this.data[5] += dataThisWeek[i].reportNumber;
								break;
							default:
								this.reset();
								break;
						}
					}
				});
				this.getLineData();
			},
			getLineData() {
				// 获取坐标轴刻度最大值
				const maxVal = Number(Math.max(...this.data));
				this.TrendData = {
					"categories": [
						"周一",
						"周二",
						"周三",
						"周四",
						"周五",
						"周六",
						"周日"
					],
					"series": [{
						"name": "报工产量",
						"data": this.data,
						"type": "line",
						"style": "curve",
						"addPoint": true,
						"color": "#DF297D",
						"unit": ""
					}],
					"yAxis": {
						"calibration": true,
						"position": "left",
						"min": 0,
						"max": maxVal,
						"title": "产量",
						"titleFontSize": 12,
						"unit": "",
						"tofix": 0
					},
					"targetAdd": "9%"
				}
			},
			async getNum() {
				this.reset();
				getProduceReport().then((resp) => {
					let data = resp.data;
					this.dayAddedPo = data.todayAddedPo;
					this.dayAddedPwo = data.todayAddedPwo;
					this.dayAddedReport = data.todayAddedReport;
				});
				const currentDate = new Date();
				let endTime = this.getTime(currentDate);
				//获取过去30天
				const oldDate = new Date();
				oldDate.setDate(currentDate.getDate() - 30);
				let startTime = this.getTime(oldDate);

				await reportRate({
					mesPwoReportType: '2',
					queryStartTime: startTime,
					queryEndTime: endTime,
				}).then((result) => {
					console.log(result);
					this.dayAvgQltyRate = result.data;
				});
				// //列出订单数量
				// listPo().then(res => {
				// 	for (var i = 0; i < res.rows.length; i++) {
				// 		if (this.getTime() == (res.rows[i].createTime === undefined ? '' : res.rows[i]
				// 				.createTime.slice(0, 10))) {
				// 			this.dayAddedPo++;

				// 		}
				// 	}
				// });
				// //列出报工数量
				// listReport().then(res => {
				// 	for (var i = 0; i < res.rows.length; i++) {
				// 		if (this.getTime() == (res.rows[i].createTime === undefined ? '' : res.rows[i]
				// 				.createTime.slice(0, 10))) {
				// 			this.dayAddedReport++;
				// 		}
				// 	}
				// });
				this.getCardData();
			},
			getCardData() {
				//卡片赋值
				this.CardData = [{
						"kind": 4,
						"background": ["#0081ff", "#1cbbb4"],
						"content": [{
								"text": "当日新增生产订单",
								"value": "",
								"colortext": "#fff",
								"colorvalue": "",
								"size": "24rpx"
							},
							{
								"text": "",
								"value": this.dayAddedPo,
								"colortext": "",
								"colorvalue": "#fff",
								"size": "44rpx"
							},
						]
					},
					{
						"kind": 4,
						"background": ["#0081ff", "#1cbbb4"],
						"content": [{
								"text": "当日新增生产工单",
								"value": "",
								"colortext": "#fff",
								"colorvalue": "",
								"size": "24rpx"
							},
							{
								"text": "",
								"value": this.dayAddedPwo,
								"colortext": "",
								"colorvalue": "#fff",
								"size": "44rpx"
							},
						]
					},
					{
						"kind": 4,
						"background": ["#0081ff", "#1cbbb4"],
						"content": [{
								"text": "当日报工次数",
								"value": "",
								"colortext": "#fff",
								"colorvalue": "",
								"size": "24rpx"
							},
							{
								"text": "",
								"value": this.dayAddedReport,
								"colortext": "",
								"colorvalue": "#fff",
								"size": "44rpx"
							},
						]
					}, {
						"kind": 4,
						"background": ["#0081ff", "#1cbbb4"],
						"content": [{
								"text": "当日平均质量合格率",
								"value": "",
								"colortext": "#fff",
								"colorvalue": "",
								"size": "24rpx"
							},
							{
								"text": "",
								"value": this.dayAvgQltyRate,
								"colortext": "",
								"colorvalue": "#fff",
								"size": "44rpx"
							},
						]
					}
				]
			},
			async getRate() {
				this.finishValue = 0;
				this.defectValue = 0;
				//当前日期
				// const currentDate = this.getTime();
				let endTime = this.getTime();
				const oldDate = this.value;
				oldDate.setDate(this.value.getDate() - 30);
				const year = oldDate.getFullYear();
				const month = String(oldDate.getMonth() + 1).padStart(2, '0');
				const day = String(oldDate.getDate()).padStart(2, '0');
				let startTime = `${year}-${month}-${day}`;

				await reportRate({
					mesPwoReportType: '3',
					queryStartTime: startTime,
					queryEndTime: endTime,
				}).then((result) => {
					this.finishValue = result.data;
				});

				await reportRate({
					mesPwoReportType: '2',
					queryStartTime: startTime,
					queryEndTime: endTime,
				}).then((result) => {
					this.defectValue = result.data;
				});

				this.getCircleData();
			},
			getCircleData() {
				const data1 = this.finishValue.toFixed(0) * 0.01;
				const data2 = this.defectValue.toFixed(0) * 0.01;
				this.CircleData = [{
						"series": [{
							"color": "#fff",
							"data": data1,
							"precent": this.finishValue.toFixed(0) + "%",
							"index": 0,
							"legendShape": "circle",
							"name": "工单完成率",
							"pointShape": "circle",
							"show": true,
							"type": "arcbar",
							// "value": "12786",
							"backgroundColor": "#00AEF9"
						}]
					},
					{
						"series": [{
							"color": "#fff",
							"data": data2,
							"precent": this.defectValue.toFixed(0) + "%",
							"index": 0,
							"legendShape": "circle",
							"name": "工单良品率",
							"pointShape": "circle",
							"show": true,
							"type": "arcbar",
							// "value": "1096",
							"backgroundColor": "#F55676"
						}]
					}

				]
				console.log(this.CircleData)
			}
		}
	}
</script>

<style scoped lang="scss">
	.content {
		padding-top: 10rpx;
	}

	.data_body {
		height: 100%;
		text-align: center;
		color: #333333;
		background-repeat: repeat;
		background-color: #ffffff;

		.friend_operate {
			padding: 30rpx 20rpx;

			.title {
				text-align: left;
				margin-bottom: 30rpx;
				font-size: 40rpx;
			}
		}

		.view_item {
			padding: 30rpx 20rpx;
			padding-top: 30px;

			.title {
				text-align: left;
				margin-bottom: 30rpx;
				font-size: 40rpx;
			}
		}

		.progress_circle {
			display: flex;
			flex-wrap: wrap;
			justify-content: space-around;
			align-items: center;
			// height: 450rpx;

			.progress_block {
				width: 45%;
				border-radius: 20rpx;
				height: 180rpx;
				position: relative;
				overflow: hidden;

				.name {
					color: #fff;
					font-size: 24rpx;
					position: absolute;
					top: 20rpx;
					left: 10rpx;
					max-width: 144rpx;
				}

				.value {
					color: #fff;
					font-size: 40rpx;
					position: absolute;
					top: 64rpx;
					left: 10rpx;
					max-width: 144rpx;
				}

				.circle {
					position: absolute;
					right: 8rpx;
					top: 16rpx;
				}

				.arcbar {
					position: absolute;
					right: -4rpx;
					top: 8rpx;
				}
			}

			.block_0 {
				background-color: #0FC3FF;
			}

			.block_1 {
				background-color: #FF6B8B;
			}

			.block_2 {
				background-color: #FFCB1D;
			}

			.block_3 {
				background-color: #3BDCAA;
			}
		}
	}

	.planet {
		width: 60px;
		height: 60px;
		border-radius: 50%;
		background: #333;
		position: absolute;
		left: -13px;
		bottom: -26px;
		overflow: hidden;
		opacity: 0.5;
		z-index: 0;
	}

	.planet_shadow {
		position: absolute;
		border-radius: 50%;
		height: 100%;
		width: 100%;
		top: -40%;
		right: -10%;
		border: 35px solid rgba(0, 0, 0, .15);
	}

	.crater1,
	.crater2,
	.crater3,
	.crater4 {
		position: absolute;
		border-radius: 50%;
		background: rgba(0, 0, 0, .3);
		box-shadow: inset 3px 3px 0 rgba(0, 0, 0, .2);
	}

	.crater1 {
		width: 20px;
		height: 20px;
		left: 25%;
		top: 20%;
	}

	.crater2 {
		width: 10px;
		height: 10px;
		left: 50%;
		top: 60%;
	}

	.crater3 {
		width: 15px;
		height: 15px;
		left: 30%;
		top: 65%;
	}

	.crater4 {
		width: 15px;
		height: 15px;
		left: 60%;
		top: 35%;
	}

	.star {
		display: block;
		width: 5px;
		height: 5px;
		border-radius: 50%;
		background: #FFF;
		top: 10px;
		left: 50px;
		position: relative;
		transform-origin: 100% 0;
		box-shadow: 0 0 5px 5px rgba(255, 255, 255, .3);
		opacity: 0;
		z-index: 2;
	}

	.star0 {
		animation: star-ani 4s infinite ease-out;
	}

	.star1 {
		animation: star-ani 5s infinite ease-out;
	}

	.star2 {
		animation: star-ani 6s infinite ease-out;
	}

	.star3 {
		animation: star-ani 7s infinite ease-out;
	}

	.star:after {
		content: '';
		display: block;
		top: 20px;
		left: 60px;
		border: 0px solid #fff;
		border-width: 0px 90px 2px 90px;
		border-color: transparent transparent transparent rgba(255, 255, 255, .3);
		transform: rotate(-45deg) translate3d(1px, 3px, 0);
		box-shadow: 0 0 1px 0 rgba(255, 255, 255, .1);
		transform-origin: 0% 100%;
		animation: shooting-ani 100s infinite ease-out;
	}

	.pink {
		top: 10px;
		left: 60px;
		background: #ff5a99;
		animation-delay: 5s;
		-webkit-animation-delay: 5s;
		-moz-animation-delay: 5s;
	}

	.pink:after {
		border-color: transparent transparent transparent #ff5a99;
		animation-delay: 5s;
		-webkit-animation-delay: 5s;
		-moz-animation-delay: 5s;
	}

	.blue {
		top: 15px;
		left: 70px;
		background: cyan;
		animation-delay: 7s;
		-webkit-animation-delay: 7s;
		-moz-animation-delay: 7s;
	}

	.blue:after {
		border-color: 'transpareanimation-delay: 12s';
		-webkit-animation-delay: 7s;
		-moz-animation-delay: 7s;
		animation-delay: 7s;
	}

	.yellow {
		top: 0px;
		left: 80px;
		background: #ffcd5c;
		animation-delay: 5.8s;
	}

	.yellow:after {
		border-color: transparent transparent transparent #ffcd5c;
		animation-delay: 5.8s;
	}

	@keyframes star-ani {
		0% {
			opacity: 0;
			transform: scale(0) rotate(0) translate3d(0, 0, 0);
			-webkit-transform: scale(0) rotate(0) translate3d(0, 0, 0);
			-moz-transform: scale(0) rotate(0) translate3d(0, 0, 0);
		}

		50% {
			opacity: 0.5;
			transform: scale(1) rotate(0) translate3d(-20px, 20px, 0);
			-webkit-transform: scale(1) rotate(0) translate3d(-20px, 20px, 0);
			-moz-transform: scale(1) rotate(0) translate3d(-20px, 20px, 0);
		}

		100% {
			opacity: 0;
			transform: scale(1) rotate(0) translate3d(-30px, 30px, 0);
			-webkit-transform: scale(1) rotate(0) translate3d(-30px, 30px, 0);
			-moz-transform: scale(1) rotate(0) translate3d(-30px, 30px, 0);
		}
	}
</style>