smartmeter-app/pages_teacher/teacher_teachers/operation_detail.vue

<template>
	<view class="view_body">
		<view class="view_bulk">
			<!-- navbar -->
			<u-navbar :is-back="true" title='详情' title-color="#2E4975" :border-bottom="false" :background="true"
				id="navbar">
			</u-navbar>
			<!-- 听力题库作业 -->
			<view class="view_hearing">
				<view class="view_line">
					<view class="view_first_line">
						<view class="image_earphones">
							<u-icon name="kefu-ermai" color="#F18F21"></u-icon>
						</view>
						<view class="view_first_wz">
							{{workinfo.name}}
						</view>
					</view>

					<view class="toward">进行中</view>
				</view>
				<!-- 描述 -->
				<view class="view_descriptive">
					<view class="view_icon">
						<u-icon name="order"></u-icon>
						<view>描述</view>
					</view>
					<view class="view_textual">
						{{workinfo.des}}
					</view>
				</view>
				<view class="view_descriptive">
					<view class="view_icon">
						<u-icon name="clock"></u-icon>
						<view>时间</view>
					</view>
					<view class="view_textual">
						{{workinfo.doneTime}}
					</view>
				</view>
				<view class="view_descriptive">
					<view class="view_icon">
						<u-icon name="clock"></u-icon>
						<view>已完成</view>
					</view>
					<view class="speed_box">
						<view class="speed" :style="'width:' + uploadspeath + '%;'">
							{{ uploadspeath }}%
						</view>
					</view>
				</view>
			</view>
			<!-- 班级 -->
			<view class="ap_class">
				<!-- 安排班级 -->
				<view class="ap_classes" @click="toclass()">
					<view class="ad_organization">
						<view class="ad_ap">班级安排</view>
						<view class="ad_icon">
							<u-icon name="arrow-right"></u-icon>
						</view>
					</view>
					<view class="ad_images">
						<view v-for="(item,index ) in workinfo.classrooms" :key="index" v-if="index<=4">
							<image :src="item.avatar" mode=""></image>
						</view>
						<view class="shenlue" v-if="workinfo.classrooms.length>4">
							{{workinfo.classrooms.length}}
						</view>
					</view>
				</view>
				<!-- 成员安排 -->
				<view class="ap_classes" @click="tostu()">
					<view class="ad_organization">
						<view class="ad_ap">成员安排</view>
						<view class="ad_icon">
							<u-icon name="arrow-right"></u-icon>
						</view>
					</view>
					<view class="ad_images">
						<view v-for="(item,index ) in workinfo.members" :key="index" v-if="index<=4">
							<image :src="item.avatar" mode="">
							</image>
						</view>
						<view class="shenlue" v-if="workinfo.members.length>4">
							{{workinfo.members.length}}
						</view>
					</view>
				</view>
			</view>
			<!-- 时间线 -->
			<template v-for="(item,index) in workinfo.papers">
				<view class="title" style="">
					{{item.paperName}}
				</view>
				<view class="view_timeline" style="margin-top: 20rpx;">
					<u-time-line>
						<!-- 时间线1 -->
						<u-time-line-item nodeTop="2" node-color="red" v-for="(itemsx,indexx) in item.items"
							:key="indexx">
							<template v-slot:content>
								<view>
									<view class="u-order-title">
										<view class="fickle">
											<view class="view_first_wz" v-if="itemsx.classify==1||itemsx.classify==2">
												{{itemsx.testName}}
											</view>
											<view class="view_first_wz" v-if="itemsx.classify==3">{{itemsx.testName}}
											</view>
											<view class="view_first_wz" v-if="itemsx.classify==4">
												{{itemsx.moduleName}}-{{itemsx.partName}}
											</view>
											<view class="changeable greenish" v-if="itemsx.classify==1">听力</view>
											<view class="changeable yellow" v-if="itemsx.classify==2">阅读</view>
											<view class="changeable blur" v-if="itemsx.classify==3">写作</view>
											<view class="changeable violet" v-if="itemsx.classify==4">口语</view>
										</view>


									</view>
									<veiw class="blue-green">

										<view class="blue_qs" :style="'width:' + itemsx.speedwidth + '%;'"
											v-if="itemsx.classify==1">

										</view>
										<view class="blue_qs2" :style="'width:' + itemsx.speedwidth + '%;'"
											v-if="itemsx.classify==2">
										</view>
										<view class="blue_qs3" :style="'width:' + itemsx.speedwidth + '%;'"
											v-if="itemsx.classify==3">
										</view>
										<view class="blue_qs4" :style="'width:' + itemsx.speedwidth + '%;'"
											v-if="itemsx.classify==4">
										</view>
										<view class="text" style="z-index: 2;"
											v-if="itemsx.classify==1||itemsx.classify==2">
											{{itemsx.partName}}
										</view>
										<view class="word" style="z-index: 2;"
											v-if="itemsx.classify==1||itemsx.classify==2">
											:{{itemsx.questionType}}
										</view>
										<view class="text" style="z-index: 2;" v-if="itemsx.classify==3">
											{{itemsx.partName}}
										</view>

										<view class="text" style="z-index: 2;" v-if="itemsx.classify==4">
											{{itemsx.questionName}}
										</view>

										<view class="word" style="z-index: 2;" v-if="itemsx.classify==4">
											:
											<span v-for=" ts in itemsx.speakingType.split(',') " :key="ts">
												{{ getTypeText(ts) }}
											</span>
										</view>
									</veiw>

								</view>
							</template>
						</u-time-line-item>

					</u-time-line>
				</view>
			</template>
			<view class="zhanwei" style="width: 100%;height: 50rpx;">

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

