<template>
	<view class="page">
		<view class="">
			<view class="pure_top">
				
			</view>
			<view class="calendar">
				<view class="dates">
					<picker mode="date" fields="year"  @change="date($event)">
						<view>{{year}}</view>
					</picker>
					<text>|</text>
					<view class="">
						8.25
					</view>
				</view>
				<view class="monthbox" >
					<view class="month" v-for="(item,key) in month" :key="key">
						{{item}}
					</view>
				</view>
			</view>
		</view>
		<view class="taskbox">
			<view class="itembox">
				<view class="top">
					<view class="left">
						<img src="@/static/4412.png" alt="">
						<view class="">
							<text>xx救援站任务总数</text><text>20</text>
						</view>
					</view>
					<view class="right">
						<view style="margin-right: 10rpx;">完成率</view>
						
						<view class="">
							60%
						</view>
					</view>
				</view>
				<view class="charts-box" style="display: flex;">
					<img src="@/static/dadui/10.png" alt="">
					<view style="width: 50%;">
						<qiun-data-charts type="ring" :opts="opts" :chartData="chartData" />
					</view>
					<view style="width: 50%; display: flex;justify-content: center;align-items: center;flex-direction: column;">
						<view class="tagbox">
							<view class="tag" :style="'background:'+opts.color[0]+';'">
								
							</view>
							<text>上级指派-------9个</text>
						</view>
						<view class="tagbox">
							<view class="tag" :style="'background:'+opts.color[1]+';'">
								
							</view>
							<text>上级指派-------9个</text>
						</view>
						<view class="tagbox">
							<view class="tag" :style="'background:'+opts.color[2]+';'">
								
							</view>
							<text>上级指派-------9个</text>
						</view>
					</view>
				</view>
			</view>
			<view class="itembox">
				<view class="top">
					<view class="left">
						<img src="@/static/4412.png" alt="">
						<view class="">
							<text>xx救援站任务总数</text><text>20</text>
						</view>
					</view>
					<view class="right">
						<view style="margin-right: 10rpx;">完成率</view>
						
						<view class="">
							60%
						</view>
					</view>
				</view>
				<view class="charts-box" style="display: flex;">
					<img src="@/static/dadui/11.png" alt="">
					<view style="width: 50%;">
						<qiun-data-charts type="ring" :opts="opts" :chartData="chartData" />
					</view>
					<view style="width: 50%; display: flex;justify-content: center;align-items: center;flex-direction: column;">
						<view class="tagbox">
							<view class="tag" :style="'background:'+opts.color[0]+';'">
								
							</view>
							<text>上级指派-------9个</text>
						</view>
						<view class="tagbox">
							<view class="tag" :style="'background:'+opts.color[1]+';'">
								
							</view>
							<text>上级指派-------9个</text>
						</view>
						<view class="tagbox">
							<view class="tag" :style="'background:'+opts.color[2]+';'">
								
							</view>
							<text>上级指派-------9个</text>
						</view>
					</view>
				</view>
			</view>
			<view class="itembox">
				<view class="top">
					<view class="left">
						<img src="@/static/4412.png" alt="">
						<view class="">
							<text>xx救援站任务总数</text><text>20</text>
						</view>
					</view>
					<view class="right">
						<view style="margin-right: 10rpx;">完成率</view>
						
						<view class="">
							60%
						</view>
					</view>
				</view>
				<view class="charts-box" style="display: flex;">
					<img src="@/static/dadui/9.png" alt="">
					<view style="width: 40%;">
						<qiun-data-charts type="ring" :opts="opts" :chartData="chartData" />
					</view>
					<view style="width: 50%; display: flex;justify-content: center;align-items: center;flex-direction: column;">
						<view class="tagbox">
							<view class="tag" :style="'background:'+opts.color[0]+';'">
								
							</view>
							<text>上级指派-------9个</text>
						</view>
						<view class="tagbox">
							<view class="tag" :style="'background:'+opts.color[1]+';'">
								
							</view>
							<text>上级指派-------9个</text>
						</view>
						<view class="tagbox">
							<view class="tag" :style="'background:'+opts.color[2]+';'">
								
							</view>
							<text>上级指派-------9个</text>
						</view>
					</view>
				</view>
			</view>
			<!-- <view class="listbox">
				<view class="item" v-for="(item,key) in list" :key="key">
					<view class="namebox">
						<view class="name">
							{{item.name}}
						</view>
						<view style=" width: 30%; padding-left:20rpx;">
							<view class="tag">
								{{item.tag.text}}
							</view>
						</view>
					</view>
					<view class="typebox">
						<view class="type">
							{{item.type}}
						</view>
						<view class="result">
							<text>{{item.result}}</text>
						</view>
					</view>
					<view class="staffbox">
						<view class="staff">
							<view>人员:</view>
							<view><img style="height: 40rpx; width: 40rpx; vertical-align:middle" src="../../static/447.png"
									alt="">张三</view>
							<view><img style="height: 40rpx; width: 40rpx; vertical-align:middle" src="../../static/446.png"
									alt="">李四</view>
						</view>
						<view class="implement">
							<button>执行</button>
						</view>
					</view>
				</view>
			</view> -->
		</view>
		<!-- <view class="login-box" v-if="!identity">
			<view class="login-text">
				登录平台,在线处理业务
			</view>
			<view class="login-button" >
				<button @tap="login()">登录</button>
			</view>
		</view> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: 'Hello',
				identity: 0,
				progressNub:60,
				chartData: {},
				year:2022,
				opts: {
					rotate: false,
					rotateLock: false,
					color: ["#FACE15","#04F1C9", "#3990F1"],
					
					padding: [5, 5, 5, 5],
					dataLabel: false,
					legend: {
						show: false,
						fontColor: "#fff",
						position: "right",
						lineHeight: 20
					},
					title: {
						name: "任务总数",
						fontSize: 15,
						color: "#fff"
					},
					subtitle: {
						name: "20",
						fontSize: 25,
						color: "#fff"
					},
					extra: {
						ring: {
							width: 50,
							height:50,
							ringWidth: 10,
							activeOpacity: 0.5,
							activeRadius: 10,
							offsetAngle: 0,
							labelWidth: 15,
							border: false,
							customRadius: 60,
							borderWidth: 3,
							borderColor: "#FFFFFF",
							centerColor: "#57B5FF",
							linearType: "none"
						}
					}
				},
				list: [{
					name: "上海雅特有限公司",
					tag: {
						class: "",
						text: "重点单位"
					},
					type: "双随机",
					result: "责令限期整改"

				}],
				month:[1,2,3,4,5,6,7,8,9,10,11,12]
			}
		},
		onLoad() {
			let a = uni.getStorageSync("user");

			if (a) {
				this.identity = 1
			}
		},
		onReady() {
			this.getServerData();
		},
		methods: {
			getServerData() {
				//模拟从服务器获取数据时的延时
				setTimeout(() => {
					//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
					let res = {
						series: [{
							data: [{
								"name": "一班",
								"value": 50
							}, {
								"name": "二班",
								"value": 30
							}, {
								"name": "三班",
								"value": 20
							}, 
							]
						}]
					};
					this.chartData = JSON.parse(JSON.stringify(res));
				}, 500);
			},
			date(e){
				console.log(e);
			}
		}

	}
