RMYY_CallCenter_UI/CallCenterWe.../RMYYAPP/pages/components/steps/index.vue

<template>
	<view class="box">
		<!-- 步骤条 -->
		<view class="set-1"  v-show=" showState == 'wxjl' ">
			<view class="set-2" :key="index" v-for="(item,index) in options">
				<text class="set2-test">{{item.F_ProcessingTime}}</text>
				<view class="set-view">
					<!-- <view class="setTitle" style="font-size: 15px !important;margin-bottom: 10px;">工单内容</view> -->
					<view class="setTable">
						<text class="setTitle">处理部门：</text>
						<text class="setCon">{{ $mHelper.findParents(departList,item.F_MaintenanceDept) }}</text>
					</view>
					<view class="setTable">
						<text class="setTitle">处理人员：</text>
						<text class="setCon">{{ item.username}}</text>
					</view>
					<view class="setTable">
						<text class="setTitle">处理结果：</text>
						<text class="setCon">{{item.F_Result}}</text>
					</view>
					<view class="setTable">
						<text class="setTitle">相关附件：</text>
						<uni-file-picker readonly :value="getFileData(item.FileUrl)" :imageStyles="imageStyles"  file-mediatype="image" />
					</view>
				</view>
			</view>
			<view class="set-2">
				
			</view>
		</view>
		<view class="set-1"  v-show=" showState == 'gdlc' ">
			<view class="set-2 gdlc" :key="index" v-for="(item,index) in options">
				<text class="set2-test">{{item.F_OperationTime}}</text>
				<view class="set-view">
					<!-- <view class="setTitle" style="font-size: 15px !important;margin-bottom: 10px;">工单内容</view> -->
					<view class="setTable">
						<text class="setTitle">操作人员：</text>
						<text class="setCon">{{ item.username }}</text>
					</view>
					<view class="setTable">
						<text class="setTitle">内&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;容：</text>
						<text class="setCon">{{ item.F_LogContent}}</text>
					</view>
				</view>
			</view>
			<view class="set-2">
				
			</view>
		</view>
	</view>
</template>

<script>
	import pageData from "@/pages/myTask/repairList/addRepair/pageData.js"
	export default {
		data() {
			return {
				showState: '',
				departList: [],
				userCodeList: [],
				imageStyles: {
					width: 64,
					height: 64,
					border: {
						radius: '20%'
					}
				},
			}
		},
		props:{
			options: Array, //数据
			steteName:String
		},
		watch:{
			"options": function() {
				console.log(this.options)
				this.showState = this.steteName
				pageData.getDet((res, data) => {
					this.departList = data
				})
				// pageData.getApplicant('', (res) => {
				// 	this.userCodeList = res
				// })
			}
		},
		methods: {
			getFileData(fileData) {
				let newFile = []
				if (fileData && fileData.length > 0) {
					fileData.forEach((element, index) => {
						const obj = {}
						obj.url = element.F_FileUrl
						obj.extname = element.F_FileType.split('.')[1]
						obj.name = element.F_FileName
						newFile.push(obj);
					});
			
				}
				return newFile
			}
		}
	}
</script>

<style lang="scss" scoped>
	.box{
		margin-left: -20px;
		padding-bottom: 10px;
	}
	.set-2:last-child::after {
		display: none;
	}
	.set2-test{
		font-size: 26rpx;
		color: #78849e;
	}
	.set-1 {
		margin: 30upx;
		padding-left: 34upx;
	}

	.set-2 {
		height:auto;
		border-radius: 10upx;
		width: 580upx;
		margin-left: 90upx;
		margin-top: 60upx;
		position: relative;
		.set-view{
			width: 101%;
			height: auto;
			background-color: #ffffff;
			box-shadow: 0px 4px 16px 0px rgba(69, 91, 99, 0.13);
			border-radius: 12rpx;
			margin-top: 24rpx;
			margin-left: -10px;
			padding: 5px 2px 5px 10px;
			.setTitle{
				font-weight: 700;
				font-style: normal;
				font-size: 13px;
				color: #525252;
			}
			.setCon{
				color: #525252;
				font-size: 13px;
				 word-break: break-all;
			}
			.setTable{
				margin-bottom: 10px;
			}
		}
	}
	

	.set-2::after {
		content: '';/* 必须存在如果没有图标就留空 */
		top: 19%;/* 定位 距离*/
		border-style: dotted;
		border-left: 1px ;/* 横线颜色 */
		border-color: #78849e;
		left: -70upx;/* 定位 距离*/
		height: 90%;/* 高度 */
		position: absolute;/* 定位 */
	}

	.set-2::before {
		content: "";/* 必须存在如果没有图标就留空 */
		background: url(../../../static/htz-rate/point.png) no-repeat;
		background-size: 100% 100%;
		width: 40rpx;
		height: 40rpx;
		position: absolute;/* 定位 */
		left: -86upx;/* 移动到左边 */
		font-weight: bold;/* 图标样式在复制的图标文件中复制相对应的图标样式必须存在 */
		font-family: "iconfont" !important;/* 图标样式在复制的图标文件中复制相对应的图标样式必须存在 */
		font-size: 54upx;/* 图标大小 */
		font-style: normal;/* 图标样式在复制的图标文件中复制相对应的图标样式必须存在 */
		-webkit-font-smoothing: antialiased;/* 图标样式在复制的图标文件中复制相对应的图标样式必须存在 */
		-moz-osx-font-smoothing: grayscale;/* 图标样式在复制的图标文件中复制相对应的图标样式必须存在 */
	}
	.gdlc::after {
		top: 30%;
	}



</style>