aiot-app/pages/maintenanceWorkorder/detail/detail.vue

<template>
	<view :class="{ popupShow: popupShow }">
		<uni-nav-bar fixed="true" statusBar="true" left-icon="back" title="维修工单详情" @clickLeft="back"></uni-nav-bar>
		<view class="tab-title">
			<view>
				<text v-for="(item, index) in tabList" :key="index" class="tab-item" v-text="item.label"
					:class="index === pickTabIndex ? 'active' : ''" @click="changeChartsTab(index)">
				</text>
			</view>

		</view>
		<!-- 		<uni-list direction="row" >
			
			<uni-list-item v-for="(item, index) in tabList" :key="index"  :title="item.label" ></uni-list-item>
		</uni-list> -->
		<view class="main">
			<!-- 工单信息 -->
			<view class="kd-baseInfo" v-if="pickTabIndex == 0">
				<view class="kd-cell">
					<text class="kd-label">工单编号</text>
					{{ worksheetInfo.code }}
				</view>
				<view class="kd-cell">
					<text class="kd-label">执行部门</text>
					{{ worksheetInfo.executeGroupName }}
				</view>
				<view class="kd-cell">
					<text class="kd-label">执行人</text>
					{{ worksheetInfo.executeUserName }}
				</view>
				<view class="kd-cell">
					<text class="kd-label">计划单号</text>
					{{ worksheetInfo.planCode }}
				</view>
				<view class="kd-cell">
					<text class="kd-label">计划名称</text>
					{{ worksheetInfo.planName }}
				</view>
				<view class="kd-cell" v-if="workOrderType.code != 10">
					<text class="kd-label">计划完成时间</text>
					{{ worksheetInfo.planFinishTime }}
				</view>

				<view class="kd-cell" v-if="workOrderType.code == 10">
					<text class="kd-label">计划开始时间</text>
					{{ worksheetInfo.planStartTime }}
				</view>

				<view class="kd-cell" v-if="workOrderType.code == 10">
					<text class="kd-label">计划完成时间</text>
					{{ worksheetInfo.planEndTime }}
				</view>

				<view class="kd-cell">
					<text class="kd-label">开工时间：</text>
					{{ worksheetInfo.acceptTime }}
				</view>

				<view class="kd-cell">
					<text class="kd-label">完工时间：</text>
					{{ worksheetInfo.finishTime }}
				</view>

				<view class="kd-cell">
					<text class="kd-label">实际工时：</text>
					{{ timeInterval(worksheetInfo.acceptTime, worksheetInfo.finishTime) }}
				</view>

				<!-- *** 新增 照片列表 -->
				<view class="kd-cell">
					<text class="kd-label">照片列表：</text>
					<PreviewPhoto type="view" :imageList="worksheetInfo.workOrderImg" />
				</view>

				<view class="zxpg-wrap" v-if="orderType == 1 && repairInfo.repairUserId == userId && ParentIndex !=4">
					<template v-if="repairInfo.orderStatus == 0">
						<!-- <view class="zx-btn btns" @click="handleExecute">开始执行</view> -->
						<view class="zp-btn btns" @click="handlbpbj">申请备品备件</view>
						<view class="zx-btn btns" @click="handleNotice">开始执行</view>
						<view class="zp-btn btns" @click="handlZp">转派</view>
					</template>

					<template v-else-if="repairInfo.orderStatus == 2">
						<view class="zp-btn btns" @click="handlbpbj">申请备品备件</view>
						<view class="zx-btn btns" @click="handlbg">报工</view>
						<view class="zx-btn btns" style="margin-top: 20rpx;" @click="handlNobg">非完成报工</view>
						<!-- <view class="zp-btn btns" @click="handlbpbj" v-if="!worksheetInfo.applyOrder">
							申请备品备件
						</view>
						<view class="zp-btn btns" v-if="worksheetInfo.applyOrder" @click="handCkbpbj">
							查看备品备件
						</view> -->
					</template>
					<template v-if="repairInfo.orderStatus == 3 && repairInfo.repairUserId == userId">
						<view class="zx-btn btns disabled">待验收</view>
					</template>
					<template v-if="repairInfo.orderStatus == 3 && repairInfo.requestUserId == userId">
						<view class="zx-btn btns" @click="searchShow = true">验收</view>
					</template>
					<!-- <div class="apply-box">
						<view class="zp-btn btns" @click="handlbpbj" v-if="worksheetInfo.status.code != 5 && worksheetInfo.status.code != 3 && worksheetInfo.status.code != 7">申请备品备件</view>
						<view class="zp-btn btns" @click="handlZp" v-if="worksheetInfo.status.code === 8">转派</view>
					</div> -->
				</view>
				<view class="zxpg-wrap"
					v-if="orderType == 1 && repairInfo.orderStatus == 3 && repairInfo.requestUserId == userId && ParentIndex !=4">
					<view class="zx-btn btns" @click="searchShow = true">验收</view>
				</view>

				<Assign ref="Assign" @success="handleAssign"></Assign>
				<SearchPopup mode="center" v-if="searchShow">
					<template v-slot:list>
						<maintain_course :repairInfoLogList="repairInfoLogs" :workOrderCode="workOrderCode">
						</maintain_course>
					</template>

					<template v-slot:operate>
						<view class="operate_box">
							<u--textarea v-model="remark" confirm-type="send" count placeholder="请输入内容"></u--textarea>
						</view>
						<!-- <u-input v-model="remark" type="textarea" border="true" placeholder="请输入内容" /> -->
						<!-- <u--textarea v-model="remark" placeholder="请输入内容"></u--textarea> -->
						<view class="operate_box">
							<u-button :loading="btnLoading" type="success" size="small" class="u-reset-button"
								@click="surereject(4)">验收</u-button>
							<u-button :loading="btnLoading" size="small" class="u-reset-button"
								@click="surereject(5)">驳回</u-button>
							<u-button size="small" class="u-reset-button" @click="searchShow = false">取消</u-button>
						</view>
					</template>
				</SearchPopup>
			</view>
			<!-- 报修信息 -->
			<view class="bg" v-if="pickTabIndex == 1">
				<view class="kd-baseInfo" v-if="workOrderType.code != 10">
					<view class="kd-cell">
						<text class="kd-label">报修记录编号</text>
						{{ repairInfo.code }}
					</view>
					<view class="kd-cell">
						<text class="kd-label">报修时间</text>
						{{ repairInfo.createTime }}
					</view>
					<view class="kd-cell">
						<text class="kd-label">来源编码</text>
						{{ repairInfo.sourceType }}
					</view>
					<view class="kd-cell">
						<text class="kd-label">固资编码</text>
						{{ equipmentInfo.fixCode }}
					</view>
					<view class="kd-cell">
						<text class="kd-label">内部编码</text>
						{{ equipmentInfo.codeNumber }}
					</view>
					<view class="kd-cell">
						<text class="kd-label">报修部门</text>
						{{ repairInfo.requestDeptName }}
					</view>
					<view class="kd-cell">
						<text class="kd-label">报修人</text>
						{{ repairInfo.requestUserName }}
					</view>
					<view class="kd-cell">
						<text class="kd-label">报修人电话</text>
						{{ repairInfo.requestUserPhone }}
					</view>
					<view class="kd-cell">
						<text class="kd-label">期望完成时间</text>
						{{ repairInfo.expectedTime }}
					</view>
					<!-- <view class="kd-cell">
						<text class="kd-label2">委托单位交底负责人</text>
						{{ repairInfo.code }}
					</view>

					<view class="kd-cell">
						<text class="kd-label2">交底时间</text>
						{{ repairInfo.code }}
					</view>

					<view class="kd-cell">
						<text class="kd-label2">接受交底负责人</text>
						{{ repairInfo.code }}
					</view> -->

					<view class="kd-cell">
						<text class="kd-label">故障描述</text>
						{{ repairInfo.remark }}
					</view>

					<!-- <view class="img-wrap" v-if="workOrderType.code != 10 && worksheetInfo.repairInfo.repairsImg">
						<image
							class="img"
							@click="clickImg(worksheetInfo.repairInfo.repairsImg.split(','), item_s)"
							:src="apiUrl + item_s"
							v-for="(item_s, index_s) in worksheetInfo.repairInfo.repairsImg.split(',')"
							:key="index_s"></image>
					</view> -->
				</view>

				<view class="kd-baseInfo" v-if="workOrderType.code == 10">
					<view class="kd-cell">
						<text class="kd-label">报修时间</text>
						{{ planRepair.createTime }}
					</view>

					<view class="kd-cell">
						<text class="kd-label">维修部门</text>
						{{ planRepair.executorDeptName }}
					</view>

					<view class="kd-cell">
						<text class="kd-label">维修人员</text>
						{{ planRepair.executorName }}
					</view>
				</view>
			</view>
			<!-- 设备信息 -->
			<view class="kd-baseInfo" v-if="pickTabIndex == 2">
				<view class="kd-cell">
					<text class="kd-label">设备编码</text>
					{{ equipmentInfo.code }}
				</view>
				<view class="kd-cell">
					<text class="kd-label">设备名称</text>
					{{ equipmentInfo.name }}
				</view>
				<view class="kd-cell">
					<text class="kd-label">设备分类</text>
					{{ equipmentInfo.category ? equipmentInfo.category.category.categoryLevelPath : '' }}
				</view>
				<view class="kd-cell">
					<text class="kd-label">固资编码</text>
					{{ equipmentInfo.fixCode }}
				</view>
				<view class="kd-cell">
					<text class="kd-label">内部编码</text>
					{{ equipmentInfo.codeNumber }}
				</view>
				<view class="kd-cell">
					<text class="kd-label">规格型号</text>
					{{ equipmentInfo.category && equipmentInfo.category.category.specification }}|{{ equipmentInfo.category && equipmentInfo.category.category.modelType }}
				</view>
				<view class="kd-cell" v-if="workOrderType.code != 10">
					<text class="kd-label">权属部门</text>
					{{ equipmentInfo.ownershipGroupName }}
				</view>
				<view class="kd-cell" v-if="workOrderType.code != 10">
					<text class="kd-label">权属人</text>
					{{ equipmentInfo.ownershipUserName }}
				</view>
				<view class="kd-cell" v-if="workOrderType.code != 10">
					<text class="kd-label">权属部门电话</text>
					{{ equipmentInfo.ownershipUserMobile }}
				</view>
				<view class="kd-cell" v-if="workOrderType.code != 10">
					<text class="kd-label">设备位置</text>
					{{ equipmentInfo.deviceLocationName + '-' + equipmentInfo.deviceDetailAddress }}
				</view>
			</view>

			<!-- 维修历程 -->
			<view class="" v-if="pickTabIndex == 3">
				<!-- 步骤条 -->
				<maintain_course :repairInfoLogList="repairInfoLogs" :workOrderCode="workOrderCode"></maintain_course>
			</view>
			<!-- 维修记录 -->
			<view class="wx-main" v-if="pickTabIndex == 4">
				<view class="wx-wrap">
					<view class="item" v-for="(item, index) in repairHistoryList" :key="index">
						<view class="bh-wrap">
							<view class="s1">
								<view class="title-md">工单编号：</view>
								<view class="b1">
									{{ item.workOrderCode }}
								</view>
							</view>
							<view class="s2">{{ item.createTime }}</view>
						</view>
						<fold :hide="false">
							<view class="title-wrap">
								<view class="s1 title-md">执行人</view>
								<view class="s2">
									{{ item.executeUserName }}
								</view>
							</view>
							<view class="bg-wrap-item">
								<view class="label title-md">故障描述</view>
								<view class="value-wrap">
									<view class="text">
										{{ item.remark }}
									</view>
									<view class="img-wrap" v-if="item.repairsImg">
										<image class="img" @click="clickImg(item.repairsImg.split(','), item_s)"
											:src="apiUrl + item_s"
											v-for="(item_s, index_s) in item.repairsImg.split(',')" :key="index_s">
										</image>
									</view>
								</view>
							</view>
							<view class="bg-wrap-item">
								<view class="label title-md">处理说明</view>
								<view class="value-wrap">
									<view class="text">
										{{ item.repairReportExplain }}
									</view>
									<view class="img-wrap" v-if="item.workOrderImg">
										<image class="img" @click="clickImg(item.workOrderImg.split(','), item_s)"
											:src="apiUrl + item_s"
											v-for="(item_s, index_s) in item.workOrderImg.split(',')" :key="index_s">
										</image>
									</view>
								</view>
							</view>
							<!-- <view class="bjsymx" @click="handlbjsymx(item.repairLogVOS, true)">备件使用明细</view> -->
							<view class="bjsymx" @click="handDetail(item.repairLogVOS)">详情流程</view>
						</fold>
					</view>
				</view>
			</view>
			<!-- 备品备件 sparePartsApply-->
			<view class="wx-main" v-if="pickTabIndex == 5">
				<pickCard :list="sparePartsApply" />
			</view>
		</view>
		<PopSparePart ref="PopSparePart" :workOrderCode="sparePartWorkOrderCode" :noRequest="true"></PopSparePart>
		<!-- <Approval v-if="isApproval && worksheetInfo.status && worksheetInfo.status.code == 5" :devOpsType="1" :planType="3" :myHandleId="myHandleId" :id="worksheetInfo.workOrderId" /> -->
		<HistoryRepairDetail ref="HistoryRepairDetail" @close="close"></HistoryRepairDetail>
		<Notice v-if="noticeShow" :id="worksheetInfo.id" :repairInfo="repairInfo" @agree="agree"></Notice>
		<unfinishedApplication ref="unfinishedA"></unfinishedApplication>
	</view>
