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">
					<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">
					<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 '其他类型';
			        }
			    },
			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>