Jinan_app/pages/dadui/jiancha/jiancha.vue

<template>
	<view class="page">
		<view class="top">
			<view class="pure_top">

			</view>
			<view class="calendar">
				<view class="date_year">
					<view style="display: flex;">
						<picker :value="dates.year" mode="date" fields="year" @change="dateYear($event)">
							<view>{{dates.year}}</view>
						</picker>
						<img src="@/static/down.png" style="width: 30rpx;height: 30rpx; margin:10rpx 0 0 10rpx;" alt="">
					</view>
					<view style="margin: 0 10rpx;">|</view>
					<view class="">
						{{today.month}}.{{dates.day}}
					</view>
				</view>
				<view class="monthbox">
					<view :class="{month_color : item==dates.month,month_color2 : item>month}" class="month_class"
						v-for="(item,key) in months" :key="key" @tap="dateMonth(item)">
						<text>{{item}}</text>
					</view>
				</view>
			</view>
		</view>
		<view class="taskbox">
			<view class="itembox" v-for="(item,key) in user" :key="key">
				<view class="top">
					<view class="left">
						<img src="@/static/4412.png" alt="">
						<view class="">
							<text>{{item.user.name}}任务总数</text><text>{{item['任务总数']}}</text>
						</view>
					</view>
					<view class="right">
						
					</view>
				</view>
				<view class="charts-box" style="display: flex;">
					<img src="@/static/dadui/10.png" alt="">
					<view v-if="identity" style="width: 50%;">
						<qiun-data-charts type="ring" :opts="opts[key]" :chartData="chartData[key]" />
					</view>
					<view
						style="width: 50%; display: flex;justify-content: center;align-items: center;flex-direction: column;">
						<view class="tagbox" v-for="(item,k) in chartData[key].series[0].data" :key="k">
							<view class="tag" :style="'background:'+opts[key].color[k]+';'">

							</view>
							<text>{{item.name}}-------{{item.value}}个</text>
						</view>

					</view>
				</view>
			</view>

		</view>
		<view class="listbox">
			<view class="item" v-for="(item,key) in list" :key="key">
				<view class="typebox">
					<view
						style="width: 12rpx; height: 34rpx; margin-top: 6rpx; background-color: #9D80FF; color: #9D80FF ;">
						1
					</view>
					<view class="type">
						{{item.taskType}}
					</view>

				</view>
				<view class="namebox">
					<view class="name">
						{{item.company.companyName}}
					</view>
					<view style=" width: 30%; padding-left:20rpx;">
						<view v-if="item.company.useNature=='重点单位'" class="tag" style="">
							{{item.company.useNature}}
						</view>
						<view v-else class="tag2">
							{{item.company.useNature}}
						</view>
					</view>
				</view>

				<view class="staffbox">
					<view class="staff" style="flex: 1;">
						<view>主负责人:</view>
						<view class="zhu">{{item.organization.name}}</view>

					</view>
					<view class="jiancha">
						{{item.approvalStatus}}
					</view>
				</view>
				<view style="display: flex;">
					<view style="flex:1">
						<view class="staffbox">
							<view class="staff">
								<view>协助人员:</view>
								<view v-for="(i,k) in item.supervisors" :key="k"
									style="display: flex;justify-content: center;align-items: center;">
									<img v-if="i.posts && i.posts[0] == '主查人员'" src="@/static/447.png" alt="">
									<img v-if="i.posts && i.posts[0] == '协查人员'" src="@/static/446.png" alt="">
									{{i.name}}
								</view>

							</view>
							<!-- <view class="implement">
								<button>执行</button>
							</view> -->
						</view>
						<view class="staffbox">
							<view class="staff">
								<view>检查时间:</view>
								<view>{{item.checkTime}}</view>

							</view>
							<!--  -->
						</view>
					</view>
					<view class="implement">
						<view class="button" v-if="item.approvalStatus=='待检查'">
							<button @tap="start(item)">执行</button>
						</view>
						<img v-else-if="item.inspectionResult=='未发现违法违规情况'" src="@/static/zeren/4508.png" alt="">
						<img v-else-if="item.inspectionResult=='责令限期改正'" src="@/static/zeren/4511.png" alt="">
						<view v-else class="">
							{{item.inspectionResult}}
						</view>
					</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: [],
				dates: {
					year: 2022,
					month: 8,
					day: 0,
				},
				today: {
					month: 8,
				},
				opts: [

				],
				user: [{
					tasknub: 0
				}],
				isSupervisor: false,
				list: [],
				month: 0,
				nub: 0,
				months: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]
			}
		},
		onLoad() {
			let a = uni.getStorageSync("user");
			let date = new Date()
			this.dates.month = date.getMonth() + 1
			this.today.month = date.getMonth() + 1
			this.month = date.getMonth() + 1
			this.dates.year = date.getFullYear()
			this.dates.day = date.getDate()
			this.getSupervisorCount()



		},
		onReady() {
			this.identity = 1

		},
		methods: {
			getSupervisorCount() {
				let selectedTime = this.dates.year + '-' + this.dates.month + '-' + '01'
				let params = {
					month: selectedTime,
					organizationId: uni.getStorageSync("user").organizationId
				}
				this.list = []
				this.$request.get('/api/PlanTasks/GetSupervisorCount/', params, (data, res) => {
					console.log(res);
					this.user = res
					this.chartData = []
					this.opts = []

					for (let i = 0; i < this.user.length; i++) {

						this.chartData.push({
							series: [{
								data: [{
									name: "自主任务",
									value: this.user[i]['自主任务']
								}, {
									name: "申领任务",
									value: this.user[i]['申领任务']
								}, ]
							}]
						})
						this.opts.push({
							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: JSON.stringify(this.user[i]['任务总数']),
								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"
								}
							}
						})
						console.log(this.opts);
					}
				})
			}
		}

	}
