Jinan_app/pages/rescue/taskreceive.vue

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

			</view>
			<view class="calendar">
				<view class="date_year">
					<view class="blueblock">
			
					</view>
					<view class="year">
						<picker :value="dates.year" mode="date" fields="year" @change="dateYear($event)">
							<text style="margin-right: 12rpx;">{{dates.year}}</text>
						</picker>
						<image src="../../static/down.png" mode=""></image>
					</view>
					<view class="blackblock">
			
					</view>
					<text>{{today.month}}.{{dates.day}}</text>
			
				</view>
				<view class="monthbox">
					<view :class="{month_color : item==dates.month,month_color2 : item>month&&today.year<=dates.year}"
						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 style="font-weight: 600;">{{item.name}}</text>
						</view>
					</view>
					<view class="right">

					</view>
				</view>
				<view class="charts-box" style="display: flex;">
					<img src="@/static/dadui/10.png" alt="">
					<view style="width: 40%;">
						<qiun-data-charts type="ring" :opts="opts" :chartData="chartData" v-if="index3" />
					</view>
					<view
						style="width: 60%; display: flex;justify-content: center;align-items: center;flex-direction: column;">
						<view class="tagbox" v-for="(item,key) in chartData.series[0].data" :key="key">
							<view class="tag" :style="'background:'+opts.color[key]+';'">

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

					</view>
				</view>
				<!-- <view style="width: 100rpx; margin-top: 10rpx;">
					<button @tap="index=true">新增</button>
				</view> -->
			</view>

		</view>
		<view class="listbox">
			<view class="item" v-for="(item,key) in list" :key="key">
				<view class="typebox">
					<view class="type" v-if="item.creationType=='上级指派'">
						派发
					</view>
					<view v-if="item.creationType=='自主任务'" class="type" style="background: #317AFF;">
						自主
					</view>
					<view v-if="item.creationType=='申领任务'" class="type" style="background: #14B488;">
						申领
					</view>
					
					<view class="type_text">
						{{item.company.companyName}}
					</view>
					<view style="width: 40%; ">
						<view v-if="item.company.useNature=='重点单位'" class="tag" style=" float: right;">
							{{item.company.useNature}}
						</view>
						<view v-else class="tag2" style=" float: right;">
							{{item.company.useNature}}
						</view>
					</view>
				</view>
				<view class="namebox">
					<view class="name">
						<view
							style="width: 12rpx; height: 34rpx; margin-top: 14rpx; background-color: #9D80FF; color: #9D80FF ;">
						</view>
						<view class="type">
							{{item.taskType}}
						</view>
					</view>

				</view>

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

					</view>

					<view v-if="item.approvalStatus!='已检查'" class="jiancha"
						style="color: #FFBA19; display: flex; margin-top: -10rpx;">
						<button @tap="tongguo(item)">同意</button>
						<button type="default" @tap="bohui(item)">驳回</button>
					</view>

					<view v-else class="jiancha" style="color: #FFBA19;">
						{{item.approvalStatus}}
					</view>
				</view>
				<view style="display: flex;">
					<view style="flex:1">

						<view class="staffbox">
							<view class="staff">
								<view>申请时间:</view>
								<view>{{item.creationTime}}</view>
								<view style="color: #317AFF;" @tap="chakan(item)">
									查看
								</view>
							</view>
							<view v-if="item.approvalStatus=='通过'||item.approvalStatus=='驳回'" class="jiancha"
								:class="{jiancha_color:item.approvalStatus=='通过'}">
								已{{item.approvalStatus}}
							</view>
							<!-- <view v-else class="jiancha"
								style="color: #FFBA19;">
								{{item.approvalStatus}}
							</view> -->

						</view>
					</view>
					<view class="implement">

					</view>
				</view>
			</view>
		</view>
		<view class="taskadd" v-if="index">
			<view class="itembox">
				<view class="item_top">
					<view class="">
						任务申领
					</view>
					<view class="" @tap="indexs()">
						x
					</view>
				</view>
				<view class="item_content" v-if="index">
					<TaskAdd @apply="apply"></TaskAdd>

				</view>
				<view class="item_content" v-if="index2">
					<TaskDet @apply="apply"></TaskDet>

				</view>
			</view>
		</view>
		<view class="taskadd" v-if="index2">
			<view class="itembox2">
				<view class="item_top">
					<view class="">
						详情
					</view>
					<view class="" @tap="indexs()">
						x
					</view>
				</view>

				<view class="item_content" v-if="index2">
					<TaskDet :cid="Cid"></TaskDet>

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

		<tabbar :selected="2"></tabbar>
	</view>

