<template>
	<view class="app">
		<view class="wordorder">
			<view class="item" style="background-color: #4F78C7;" @tap='gowordorder(0)'>
				<view class="title" v-if="workTaskNumlist">
					{{workTaskNumlist.taskSum}}
				</view>
				<view class="text" style="bottom:30rpx">
					当前工单数
				</view>
			</view>
			<view class="item" style="background-color: #9A60B4;" @tap='gowordorder(3)'>
				<view class="title" v-if="workTaskNumlist">
					{{workTaskNumlist.lessThreeSum}}
				</view>
				<view class="text">
					逾期工单数
				</view>
				<view class="text2">
					(<3天) </view>
				</view>
				<view class="item" style="background-color: #E29665;" @tap='gowordorder(1)'>
					<view class="title" v-if="workTaskNumlist">
						{{workTaskNumlist.threeToFiveSum}}
					</view>
					<view class="text">
						逾期工单数
					</view>
					<view class="text2">
						(3-5天)
					</view>
				</view>
				<view class="item" style="background-color: #90CC74;" @tap='gowordorder(2)'>
					<view class="title" v-if="workTaskNumlist">
						{{workTaskNumlist.aboveFiveSum}}
					</view>
					<view class="text">
						逾期工单数
					</view>
					<view class="text2">
						(>5天)
					</view>
				</view>
			</view>
			<view class="charts-box" v-if="timeordershow">
				<view class="title" style="margin-top: 0;">
					按区县统计当前工单数
				</view>
				<qiun-data-charts type="column" :opts="opts3" :chartData="chartData3" :ontouch="true" :onzoom="true" />
			</view>
			<view class="charts-box" v-if="streetrshow">
				<view class="title" style="margin-top: 40rpx;">
					按街道统计当前工单数
				</view>
				<qiun-data-charts type="column" :opts="opts4" :chartData="chartData4" :ontouch="true" :onzoom="true" />
			</view>
			<view class="charts-box">
				<view class="title" style="margin-top: 140rpx;">
					工单日统计
				</view>
				<qiun-data-charts type="column" :opts="opts" :chartData="chartData"   :ontouch="true" :onzoom="true"/>
			</view>
			<view class="charts-box">
				<view class="title" style='margin-top: 100rpx;'>
					工单分类统计
				</view>
				<qiun-data-charts type="column" :opts="opts2" :chartData="chartData2" :ontouch="true" :onzoom="true" />
			</view>
		</view>
</template>