</script>

<style lang="scss">
	
	.pure_top {
		width: 100%;
		height: 220rpx;
		position: relative;
		z-index: 0;
		overflow: hidden;
		
	}
	.pure_top::after {
		content:"";
		width: 100%;
		height: 220rpx;
		position: absolute;
		left: 0;
		top:0;
		z-index: -1;
		border-radius: 0 0 100% 100%;
		background: linear-gradient(180deg, #57B5FF 0%, #616DFD 100%);
	}
	
	.calendar{
		z-index: 1;
		position: absolute;
		left: 74rpx;
		top: 20rpx;
		width: 80%;
		height: 120rpx;
		border-radius: 10rpx;
		box-shadow: 0px 0px 20px 1px #C1D7FF;
		background: #fff;
		view{
			height: 60rpx;
		}
		.dates{
			display: flex;
		}
		.monthbox{
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: row;
		}
		.month{
			
			width: 48rpx;
			height: 48rpx;
			border-radius: 48rpx;
			text-align: center;
			// background: #327AFE;
		}
	}
	button {
		width: 200rpx;
		height: 80rpx;
		color: #fff;
		border-radius: 40rpx;
		line-height: 80rpx;
		background-color: #327AFE;
	}
	.taskbox{
		width: 90%;
		margin: -60rpx auto 0 auto;
		border-radius: 20rpx;
		background-color: #fff;
		padding: 20rpx;
		position: absolute;
		left: 16rpx;
		z-index: 10;
		.itembox{
			margin-top: 30rpx;
			.top{
				margin-top: 30rpx;
				height: 60rpx;
				display: flex;
				.left{
					display: flex;
					flex: 1;
					img{
						width: 50rpx;
						height: 50rpx;
					}
					text{
						margin-right: 10rpx;
					}
				}
				.right{
					color: #909090;
					
					display: flex;
					.progress{
						margin-top: 6rpx;
						margin-right: 10rpx;
						height: 34rpx;
						flex: 1;
						background: #E4E7EC;
						.color{
							height: 100%;
							background-color: #14B389;
						}
					}
				}
			}
		}
	}
	.charts-box {
		// background-color: #5687fd;
		height: 250rpx;
		position: relative;
		img{
			width: 100%;
			height: 100%;
			position: absolute;
			top: 0;
			left: 0;
			z-index: -1;
		}
		display: flex;
		justify-content: center;
		align-items: center;
		
		.tagbox{
			color: #FFFFFF;
			display: flex;
			justify-content: center;
			align-items: center;
			margin: 10rpx 0;
			font-size: 32rpx;
			.tag{
				width: 20rpx;
				height: 20rpx;
				border-radius: 20rpx;
			}
		}
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}

	.login-box {
		display: flex;
		background: #8f8f94;
		width: 100%;
		height: 120rpx;
		position: fixed;
		bottom: 0;
		left: 0;

		.login-text {
			color: #fff;
			width: 60%;
			display: flex;
			font-size: 36rpx;
			padding-left: 40rpx;
			align-items: center;
		}

		.login-button {
			flex: 1;
			text-align: center;
			margin-top: 20rpx;

		}
	}

	.listbox {
		width: 100%;

		.item {
			background-color: #fff;
			margin: 20rpx 0;
			padding: 20rpx;

			.namebox {
				display: flex;
				margin-bottom: 30rpx;

				.name {
					font-weight: 600;
					font-size: 36rpx;
					width: 70%;
					height: 60rpx;
					line-height: 60rpx;
				}

				.tag {
					text-align: center;
					width: 200rpx;
					height: 60rpx;
					line-height: 60rpx;
					color: #FF6F51;
					border: 1px solid #FF6F51;
					background: rgba(255, 111, 81, 0.2400);
					border-radius: 40rpx 40rpx 40rpx 40rpx;
				}
			}
		}
	}

	.typebox {
		display: flex;
		margin: 30rpx 0;

		.type {
			width: 50%;
			border-left: #327AFE 6rpx solid;
			font-size: 30rpx;
			font-weight: 600;
			padding-left: 10rpx;
		}

		.result {
			width: 50%;
			text-align: right;
			color: #FF6F51;
		}
	}

	.staffbox {
		display: flex;

		.staff {
			display: flex;

			view {
				margin-right: 20rpx;
			}
		}

		.implement {

			flex: 1;
			margin-bottom: 10rpx;

			button {
				float: right;
				width: 120rpx;
				height: 60rpx;
				line-height: 60rpx;
				font-size: 32rpx;
			}
		}
	}
</style>