<script>
	export default {
		data() {
			return {
				id: 0,
				workinfo: [],
				uploadspeath: 0
			}
		},
		onLoad(option) {
			console.log(option);
			this.id = option.id
			// this.classid=15
			this.getworklist()
		},

		methods: {
			getTypeText(type) {
				switch (type) {
					case '1':
						return '串题' + " ";
					case '2':
						return '跟读' + " ";
					case '3':
						return '模考' + " ";
					default:
						return '其他类型';
				}
			},
			toclass(){
				uni.navigateTo({
					url: "/pages_teacher/pages_add/add_class?id=" +this.workinfo.id
				
				}).then(res => {
				
				}).catch(err => {
				
				});
			},
			tostu(){
				uni.navigateTo({
					url: "/pages_teacher/teacher_class/class_members?id=" + this.workinfo.id
				
				}).then(res => {
				
				}).catch(err => {
				
				});
			},
			getworklist() {
				this.$u.get(`https://api.admin-v2.langsi.online/admin-api/classroom/work-record/detail?workId=${this.id}`)
					.then(res => {


						if (res.code == 0) {
							this.workinfo = res.data
							this.uploadspeath = (this.workinfo.doneNum / this.workinfo.totalNum) * 100;

							let json = JSON.stringify(this.workinfo)

							for (const paper of this.workinfo.papers) {
								// Loop through items in each paper
								for (const item of paper.items) {
									// Calculate speedwidth and add it to the item
									item.speedwidth = (item.doneNum / item.totalNum) * 100;
								}
							}

							// this.orgworkinfo = JSON.parse(JSON.stringify(res.data));
							// this.classlist = res.data.list
							// this.isloding = false

						}
					})
			},
		}
	}
</script>