<script>
	import {
		workTaskNum,
		workTaskNumByType,
		workTaskNumByDate,
		getWorkTaskNumByquXian,
		getWorkTaskNumByJieDao
	} from '@/api/homepage/index.js'
	export default {
		components: {},
		data() {
			return {
				workTaskNumlist: null,
				timeordershow: false,
				streetrshow: false,

				workTaskNumByTypelist: {
					categories: [],
					series: [{
						name: "数量",
						data: []
					}]
				},
				workTaskNumByDatelist: {
					categories: [],
					series: [{
						name: "数量",
						data: []
					}]
				},
				getWorkTaskNumByquXianlist: {
					categories: [],
					series: [{
						name: "数量",
						data: []
					}]
				},
				getWorkTaskNumByjiedaolist: {
					categories: [],
					series: [{
						name: "数量",
						data: []
					}]
				},
				chartData: null,
				//您可以通过修改 config-ucharts.js 文件中下标为 ['line'] 的节点来配置全局默认参数，如都是默认参数，此处可以不传 opts 。实际应用过程中 opts 只需传入与全局默认参数中不一致的【某一个属性】即可实现同类型的图表显示不同的样式，达到页面简洁的需求。
				opts: {
					color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
						"#ea7ccc"
					],
					padding: [15, 15, 30, 0],
					touchMoveLimit: 24,
					enableScroll: true,
					legend: {
						show: false
					},
					xAxis: {
						disableGrid: true,
						scrollShow: true,
						itemCount: 6,
						rotateLabel: true,
						rotateAngle: 45
					},
					yAxis: {
						data: [{
							min: 0
						}]
					},
					extra: {
						column: {
							type: "group",
							width: 20,
							activeBgColor: "#000000",
							activeBgOpacity: 0.08
						}
					}
				},
				chartData2: null,
				//您可以通过修改 config-ucharts.js 文件中下标为 ['column'] 的节点来配置全局默认参数，如都是默认参数，此处可以不传 opts 。实际应用过程中 opts 只需传入与全局默认参数中不一致的【某一个属性】即可实现同类型的图表显示不同的样式，达到页面简洁的需求。
				opts2: {
					color: ["#FC8452", "#ea7ccc", "#9A60B4", "#3CA272", "#73C0DE", "#EE6666", "#FAC858", "#91CB74",
						"#1890FF",
					],
					padding: [15, 15, 0, 10],
					touchMoveLimit: 24,
					enableScroll: true,
					legend: {
						show: false
					},
					xAxis: {
						disableGrid: true,
						scrollShow: true,
						itemCount: 6,
						rotateLabel: true,
						rotateAngle: 45
					},
					yAxis: {
						data: [{
							min: 0
						}]
					},
					extra: {
						column: {
							type: "group",
							width: 20,
							activeBgColor: "#000000",
							activeBgOpacity: 0.08
						}
					}
				},

				chartData3: null,
				//您可以通过修改 config-ucharts.js 文件中下标为 ['column'] 的节点来配置全局默认参数，如都是默认参数，此处可以不传 opts 。实际应用过程中 opts 只需传入与全局默认参数中不一致的【某一个属性】即可实现同类型的图表显示不同的样式，达到页面简洁的需求。
				opts3: {
					color: ["#FAC858", "#3CA272", "#FC8452", "#ea7ccc", "#9A60B4", "#73C0DE", "#EE6666", "#91CB74",
						"#1890FF",
					],
					padding: [15, 15, 0, 10],
					touchMoveLimit: 24,
					enableScroll: true,
					legend: {
						show: false
					},
					xAxis: {
						disableGrid: true,
						scrollShow: true,
						itemCount: 10,
						rotateLabel: true,
						rotateAngle: 45
					},
					yAxis: {
						data: [{
							min: 0
						}]
					},
					extra: {
						column: {
							type: "group",
							width: 20,
							activeBgColor: "#000000",
							activeBgOpacity: 0.08
						}
					}
				},

				chartData4: null,
				//您可以通过修改 config-ucharts.js 文件中下标为 ['column'] 的节点来配置全局默认参数，如都是默认参数，此处可以不传 opts 。实际应用过程中 opts 只需传入与全局默认参数中不一致的【某一个属性】即可实现同类型的图表显示不同的样式，达到页面简洁的需求。
				opts4: {
					color: ["#FAC858", "#3CA272", "#FC8452", "#ea7ccc", "#9A60B4", "#73C0DE", "#EE6666", "#91CB74",
						"#1890FF",
					],
					padding: [15, 15, 0, 10],
					touchMoveLimit: 24,
					enableScroll: true,
					legend: {
						show: false
					},
					xAxis: {
						disableGrid: true,
						scrollShow: true,
						itemCount: 10,
						rotateLabel: true,
						rotateAngle: 45
					},
					yAxis: {
						data: [{
							min: 0
						}]
					},
					extra: {
						column: {
							type: "group",
							width: 20,
							activeBgColor: "#000000",
							activeBgOpacity: 0.08
						}
					}
				}
			};
		},
		onLoad() {},
		onShow() {
			try {
				const value = uni.getStorageSync('rose');
				if (value == 'admin' || value == 'dzswszfzd') {
					this.timeorder();
				} else {}
				if (value == 'qxzh') {

					this.street();
				} else {}
			} catch (e) {}
			this.info();
			this.datainfo();
			this.typeinfo();
		},
		onReady() {},
		onPullDownRefresh() { //下拉刷新
			try {
				const value = uni.getStorageSync('rose');
				if (value == 'admin' || value == 'dzswszfzd') {
					this.timeorder();
					// this.timeorder2();
				} else {}
				if (value == 'qxzh') {
					this.street();
				} else {}
			} catch (e) {}
			this.info();
			this.datainfo();
			this.typeinfo();
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		methods: {
			timeorder() {
				this.getWorkTaskNumByquXianlist = {
					categories: [],
					series: [{
						name: "数量",
						data: []
					}]
				}
				this.timeordershow = true
				getWorkTaskNumByquXian('').then(res => {
					setTimeout(() => {
						if(res.status=='200'){
							res.data.forEach((e, index) => {
								var obj = {
									value: e.num,
									color: this.opts3.color[(index % this.opts3.color.length)]
								}
								this.getWorkTaskNumByquXianlist.categories.push(e
									.docTypeId)
								this.getWorkTaskNumByquXianlist.series[0].data.push(obj)
							})
							
						}
				
						this.chartData3 = JSON.parse(JSON.stringify(this.getWorkTaskNumByquXianlist));
					}, 0);
				})
			},
			street() {
				this.getWorkTaskNumByjiedaolist = {
					categories: [],
					series: [{
						name: "数量",
						data: []
					}]
				}
				this.streetrshow = true
				getWorkTaskNumByJieDao().then(res => {
					setTimeout(() => {
						if(res.status=='200'){
							res.data.forEach((e, index) => {
								var obj = {
									value: e.num,
									color: this.opts4.color[(index % this.opts4.color.length)]
								}
								this.getWorkTaskNumByjiedaolist.categories.push(e
									.docTypeId)
								this.getWorkTaskNumByjiedaolist.series[0].data.push(obj)
							})
							
						}
				
						this.chartData4 = JSON.parse(JSON.stringify(this.getWorkTaskNumByjiedaolist));
					}, 0);
				})
			},
			gowordorder(item) {
				uni.setStorageSync("type", item)
				uni.switchTab({
					url: `/pages/Workorder/Workorder`
				})
			},
			info() {
				workTaskNum().then(res => {
					this.workTaskNumlist = res.data
				})
			},
			typeinfo() {
				this.workTaskNumByTypelist = {
					categories: [],
					series: [{
						name: "数量",
						data: []
					}]
				}
				workTaskNumByType().then(res => {
					//模拟从服务器获取数据时的延时
					setTimeout(() => {
						console.log(res.status=='200')
						if(res.status=='200'){
							res.data.forEach((e, index) => {
								var obj = {
									value: e.num,
									color: this.opts2.color[(index % this.opts2.color.length)]
								}
								this.workTaskNumByTypelist.categories.push(e.docTypeId)
								this.workTaskNumByTypelist.series[0].data.push(obj)
							})
						}
					
						this.chartData2 = JSON.parse(JSON.stringify(this.workTaskNumByTypelist));
					}, 0);
				})
			},
			datainfo() {
				this.workTaskNumByDatelist = {
					categories: [],
					series: [{
						name: "数量",
						data: []
					}]
				}
				workTaskNumByDate().then(res => {
					//模拟从服务器获取数据时的延时
					setTimeout(() => {
						if(res.status=='200'){
							res.data.forEach((e, index) => {
								var obj = {
									value: e.num,
									color: this.opts.color[(index % this.opts.color.length)]
								}
								this.workTaskNumByDatelist.categories.push(e.dateTime)
								this.workTaskNumByDatelist.series[0].data.push(obj)
							})
							
						}
					
						this.chartData = JSON.parse(JSON.stringify(this.workTaskNumByDatelist));
					}, 0);
				})
			},
		},
	}