</template>

<script>
	import PreviewPhoto from '@/pages/maintenance/check/components/PreviewPhoto.vue'
	import {
		startExecuting
	} from '@/api/myTicket/index.js'
	import Step from '@/components/Step/Step.vue'
	import StepItem from '@/components/Step/StepItem.vue'
	import Assign from '@/components/Assign.vue'
	import fold from '../components/fold.vue'
	import unfinishedApplication from '../components/unfinishedApplication.vue'
	import HistoryRepairDetail from '../components/historyRepairDetail.vue'
	import PopSparePart from '../components/PopSparePart.vue'
	import pickCard from '../components/pickCard.vue'
	// import Approval from '@/components/Approval.vue' // 审批组件
	import maintain_course from '../components/maintain_course.vue'
	import Notice from '../components/notice.vue'
	import {
		get,
		postJ,
		post
	} from '@/utils/api.js'
	import {
		getWorkOrderDetail,
		getAssetInfo,
		historyRepairList,
		acceptance,
		getSparePartsApply
	} from '@/api/repair'
	import SearchPopup from '@/pages/pda/components/searchPopup.vue'
	export default {
		components: {
			PreviewPhoto,
			Step,
			StepItem,
			Assign,
			fold,
			PopSparePart,
			// Approval,
			maintain_course,
			Notice,
			HistoryRepairDetail,
			SearchPopup,
			pickCard,
			unfinishedApplication
		},
		computed: {
			// 是否为自己的工单
			// isMygd() {
			// 	let userInfo = uni.getStorageSync('userInfo')
			// 	// 当前登录人id
			// 	let userId = userInfo.id
			// 	// 执行人id
			// 	let executeUserId = this.worksheetInfo.executeUserId
			// 	if (executeUserId == userId) {
			// 		return true
			// 	} else {
			// 		return false
			// 	}
			// }
		},
		data() {
			return {
				btnLoading: false,
				orderType: 1,
				remark: '',
				userId: '',
				searchShow: false,
				popupShow: false,
				repairHistoryList: [],
				repairInfoLogs: [],
				sparePartsApply: [],
				id: '',
				type: 1,
				sparePartWorkOrderCode: '',
				tabList: [{
						label: '工单信息',
						value: '0'
					},
					{
						label: '报修信息',
						value: '1'
					},
					{
						label: '设备信息',
						value: '2'
					},
					{
						label: '维修历程',
						value: '3'
					},
					{
						label: '维修记录',
						value: '4'
					},
					{
						label: '备品备件申请单',
						value: '5'
					}
				],
				pickTabIndex: 0,
				workOrderCode: '',
				worksheetInfo: {},
				equipmentInfo: {},
				repairInfo: {},
				dict: {
					// 报修来源 1:手动创建;2:工单反工;3:告警通知;4:保养工单;5:巡点检工单)
					source: {
						1: '手动创建',
						2: '工单反工',
						3: '告警通知',
						4: '保养工单',
						5: '巡点检工单'
					}
				},
				// 设备信息
				device: {},
				isApproval: false,
				myHandleId: '',
				equiCode: '',

				noticeShow: false,

				workOrderType: {},
				planRepair: {},
				ParentIndex: 0,
			}
		},
		onLoad(options) {
			this.id = options.id
			this.workOrderCode = options.code
			this.planId = options.planId
			this.orderType = options.orderType
			this.ParentIndex = options.ParentIndex
			let userInfo = uni.getStorageSync('userInfo')
			// 当前登录人id
			this.userId = userInfo.userId
			// this.isApproval = options.type === 'approval'
			// this.myHandleId = options.myHandleId
		},
		onShow() {
			if (this.workOrderCode) {
				this.getInfo()
			}
		},
		methods: {
			surereject(orderStatus) {
				this.btnLoading = true
				let params = {
					orderStatus,
					remark: this.remark,
					workOrderId: this.id
				}
				acceptance(params).then(res => {
					uni.showToast({
						icon: 'success',
						title: orderStatus == 4 ? '审核通过！' : '驳回成功!',
						duration: 2000
					})
					this.searchShow = false
					this.btnLoading = false
					this.getInfo()
				})
			},
			back() {
				uni.navigateBack({
					delta: 1
				})
			},
			close() {
				this.popupShow = false
			},
			handleAssign() {
				this.back()
			},
			// 获取历史维修记录
			getHistoryRepairList(deviceId) {
				historyRepairList({
					id: deviceId,
					pageNum: 1,
					size: 999
				}).then(data => {
					this.repairHistoryList = data.list
				})
			},
			// 获取设备信息
			getDeviceInfo(deviceId) {
				getAssetInfo(deviceId).then(res => {
					if (res) {
						this.equipmentInfo = res
						this.$set(this.equipmentInfo, 'position', res.positionList?.length > 0 && res.positionList[
							0].pathName ? res.positionList[0].pathName : '')
					}
				})
			},
			//获取备品备件
			async getSparePartsApply(id) {
				const list = await getSparePartsApply(id)
				this.sparePartsApply = list
			},
			getInfo() {
				getWorkOrderDetail(this.workOrderCode).then(data => {
					// *** 新增 照片数据接收
					if(data.ticketsInfoResponse.workOrderImg){
						data.ticketsInfoResponse.workOrderImg = JSON.parse(data.ticketsInfoResponse.workOrderImg);
					}
					console.log(data, '看看数据')
					this.worksheetInfo = data.ticketsInfoResponse
					this.repairInfo = data.repairRequestResponse
					this.getDeviceInfo(this.worksheetInfo.deviceId)
					this.getHistoryRepairList(this.worksheetInfo.deviceId)
					this.getSparePartsApply(this.worksheetInfo.id)
					let repairInfoLogs =
						data.ticketsInfoResponse.repairLogVOS?.length > 0 ?
						data.ticketsInfoResponse.repairLogVOS.map(item => {
							return {
								...item,
								requestUserName: data.repairRequestResponse.requestUserName,
								remark: data.repairRequestResponse.remark
							}
						}) : []
					this.repairInfoLogs = repairInfoLogs.reverse()
				})
				// get(this.apiUrl + '/repair/info/getWorkOrderDetail/' + this.workOrderCode).then(res => {
				// 	if (res.success) {
				// 		res.data.repairInfoLogList = res.data.repairInfoLogList.reverse()
				// 		res.data.repairInfoLogList = res.data.repairInfoLogList.map(n => {
				// 			if (n.content) {
				// 				n.content = JSON.parse(n.content)
				// 			}
				// 			return n
				// 		})
				// 		this.worksheetInfo = res.data
				// 		this.workOrderType = res.data?.workOrderType
				// 		this.equiCode = res.data?.repairInfo?.equiCode
				// 		if (this.workOrderType.code == 10) {
				// 			this.planRepair = res.data?.planRepair
				// 			this.device = res.data.planRepairEqui
				// 			let districtManName = res.data?.planRepair.districtManName.split(',')
				// 			this.worksheetInfo.repairInfo = {
				// 				repairsPerson: districtManName[0]
				// 			}
				// 		} else {
				// 			this.getDevice()
				// 		}
				// 	}
				// })
			},
			changeChartsTab(index) {
				this.pickTabIndex = index
			},
			// 跳转备品备件
			handlbpbj() {
				this.equipmentInfo['category']['modelType'] = this.equipmentInfo.category && this.equipmentInfo.category
					.category.modelType
				let data = JSON.parse(JSON.stringify(this.worksheetInfo));
				data['deviceList'] = [this.equipmentInfo];
				data['pageType'] = 'add'
				uni.navigateTo({
					url: `/pages/maintenanceWorkorder/sparepart/sparepart?data=${JSON.stringify(data)}`
				})
			},
			// 查看备品备件 详情
			handCkbpbj() {
				uni.navigateTo({
					url: `/pages/maintain_service/sparepart/sparepartDetail?applyOrder=${this.worksheetInfo.applyOrder}`
				})
			},
			// 跳转报工
			handlbg() {
				uni.navigateTo({
					url: `/pages/maintenanceWorkorder/submitted_ministry/submitted_ministry?workOrderCode=${this.repairInfo.code}&code=${this.workOrderCode}&id=${this.id}&deviceName=${this.repairInfo.deviceName}`
				})
			},
			// 跳转非完成报工
			handlNobg() {
				this.$refs.unfinishedA.open(this.worksheetInfo.id)
			},
			// 保修须知
			handleNotice() {
				this.noticeShow = true
			},

			agree() {
				this.noticeShow = false
				this.handleExecute()
			},

			// 执行工单
			handleExecute() {
				startExecuting({
					id: this.id
				}).then(() => {
					uni.showToast({
						icon: 'success',
						title: '操作成功！',
						duration: 2000
					})
					this.getInfo()
				})
			},
			// 转派
			handlZp() {
				let id = this.worksheetInfo.id
				this.$refs.Assign.open(id, 'Transfer')
			},
			// 详情
			handDetail(data) {
				this.popupShow = true
				this.$refs.HistoryRepairDetail.open('历史维修详情', data)
			},
			// 备件使用明细
			handlbjsymx(data) {
				this.$refs.PopSparePart.open('备件使用明细', data)
			},
			// 获取设备信息
			getDevice() {
				try {
					let par = {
						code: this.worksheetInfo.repairInfo.equiCode
					}

					get(this.apiUrl + '/asset/detail', par).then(res => {
						if (res.success) {
							this.device = res.data
						}
					})
				} catch (e) {
					//TODO handle the exception
				}
			},
			// 查看图片
			clickImg(urls, indexUrl) {
				urls = urls.map(n => {
					return this.apiUrl + n
				})
				wx.previewImage({
					urls: urls, //需要预览的图片http链接列表，多张的时候，url直接写在后面就行了
					current: this.apiUrl + indexUrl, // 当前显示图片的http链接，默认是第一个
					success: function(res) {},
					fail: function(res) {},
					complete: function(res) {}
				})
			},

			// 计算实际工时
			timeInterval(dt1, dt2) {
				if (!dt1 || !dt2) {
					return ''
				}
				if (typeof dt1 == 'string') {
					dt1 = new Date(dt1.replace(/-/, '/'))
					dt2 = new Date(dt2.replace(/-/, '/'))
				}
				var res = dt2 - dt1
				if (isNaN(res)) throw Error('invalid dates arguments')
				let re = res / (1000 * 60 * 60)

				var h = parseInt(re)
				var m = parseInt((re - h) * 60)
				let result = ''
				if (h) {
					result += `${h} 小时`
				}
				if (m) {
					result += `${m} 分钟`
				}
				return result
			}
		}
	}