</script>

<style lang="scss">
	.top {
		position: relative;
		top: 0;
		left: 0;
	}

	.pure_top {
		width: 100%;
		height: 220rpx;
		position: absolute;
		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%);
	}

	.month_color {
		border-radius: 48rpx;

		background-color: #317AFF;
		color: #fff;
	}

	.month_color2 {
		color: #B5B5B5;
	}

	.calendar {
		z-index: 1;
		position: relative;
		left: 74rpx;
		top: 20rpx;
		width: 80%;
		height: 120rpx;
		border-radius: 10rpx;
		box-shadow: 0px 0px 20px 1px #C1D7FF;
		background: #fff;

		view {
			height: 60rpx;
		}

		.date_year {
			box-sizing: border-box;
			display: flex;
			background-color: #fff;
			padding: 10rpx 0 0 10rpx;
		}

		.monthbox {
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: row;

			.month_class {

				width: 48rpx;
				height: 48rpx;
				text-align: center;
			}
		}


	}

	button {
		width: 140rpx;
		height: 70rpx;
		color: #fff;
		border-radius: 34rpx;
		line-height: 70rpx;
		font-size: 30rpx;
		background-color: #327AFE;
	}

	.taskbox {
		width: 90%;
		margin: 40rpx auto;
		border-radius: 20rpx;
		background-color: #fff;
		padding: 20rpx;
		position: relative;
		left: 0;
		z-index: 10;

		.itembox {

			.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: 90%;
		margin: -10rpx auto 0 auto;

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

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

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

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

				.tag2 {
					text-align: center;
					width: 180rpx;
					height: 60rpx;
					line-height: 60rpx;
					color: #14B488;
					border: 1px solid rgba(30, 232, 177, 0.8);
					background: rgba(30, 232, 177, 0.24);
					border-radius: 40rpx 40rpx 40rpx 40rpx;
				}
			}
		}
	}

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

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

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

	.staffbox {
		display: flex;
		margin: 6rpx 0;
		font-size: 30rpx;

		.staff {
			display: flex;
			color: rgba(16, 15, 25, 0.48);

			.zhu {

				color: #100F19;
			}

			view {
				margin-right: 20rpx;
			}

			img {
				width: 40rpx;
				height: 40rpx;
				min-width: 40rpx;
				min-height: 40rpx;
			}
		}

		.jiancha {
			color: #FFBA19;
			margin-right: 10rpx;

		}

	}

	.implement {

		margin-bottom: 10rpx;

		.button {
			width: 100%;
			height: 100%;
			padding-top: 20rpx;
		}

		img {
			width: 100rpx;
			height: 100rpx;
		}

		// button {
		// 	float: right;
		// 	width: 80rpx;
		// 	height: 40rpx;
		// 	line-height: 40rpx;
		// 	margin-top: 20rpx;
		// }
	}
</style>