</template>

<script>
	import TaskAdd from "@/components/task/add.vue"
	import TaskDet from "@/components/task/details.vue"
	import tabbar from '@/components/tabbar.vue'
	export default {
		components: {
			TaskAdd,
			TaskDet,
			tabbar
		},
		data() {
			return {
				title: 'Hello',
				identity: 0,
				progressNub: 60,
				chartData: {
					series: [{
						data: [{
							name: "已接任务",
							value: 0
						}, {
							name: "未接任务",
							value: 0
						}, {
							name: "拒绝任务",
							value: 0
						}, ]
					}]
				},
				dates: {
					year: 2022,
					month: 8,
					day: 0,
				},
				today: {
					month: 8,
				},
				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: "0",
						fontSize: 25,
						color: "#fff"
					},

					extra: {
						ring: {
							width: 50,
							height: 50,
							ringWidth: 10,
							activeOpacity: 0.5,
							activeRadius: 10,
							offsetAngle: 0,
							labelWidth: 15,
							border: false,
							customRadius: 50,
							borderWidth: 3,
							borderColor: "#FFFFFF",
							centerColor: "#57B5FF",
							linearType: "none"
						}
					}
				},
				user: [{
					tasknub: 0
				}],
				isSupervisor: false,
				list: [],
				nub: 0,
				index: false,
				index2: false,
				index3:false,
				OrganizationId: "",
				userId: "",
				Cid: "",
				month: 0,
				xuanchuan: false,
				months: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]
			}
		},
		created() {
			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.today.year = date.getFullYear()
			this.dates.day = date.getDate()
			let a = this.month % 2
			let b = 0
			if (this.dates.year % 4 == 0 && year % 100 != 0 || this.dates.year % 400 == 0) {
				b = 1
			}
			if (this.month < 8 && this.month != 2 && a == 0) {
				for (let i = 0; i < 30; i++) {
					var dt2 = new Date(Date.parse(JSON.stringify(this.dates.month) + " " + "1 " + JSON.stringify(this.dates
						.year)) + i * 24 * 3600 * 1000);
					var weekDay = ["周日", "周一", "周二", "周三", "周四", "周五", "周六"];
					var week = weekDay[dt2.getDay()]
					if (week == "周二" || week == "周四") {
						this.week++
					}
				}
			} else if (this.month < 8 && this.month != 2 && a != 0) {
				for (let i = 0; i < 31; i++) {
					var dt2 = new Date(Date.parse(JSON.stringify(this.dates.month) + " " + "1 " + JSON.stringify(this.dates
						.year)) + i * 24 * 3600 * 1000);
					var weekDay = ["周日", "周一", "周二", "周三", "周四", "周五", "周六"];
					var week = weekDay[dt2.getDay()]
					if (week == "周二" || week == "周四") {
						this.week++
					}
				}
			} else if (this.month >= 8 && a == 0) {
				for (let i = 0; i < 31; i++) {
					var dt2 = new Date(Date.parse(JSON.stringify(this.dates.month) + " " + "1 " + JSON.stringify(this.dates
						.year)) + i * 24 * 3600 * 1000);
					var weekDay = ["周日", "周一", "周二", "周三", "周四", "周五", "周六"];
					var week = weekDay[dt2.getDay()]
					if (week == "周二" || week == "周四") {
						this.week++
					}
				}
			} else if (this.month >= 8 && a != 0) {
				for (let i = 0; i < 30; i++) {
					var dt2 = new Date(Date.parse(JSON.stringify(this.dates.month) + " " + "1 " + JSON.stringify(this.dates
						.year)) + i * 24 * 3600 * 1000);
					var weekDay = ["周日", "周一", "周二", "周三", "周四", "周五", "周六"];
					var week = weekDay[dt2.getDay()]
					if (week == "周二" || week == "周四") {
						this.week++
					}
				}
			} else if (this.month == 2 && !b) {
				for (let i = 0; i < 28; i++) {
					var dt2 = new Date(Date.parse(JSON.stringify(this.dates.month) + " " + "1 " + JSON.stringify(this.dates
						.year)) + i * 24 * 3600 * 1000);
					var weekDay = ["周日", "周一", "周二", "周三", "周四", "周五", "周六"];
					var week = weekDay[dt2.getDay()]
					if (week == "周二" || week == "周四") {
						this.week++
					}
				}
			} else {
				for (let i = 0; i < 29; i++) {
					var dt2 = new Date(Date.parse(JSON.stringify(this.dates.month) + " " + "1 " + JSON.stringify(this.dates
						.year)) + i * 24 * 3600 * 1000);
					var weekDay = ["周日", "周一", "周二", "周三", "周四", "周五", "周六"];
					var week = weekDay[dt2.getDay()]
					if (week == "周二" || week == "周四") {
						this.week++
					}
				}
			}
			this.getOrganizations()
			this.OrganizationId = uni.getStorageSync("user").organizationId
			this.userId = uni.getStorageSync("user").id


		},
		onReady() {

		},
		methods: {
			getOrganizations() {
				const that = this
				let selectedTime = this.dates.year + '-' + this.dates.month + '-' + '01'
				let userId = uni.getStorageSync("user").id
				let roles = uni.getStorageSync("user").roles

				console.log(uni.getStorageSync("user"));
				let isSupervisor = roles.find(item => {
					return item.name.indexOf('检查') != -1
				})
				isSupervisor ? this.isSupervisor = true : this.isSupervisor = false

				let params = {
					ContainsChildren: true,
					pageSize: 9999
				}
				this.$request.get("/api/Organizations", params, (data, res) => {
					console.log(res);
					if (!this.isSupervisor) {
						this.user = res.items
						for (let i = 0; i < this.user.length; i++) {
							this.user[i]["tasknub"] = 0
							this.user[i]["rate"] = 0
						}
					} else {
						this.getSupervisor()
					}
					this.index3 =true
					this.getTaskListOfStation(userId)
				})
			},
			getSupervisor() {
				this.$request.get("/api/Users/Inspectors", {}, (data, res) => {
					console.log(uni.getStorageSync("user").roles, 8800);
					let userName = uni.getStorageSync("user").name;
					// console.log(uni.getStorageSync("user").roles);
					for (let i = 0; i < res.length; i++) {
						if (res[i].name = userName) {
			
							this.user = [res[i]]
							console.log(this.user, 8070);
							for (let i = 0; i < this.user.length; i++) {
								this.user[i]["tasknub"] = 0
								this.user[i]["rate"] = 0
			
							}
						}
					}
				})
			},
			getTaskListOfStation(item) {
				console.log(item);
				let organizationId = uni.getStorageSync("user").organizationId
				const that = this
				let selectedTime = this.dates.year + '-' + this.dates.month + '-' + '01'
				let params = {
					Month: selectedTime,
					SupervisorId: this.isSupervisor ? this.userId : null,
					assistantOrganizationId: this.isSupervisor ? null : this.OrganizationId,
					PageNumber: 1,
					PageSize: 9999,
					approvalStatuses: ['待处理', '通过', '驳回', '待检查', '已检查']
				}
				this.$request.get("/api/PlanTasks", params, (data, res) => {
					console.log(res);
					this.list = res.items
					this.list["tasknub"] = 0
					for (let e = 0; e < this.user.length; e++) {
						for (let i = 0; i < that.list.length; i++) {
							for (let k = 0; k < that.list[i].supervisors.length; k++) {
								// that.list[i].supervisors[k].name=that.list[i].supervisors[k].name.slice(0,3)+"..."
							}
							if (that.list[i].creationTime) {
								let text = that.list[i].creationTime.substring(0, 10)
								that.list[i].creationTime = text
							}

							if (that.list[i].inspectionResult != '待检查') {
								this.user[e].tasknub += 1
							}
						}
					}
					console.log(this.list);
					this.getServerData();
				})
			},
			getServerData() {
				//模拟从服务器获取数据时的延时
				this.nub = 0
				this.chartData = {
					series: [{
						data: [{
							name: "已接任务",
							value: 0
						}, {
							name: "未接任务",
							value: 0
						}, {
							name: "拒绝任务",
							value: 0
						}, ]
					}]
				}

				for (let i = 0; i < this.list.length; i++) {
					if (this.list[i].approvalStatus == "待处理") {
						this.chartData.series[0].data[1].value += 1
						this.nub += 1
					} else if (this.list[i].approvalStatus == "驳回") {
						this.chartData.series[0].data[2].value += 1
						this.nub += 1
					} else {
						this.chartData.series[0].data[0].value += 1
						this.nub += 1
					}
				}
				this.opts.subtitle.name = JSON.stringify(this.nub)
				
			},
			dateYear(e) {
				console.log(e);
				this.dates.year = e.detail.value
				this.getOrganizations()
			},
			dateMonth(e) {
				this.dates.month = e
				this.getOrganizations()
			},
			apply() {
				let that = this;
				this.index = false
				this.getOrganizations()
			},
			indexs() {
				this.index = false
				this.index2 = false
			},
			chakan(e) {
				this.Cid = e
				this.index2 = true
			},
			tongguo(item) {
				// console.log(item);
				let params = {
					approvalStatus: '通过'
				}
				this.$request.post('/api/PlanTasks/Approval/' + item.id + '?approvalStatus=' + '待检查', null, (data, res) => {
					// uni.switchTab({
					// 	url:"/pages/tabbar/index"
					// })
					this.$alert.showError("已通过,可在工作任务中查看")
					this.getOrganizations()
				})
			},
			bohui(item) {
				this.$request.post('/api/PlanTasks/Approval/' + item.id + '?approvalStatus=' + '驳回', null, (data, res) => {
					this.$alert.showError("已驳回")
					this.getOrganizations()
				})
			},
			start(item) {

				uni.navigateTo({
					url: '/pages/task/details?id=' + item.company.id,
				})
			}
		}

	}