</script>

<style lang="scss" scoped>
	.operate_box {
		margin: 20rpx;
		display: flex;

		.u-reset-button {
			flex: 1;
			margin-right: 10rpx;
		}

		.u-textarea {
			border: 1px solid #ddd;
		}
	}

	.popupShow {
		overflow: hidden;
		position: fixed;
		width: 100%;
	}

	.img-wrap {
		flex: 1;
		display: flex;
		flex-wrap: wrap;

		.img {
			width: 80px;
			height: 60px;
			margin: 5px;
		}
	}

	.tab-title {
		position: fixed;
		width: 100%;
		// display: flex;
		// justify-content: space-between;
		overflow-x: auto;
		height: 82rpx;
		line-height: 82rpx;
		background-color: #ffffff;
		border-bottom: 1px solid #f2f2f2;
		z-index: 99;
		box-sizing: border-box;

		>view {
			width: 1050rpx;
		}

		.tab-item {
			// width: 50%;
			min-width: 65rpx;
			text-align: center;
			font-size: 32rpx;
			color: $uni-text-color-grey;
			margin-left: 15px;
			display: inline-block;
		}

		.tab-item.active {
			color: $j-primary-border-green;
			border-bottom: 1px solid $j-primary-border-green;
		}
	}

	.fixed {
		position: fixed;
		width: 100%;
		left: 0;
	}

	.add {
		bottom: 0;
	}

	.main {
		border-top: 10px solid #f0f0f0;
		margin-top: 42px;
	}

	.img-bar {
		padding: 10px 0;
		display: flex;

		.label {
			color: #999;
			text-align: right;
			max-width: 104px;
			font-size: 32rpx;
			padding: 0 15px;
			flex: 1;
		}

		.img-wrap {
			flex: 1;
			display: flex;
			flex-wrap: wrap;

			.img {
				width: 80px;
				height: 60px;
				margin: 5px;
			}
		}
	}

	.kd-baseInfo {
		padding: 0 32rpx;
		font-size: 28rpx;

		.kd-cell {
			line-height: 90rpx;
			border-bottom: 1px dashed #dadada;
			word-break: break-all;

			.kd-label {
				display: inline-block;
				width: 8em;
				font-weight: bold;
			}

			.kd-label2 {
				display: inline-block;
				width: 11em;
				font-weight: bold;
			}
		}
	}

	.wx-wrap {
		.item {
			padding: 20rpx;
			font-size: 28rpx;

			.bh-wrap {
				display: flex;
				margin-bottom: 10rpx;
				justify-content: space-between;

				.s1 {
					display: flex;
					align-items: center;

					.b1 {
						font-size: 28rpx;
					}
				}

				.s2 {
					font-size: 28rpx;
				}
			}

			.title-wrap {
				display: flex;
				justify-content: space-between;
				border-bottom: 1px dashed #dadada;
				padding-bottom: 10rpx;
			}

			.bg-wrap-item {
				margin-top: 20rpx;

				.value-wrap {
					.text {
						color: #7f7f7f;
					}

					.img-wrap {
						margin-top: 20rpx;
						display: flex;

						.img {
							width: 140rpx;
							height: 140rpx;

							&+.img {
								margin-left: 10rpx;
							}
						}
					}
				}
			}
		}
	}

	.title-md {
		font-weight: bold;
	}

	.zxpg-wrap {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-top: 100rpx;

		.btns {
			font-size: 32rpx;
			width: 420rpx;
			height: 80rpx;
			line-height: 80rpx;
			text-align: center;
		}

		.zx-btn {
			background-color: rgba(21, 122, 44, 1);
			color: #ffffff;
		}

		.zp-btn {
			color: #169bd5;
		}

		.disabled {
			background-color: rgba(127, 127, 127, 1);
		}
	}

	.bjsymx {
		color: #4f7f00;
		padding: 20rpx 0;
	}

	.apply-box {
		width: 70%;
		margin: 10rpx auto;
		display: flex;
		align-items: center;
		justify-content: space-around;
	}
</style>