</script>

<style lang="scss">
	//css函数 声明函数
	@function tovmin($rpx) {
		//$rpx为需要转换的字号
		@return #{$rpx * 100 / 750}vmin;
	}
	.app {
		padding: 0 0 tovmin(100);
		margin-top: tovmin(50);
		font-size: tovmin(28);

		.charts-box {
			width: 100%;
			margin-top: tovmin(70);
			height: tovmin(700);

			.title {
				font-size: tovmin(32);
				font-weight: 1000;
				margin: tovmin(50) 0 tovmin(50) tovmin(30);
			}
		}

		.wordorder {
			display: flex;
			width: 100%;
			margin: tovmin(-11) auto;
			justify-content: space-evenly;
			flex-wrap: wrap;

			.item {
				font-size: tovmin(20);
				color: #ffffff;
				height: tovmin(140);
				line-height: tovmin(30);
				width: 40%;
				text-align: center;
				border-radius: tovmin(20);
				position: relative;
				margin-bottom: tovmin(20);

				.title {
					width: 100%;
					line-height: tovmin(80);
					font-size: tovmin(50);
					font-weight: 1000;
				}

				.text {
					width: 100%;
					position: absolute;
					bottom: tovmin(40);
					text-align: center;
				}

				.text2 {
					width: 100%;
					position: absolute;
					bottom: tovmin(10);
					text-align: center;
				}
			}
		}
	}
</style>