</script>

<style lang="scss">
	.page{
		box-sizing: border-box;
		padding-bottom: 100rpx;
	}
	.top {
		position: relative;
		top: 0;
		left: 0;
	}

	.taskadd {
		width: 100vw;
		height: 100vh;
		position: fixed;
		left: 0;
		top: 0;
		background: rgba(49, 49, 51, 0.2);
		z-index: 10;

		.itembox {
			// background: #fff;
			position: absolute;
			bottom: 0;
			left: 0;
			width: 100%;
			height: 600rpx;

			.item_top {
				height: 60rpx;
				background: #F5F7FA;
				border-radius: 40rpx 40rpx 0 0;
				padding: 10rpx 40rpx 0 40rpx;
				display: flex;

				view:nth-child(1) {
					flex: 1;
				}
			}

			.item_content {
				background-color: #fff;
				height: 100%;
			}
		}

		.itembox2 {
			// background: #fff;
			position: absolute;
			bottom: 100rpx;
			left: 0;
			width: 100%;
			height: 400rpx;

			.item_top {
				height: 60rpx;
				background: #F5F7FA;
				border-radius: 40rpx 40rpx 0 0;
				padding: 10rpx 40rpx 0 40rpx;
				display: flex;

				view:nth-child(1) {
					flex: 1;
				}
			}

			.item_content {
				background-color: #fff;
				height: 100%;
			}
		}
	}

	.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: 4%;
		top: 20rpx;
		width: 92%;
		height: 130rpx;
		border-radius: 10rpx;
		box-shadow: 0px 0px 20px 1px #C1D7FF;
		background: #fff;
	
		view {
			height: 60rpx;
		}
	
		.date_year {
	
			display: flex;
			align-items: center;
			background-color: #fff;
			box-sizing: border-box;
			padding: 0 32rpx;
			font-weight: 600;
			border-radius: 10rpx;
	
			.year {
				display: flex;
				align-items: center;
	
				image {
					width: 26rpx;
					height: 26rpx;
				}
			}
	
			.blueblock {
				width: 6rpx;
				height: 30rpx;
				margin-right: 12rpx;
				background: #50B2FF;
			}
	
			.blackblock {
				width: 4rpx;
				height: 30rpx;
				margin: 0 16rpx;
				background: #000;
			}
		}
	
		.monthbox {
			display: flex;
			justify-content: space-around;
			align-items: center;
			flex-direction: row;
			box-sizing: border-box;
			padding: 0 8rpx;
	
			.month_class {
				width: 48rpx;
				height: 48rpx;
				line-height: 48rpx;
				text-align: center;
			}
		}
	
	
	}
	
	button {
		// margin-top: 10rpx;
		width: 120rpx;
		height: 60rpx;
		margin: 10rpx 0 0 10rpx;
		color: #fff;
		border-radius: 30rpx;
		line-height: 60rpx;
		font-size: 24rpx;
		background-color: #327AFE;
	}
	button[type='default'] {
		margin-top: 10rpx;
		width: 120rpx;
		height: 60rpx;
		color: #8f8f94;
		border: none;
		border-radius: 30rpx;
		line-height: 60rpx;
		font-size: 24rpx;
		background-color: rgba(229,231,235,1);
	}
	button::after{
		border: none;
	}
	.taskbox {
		width: 92%;
		margin: 40rpx auto;
		border-radius: 20rpx;
		background-color: #fff;
		box-sizing: border-box;
		padding: 20rpx;
		position: relative;
		left: 0;
		z-index: 10;

		.itembox {

			.top {
				margin-top: 20rpx;
				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: 92%;
		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;
					white-space: nowrap;
					/*内容超宽后禁止换行显示*/

					overflow: hidden;
					/*超出部分隐藏*/

					text-overflow: ellipsis;
					/*文字超出部分以省略号显示*/
					display: flex;

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


			}
		}
	}

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

		.tag {
			text-align: center;
			font-size: 26rpx;
			width: 120rpx;
			height: 50rpx;
			line-height: 50rpx;
			color: #FF6F51;
			border: 1px solid #FF6F51;
			background: rgba(255, 111, 81, 0.2400);
			border-radius: 40rpx 40rpx 40rpx 40rpx;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}
		
		.tag2 {
			text-align: center;
			font-size: 26rpx;
			width: 120rpx;
			height: 50rpx;
			line-height: 50rpx;
			color: #14B488;
			border: 1px solid rgba(30, 232, 177, 0.8);
			background: rgba(30, 232, 177, 0.24);
			border-radius: 40rpx 40rpx 40rpx 40rpx;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}

		.type {
			width: 60rpx;
			height: 40rpx;
			line-height: 40rpx;
			border-radius: 4rpx;
			font-size: 26rpx;
			padding-left: 4rpx;
			// text-align: center;
			font-weight: 500;
			margin-top: 2rpx;
			background: #E63434;
			color: #fff;
		}
		.type_text {
			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);
			flex: 1;

			.zhu {

				color: #100F19;
			}

			view {
				margin-right: 20rpx;
			}

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

		.jiancha {

			margin-right: 10rpx;
			color: #100F19;
		}

		.jiancha_color {
			color: #14B488;
		}
	}

	.implement {

		margin-bottom: 10rpx;

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

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