<style lang="scss" scoped>
	::v-deep .u-dot {

		/* 在这里编写你的样式代码 */
		background: #2D7CE6 !important;
	}

	.title {
		margin-top: 32rpx;
		font-size: 40rpx;
		font-family: 'YOUSHEBIAOTIHEI-2', 'YOUSHEBIAOTIHEI-2';
		font-weight: 400;
		color: #2E4975;
	}

	.view_body {
		width: 100%;
		background: linear-gradient(183deg, #F0F6FF 0%, #FAFAFA 100%);
		box-sizing: border-box;
	}

	.view_bulk {
		width: 91.3%;
		margin: 0 auto;

	}

	.view_hearing {
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		background-color: #fff;
		padding: 36rpx 32rpx;
	}

	.view_first_line {
		display: flex;
	}

	.view_first_wz {
		font-size: 28rpx;
		font-weight: 800;
		color: #2E4975;
		margin-left: 12rpx;
	}

	.view_line {
		display: flex;
		justify-content: space-between;
	}

	.toward {
		font-size: 24rpx;
		font-weight: 500;
		color: #F18F21;
	}

	.view_descriptive {
		display: flex;
		flex-direction: column;
		margin-top: 22rpx;

		.speed_box {
			margin-top: 10rpx;
			width: 622rpx;
			height: 25rpx;
			background: #EBEBEB;
			border-radius: 12rpx 12rpx 12rpx 12rpx;

			.speed {
				padding-right: 4rpx;
				// display: flex;

				// justify-content: center;
				text-align: right;
				height: 25rpx;
				background: #2D7CE6;
				border-radius: 12rpx 12rpx 12rpx 12rpx;
				font-size: 20rpx;
				font-family: 'PingFang', 'PingFang';
				font-weight: 500;
				color: #FFFFFF;
			}
		}
	}

	.view_icon {
		display: flex;

		view {
			font-size: 25rpx;
			font-weight: 500;
			color: rgba(46, 73, 117, 0.6);
			margin-left: 10rpx;
		}
	}

	.view_textual {
		font-size: 25rpx;
		font-weight: 500;
		color: #2E4975;
		margin-top: 15rpx;
	}

	.progress {
		margin-top: 15rpx;
	}

	.ap_class {
		display: flex;
		justify-content: space-between;
		margin: 20rpx 0rpx;
	}

	.ap_classes {
		display: flex;
		flex-direction: column;
		padding: 24rpx;
		background: linear-gradient(174deg, #FFF2E4 0%, #FFFFFF 100%);
		border-radius: 20rpx 20rpx 20rpx 20rpx;
	}

	.ad_icon {
		margin-left: 130rpx;
	}

	.ad_organization {
		display: flex;
	}

	.ad_images {
		display: flex;
		// justify-content: space-between;
		margin-top: 32rpx;

		.shenlue {
			display: flex;
			justify-content: center;
			align-items: center;
			background-color: #FFF2E4;
			border-radius: 50%;
			width: 36rpx;
			height: 36rpx;
			font-size: 20rpx;
			font-family: 'PingFang', 'PingFang';
			font-weight: 800;
			color: #F18F21;

		}
	}

	.ad_images view {
		width: 36rpx;
		height: 36rpx;
		margin-right: 12rpx;
	}

	.ad_ap {
		font-size: 32rpx;
		font-weight: 800;
		color: #2E4975;
	}

	.view_timeline {
		padding: 32rpx;
		background: #FFFFFF;
		border-radius: 20rpx 20rpx 20rpx 20rpx;

	}

	//时间线
	.u-order-title {
		display: flex;
		justify-content: space-between;
	}

	.timeline_image {
		width: 24rpx;
		height: 24rpx;
		margin-left: 40rpx;
	}

	.fickle {
		display: flex;
	}

	.timeline_tb {
		display: flex;
	}

	.text_wrap {
		width: 380rpx;
		height: 38rpx;
		font-size: 24rpx;
		font-weight: 500;
		color: #2E4975;
		line-height: 38rpx;
		padding: 20rpx;
	}

	.blue-green {
		height: 78rpx;
		position: relative;
		display: flex;
		flex-wrap: nowrap;
		align-items: center;
		// justify-content: space-between;
		background: #F9F9F9;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		// padding: 20rpx;
		margin-top: 15rpx;

		.text {
			max-width: 300rpx;
			z-index: 2;
			margin-left: 20rpx;
			font-size: 24rpx;
			font-family: 'PingFang', 'PingFang';
			font-weight: 500;
			color: #2E4975;

			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
		}

		.word {
			z-index: 2;
			font-size: 24rpx;
			font-family: 'PingFang', 'PingFang';
			font-weight: 500;
			color: #2E4975;
		}
	}

	.blue_qs {
		position: absolute;
		left: 0;
		top: 0;
		// width: 268rpx;
		z-index: 1;
		height: 78rpx;
		background: #E8FCF7;
		border-radius: 20rpx 0rpx 0rpx 20rpx;
	}

	.blue_qs2 {
		z-index: 1;
		position: absolute;
		left: 0;
		top: 0;
		width: 416rpx;
		height: 78rpx;
		background: #FCF0D4;
		border-radius: 20rpx 0rpx 0rpx 20rpx;
	}

	.blue_qs3 {
		z-index: 1;
		position: absolute;
		left: 0;
		top: 0;
		width: 543rpx;
		height: 78rpx;
		background: rgba(63, 122, 242, 0.1);
		border-radius: 20rpx 0rpx 0rpx 20rpx;
	}

	.blue_qs4 {
		z-index: 1;
		position: absolute;
		left: 0;
		top: 0;
		width: 543rpx;
		height: 78rpx;
		background: #FEECF7;
		border-radius: 20rpx 0rpx 0rpx 20rpx;
	}


	.text-right {
		position: absolute;
		right: 13rpx;
		top: 20rpx;
	}

	.u-node {
		width: 44rpx;
		height: 44rpx;
		border-radius: 100rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		background: #d0d0d0;
	}

	.changeable {
		padding: 10rpx 20rpx;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		font-size: 20rpx;
		font-weight: 500;

		margin-left: 12rpx;
	}



	.u-order-desc {
		color: rgb(150, 150, 150);
		font-size: 28rpx;
		margin-bottom: 6rpx;
	}

	.u-order-time {
		color: rgb(200, 200, 200);
		font-size: 26rpx;
	}

	.greenish {
		background: rgba(27, 225, 178, 0.1);
		color: #1BE1B2;
	}

	.yellow {
		background: rgba(242, 182, 42, 0.2);
		color: #F2AA02;
	}

	.blur {
		background: rgba(63, 122, 242, 0.2);
		color: #3F7AF2;
	}

	.violet {
		background: rgba(242, 63, 170, 0.1);
		color: #F23FEB;
	}
</style>