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

<template>
	<view class="tour-container">
		<uni-nav-bar fixed="true" statusBar="true" left-icon="back" title="巡点检工单详情" @clickLeft="back"
			@clickRight="HandlScanCode"></uni-nav-bar>
		<view class="tour-wrapper">
			<view class="tour_tally-content">
				<!-- 	<KdTabs v-model="active" @change="handleTabChange" :list="['基本信息', '巡点检设备', '备品备件']" /> -->
				<u-subsection :list="tabList" :current="active" @change="handleTabChange"
					active-color="#157a2c"></u-subsection>
				<view class="kd-baseInfo" v-show="active === 0">
					<view class="kd-cell">
						<text class="kd-label">工单编号</text>
						{{ worksheetInfo.code }}
					</view>
					<view class="kd-cell">
						<text class="kd-label">计划名称</text>
						<text class="kd-content">{{ worksheetInfo.planName }}</text>
					</view>
					<!-- <view class="kd-cell">
            <text class="kd-label">巡点检周期</text>
            <text class="kd-content"
              >{{ worksheetInfo.cycleValue
              }}{{ cycleOptObj[worksheetInfo.cycleType] }}</text
            >
          </view> -->
					<view class="kd-cell">
						<text class="kd-label">设备分类</text>
						<text class="kd-content">{{ worksheetInfo.categoryName }}</text>
					</view>
					<view class="kd-cell">
						<text class="kd-label">巡检设备总数</text>
						<text
							class="kd-content text-warning">{{ worksheetInfo.finishNum }}/{{ worksheetInfo.total }}</text>
					</view>
					<view class="kd-cell">
						<text class="kd-label">计划完成时长</text>
						{{ worksheetInfo.duration }}分钟
					</view>
					<view class="kd-cell">
						<text class="kd-label">实际完成时长</text>
						{{ finishTime(worksheetInfo.acceptTime, worksheetInfo.finishTime) }}
					</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>

					<!-- <u-button type="primary" size="large" text="开始执行"></u-button> -->
					<template>
						<template v-if="worksheetInfo.orderStatus === 0">
							<button class="btn-execute" type="primary" @click="handleExecute">开始执行</button>
							<button class="btn-sparepart" type="warning" @click="handlbpbj">申请备品备件</button>
							<button class="btn-reassignment" type="primary" @click="handleAssign">转派</button>
						</template>
						<template v-else-if="worksheetInfo.orderStatus === 2">
							<button class="btn-execute" type="primary" @click="handleReport">报工</button>
							<button class="btn-sparepart" type="warning" @click="handlbpbj">申请备品备件</button>
							<button class="btn-reassignment" type="primary" @click="handleAssign" v-if="worksheetInfo.isGroup != 1">转派</button>
						</template>
						<button v-else-if="worksheetInfo.orderStatus === 3" :disabled="true" class="btn-execute"
							type="primary">已报工</button>
					</template>
				</view>
				<view class="kd-equipment" v-show="active === 1">
					<view class="kd-type-box">
						<view :class="{ 'type—active': typeActive === index }" v-for="(item, index) in equpStatus"
							:key="index" @click="typeChange(index)">
							{{ item.name }}
							<text v-if="item.count > 0" class="count">{{ item.count }}</text>
						</view>
					</view>
					<view class="kd-list-container">
						<u-list @scrolltolower="scrolltolower">
							<u-list-item v-for="(item, index) in euqiList" :key="index">
								<view class="kd-card">
									<view class="kd-card-wrapper">
										<view class="kd-cell">
											<text class="kd-label">设备编码</text>
											{{ item.code }}
										</view>
										<view class="kd-cell">
											<text class="kd-label">设备名称</text>
											{{ item.name }}
										</view>
										<view class="kd-cell">
											<text class="kd-label">设备型号</text>
											{{ item.model }}
										</view>
										<view class="kd-cell">
											<text class="kd-label">设备位置</text>
											{{ item.deviceLocationName.pathName }}
										</view>
										<view class="kd-cell">
											<text class="kd-label">执行结果</text>
											<text class="status-box text-warning"
												v-if="item.executeStatus === 0">待检</text>
											<text class="status-box text-primary"
												v-else-if="item.executeStatus === 1">已检</text>
											<text class="status-box text-danger"
												v-else-if="item.executeStatus === 2">异常</text>
											<text class="status-box text-primary"
												v-else-if="item.executeStatus === 3">已报修</text>
										</view>
									</view>
									<view class="card-footer">
										<button v-if="item.orderStatus == 2 && item.executeStatus == 0" type="primary"
											class="primary-btn" @click="handleCheck(item)">检查</button>
										<template v-if="item.orderStatus && item.orderStatus === 3">
											<button type="default" v-if="item.resultStatus === 3"
												@click="handLbxDetail(item)">报修详情</button>
											<button type="default" v-else-if="item.resultStatus === 2"
												@click="handLbx(item)">报修</button>
										</template>
										<button type="default"
											v-if="[0, 2, 3].includes(item.orderStatus) && item.executeStatus != 0"
											@click="checkDetail(item)">检查详情</button>
									</view>
								</view>
							</u-list-item>
						</u-list>
					</view>
				</view>
				<!-- <view class="spare-parts" v-show="active === 2">
					<Step>
						<StepItem v-for="(item, index) in repairInfoLogList" :key="index" :active="index == 0" :hideContent="Boolean(item.content)">
							<template v-slot:header>
								<view class="step-title">
									<view class="s1">{{ typeOptions[item.type] }}</view>
									<view class="s2">
										{{ item.createTime }}
									</view>
								</view>
							</template>
							<template v-slot:content v-if="item.content">
								<view class="list-xs" v-if="item.type == 'CREATE'">
									<view class="list-xs-item">
										<view class="label">报修人</view>
										<view class="value">
											{{ logs[item.id] ? logs[item.id].content.requestUserName : '' }}
										</view>
									</view>
									<view class="list-xs-item">
										<view class="label">故障描述</view>
										<view class="value">
											{{ logs[item.id] ? logs[item.id].content.remark : '' }}
										</view>
									</view>
								</view>
								<view class="list-xs" v-else-if="item.type == 'SPARE_PARTS_APPLY'">
									<view class="list-xs-item">
										<view class="label">申领清单</view>
										<view class="value bjsymx" @click="handlbjsymx('备件明细', item.content.infoList)">备件使用明细</view>
									</view>
								</view>
								<view class="list-xs" v-else-if="item.type == 'ACCEPTANCE_CHEK'">
									<view class="list-xs-item">
										<view class="label">验收人</view>
										<view class="value">
											{{ logs[item.id] ? logs[item.id].content.userName : '' }}
										</view>
									</view>
									<view class="list-xs-item">
										<view class="label">验收结果</view>
										<view class="value">
											{{ logs[item.id] ? (logs[item.id].content.orderStatus == 4 ? '通过' : '驳回') : '' }}
										</view>
									</view>
								</view>
								<view class="list-xs" v-else-if="item.type == 'WORK_REPORT'">
									<view class="list-xs-item">
										<view class="label">处理说明</view>
										<view class="value">
											{{ logs[item.id] ? logs[item.id].content.reason : '' }}
										</view>
									</view>
								</view>
							</template>
						</StepItem>
					</Step>
					<PopSparePart ref="PopSparePart" :workOrderCode="workOrderCode" :noRequest="true"></PopSparePart>
				</view> -->
				<!-- 备品备件 sparePartsApply-->
				<view class="spare-parts" v-if="active == 2">
					<pickCard :list="sparePartsApply" />
				</view>
			</view>
			<uni-popup ref="inputDialog" type="dialog">
				<uni-popup-dialog ref="inputClose" mode="input" title="您当前已超出计划完成时间，请填写原因" placeholder="请输入内容"
					:before-close="true" @close="handleClose" @confirm="timeoutCauseConfirm"></uni-popup-dialog>
			</uni-popup>
		</view>
		<u-modal :show="modalShow" title="提示" @confirm="modalShow = false">
			<view>
				您还有
				<text class="text-warning">{{ worksheetInfo.awaitInspectSum }}</text>
				台设备待检，不可报工
			</view>
		</u-modal>
		<Assign ref="assignRef" @success="assignSuccess" />

		<!-- <ScanCode @scancodedate="scancodedate"></ScanCode> -->
	</view>
</template>

<script>
	import Step from '@/components/Step/Step.vue'
	import StepItem from '@/components/Step/StepItem.vue'
	import PopSparePart from '../../maintenanceWorkorder/components/PopSparePart.vue'
	import {
		getWorkOrderDetail,
		getDeviceList,
		startExecuting,
		signingWork,
		devicestatistics
	} from '@/api/myTicket/index.js'
	import {
		getSpareParts,
		getSparePartsApply,
		getWordOrderDetail
	} from '@/api/repair'
	import {
		get,
		post,
		postJ
	} from '@/utils/api.js'
	import Assign from '@/components/Assign.vue'
	import CellInfo from '@/components/CellInfo.vue'
	import KdTabs from '@/components/KdTabs.vue'
	import ScanCode from '@/components/ScanCode.vue'
	import pickCard from '@/pages/maintenanceWorkorder/components/pickCard.vue'

	export default {
		components: {
			CellInfo,
			KdTabs,
			Assign,
			ScanCode,
			Step,
			StepItem,
			PopSparePart,
			pickCard
		},
		data() {
			return {
				tabList: ['基本信息', '巡点检设备', '备品备件'],
				typeOptions: {
					CREATE: '生成工单',
					SPARE_PARTS_APPLY: '备品备件申请',
					ACCEPTANCE_CHEK: '验收',
					WORK_REPORT: '报工'
				},
				repairInfoLogList: [],
				sparePartsApply: [],
				modalShow: false,
				active: 0,
				typeActive: 0,
				statusList: {
					0: '待接收',
					1: '执行中',
					3: '已完成'
				},
				pageId: '',
				planId: '',
				workOrderCode: '',
				worksheetInfo: {
					equiList: [],
					workOrder: {}
				},
				logs: {},
				equpStatus: [
					// {
					//   name: '全部',
					//   value: []
					// },
					{
						name: '全部',
						value: -1
					},
					{
						name: '待检',
						value: 0
					},
					{
						name: '已检',
						value: 1
					},
					{
						name: '异常',
						value: 2
					}
				],
				euqiList: [],
				equipPage: 1,
				isEnd: false,
				cycleOptObj: {
					1: '时/次',
					2: '天/次',
					3: '周/次',
					4: '月/次',
					5: '年/次',
					11: '次/天',
					12: '次/周',
					13: '次/月',
					14: '次/年'
				},
				barType: 0,
				qrContent: null,
				chooseTab: false
			}
		},
		async onLoad(options) {
			console.log('onLoad--------')
			console.log('options------------', options)
			// this.workOrderCode = options.workOrderCode
			this.pageId = options.id
			this.planId = options.planId
			// this.chooseTab = options.chooseTab
			this.getInfo()
			// 设备台账跳转详情
			// if (options.qrContent) {
			// 	this.qrContent = options.qrContent
			// 	await this.getInfo()
			// 	this.cbScancodedate({
			// 		code: this.qrContent
			// 	})
			// }
		},
		onShow() {
			console.log('onShow--------')
			this.getInfo()
			this.getCount()
			if (this.chooseTab) {
				this.active = 1
				this.typeChange(2)
			} else {
				this.typeChange(0)
			}
			// let _this = this
			// uni.$off('scancodedate') // 每次进来先 移除全局自定义事件监听器
			// uni.$on('scancodedate', function (data) {
			// 	_this.cbScancodedate(data)
			// })
		},
		onUnload() {
			uni.$off('scancodedate')
		},
		onHide() {
			uni.$off('scancodedate')
		},
		methods: {
			// 备件使用明细
			handlbjsymx(title, list) {
				this.$refs.PopSparePart.open(title, list)
			},
			// 跳转备品备件
			async handlbpbj() {
				let data = await getWordOrderDetail(this.worksheetInfo.id);
				data.deviceList = data.deviceList.map((item) => {
					return item.substance;
				});
				data['pageType'] = 'add'
				uni.navigateTo({
					url: `/pages/maintenanceWorkorder/sparepart/sparepart?data=${JSON.stringify(data)}`
				})

			},
			//获取备品备件
			async getSparePartsApply(id) {
				const list = await getSparePartsApply(id)
				this.sparePartsApply = list
			},
			getCount() {
				devicestatistics({
					planId: this.planId
				}).then(data => {
					this.equpStatus = this.equpStatus.map(item => {
						switch (item.name) {
							case '全部':
								return {
									...item, count: data.total
								}
							case '待检':
								return {
									...item, count: data.isInspectedNum
								}
							case '已检':
								return {
									...item, count: data.checkedNum
								}
							case '异常':
								return {
									...item, count: data.abnormalNum
								}
						}
					})
				})
			},
			// 扫码枪扫码
			cbScancodedate(data) {
				this.Scancodedate(data.code)
			},
			// 相机扫码
			HandlScanCode() {
				let _this = this

				uni.scanCode({
					onlyFromCamera: true,
					success: function(res) {
						_this.Scancodedate(res.result)
					}
				})
			},
			Scancodedate(code) {
				let _this = this
				if (this.worksheetInfo.status.code === 0) {
					uni.showModal({
						title: '提示',
						content: '工单未开启执行，不可进行巡点检操作，请先点击“开始执行”！',
						confirmText: '开始执行', //这块是确定按钮的文字
						cancelText: '取消', //这块是取消的文字
						success: function(res) {
							if (res.confirm) {
								_this.handleExecute() // 执行确认后的操作
							} else {
								// 执行取消后的操作
							}
						}
					})
					return
				}
				this.qrContent = code.trim()
				this.barType = this.setBarType(this.qrContent)
				_this.getData()
			},
			// 设置barType
			setBarType(val) {
				let index = val.indexOf('@_@')
				let result = 0
				if (index !== -1) {
					let item = val.substr(index + 3, 1)
					if (item) {
						result = Number(item)
					}
				}
				return result
			},
			// 根据条码请求设备数据
			getData() {
				let par = {
					barType: this.barType,
					qrContent: this.qrContent
				}
				uni.showLoading({
					title: '加载中',
					mask: true
				})
				postJ(this.apiUrl + '/scan/getAssetInfo', par)
					.then(res => {
						let data = res.data
						this.matchEquipment(data)
					})
					.finally(() => {
						uni.hideLoading()
					})
			},

			matchEquipment(data) {
				let par = {
					assetCode: data.assetCode,
					workOrderId: this.worksheetInfo.id
				}
				console.log('par', par)
				post(this.apiUrl + '/workOrder/scanMatching', par).then(res => {
					let data = res.data
					if (!data) {
						uni.showModal({
							title: '提示',
							content: '本工单中，无此设备！',
							confirmText: '好的', //这块是确定按钮的文字
							showCancel: false,
							success: function(res) {
								if (res.confirm) {
									// 执行确认后的操作
								} else {
									// 执行取消后的操作
								}
							}
						})
					} else {
						// 未报工
						if (this.worksheetInfo.status.code === 1) {
							this.handleCheck(data)
						}
						// 已报工
						if (this.worksheetInfo.status.code === 3) {
							this.checkDetail(data)
						}
					}
				})
			},

			handleAssign() {
				console.log(this.worksheetInfo)
				this.$refs.assignRef.open(this.worksheetInfo.id)
			},
			assignSuccess() {
				this.back()
			},
			// 报工
			handleReport() {
				if (this.worksheetInfo.finishNum !== this.worksheetInfo.total) {
					uni.showToast({
						title: '请完成巡检设备检查',
						icon: 'none'
					})
				} else {
					if (new Date(this.worksheetInfo.acceptTime).getTime() + this.worksheetInfo.duration * 60 * 1000 <
						new Date().getTime()) {
						this.$refs.inputDialog.open()
						return
					}
					this._report()
				}
			},
			handleClose() {
				this.$refs.inputDialog.close()
			},
			timeoutCauseConfirm(value) {
				if (!value) {
					uni.showToast({
						title: '请输入超时原因',
						icon: 'none'
					})
					return
				}
				this.$refs.inputDialog.close()
				this._report(value)
			},
			_report(timeoutCause = '') {
				signingWork({
					id: this.pageId,
					timeoutCause: timeoutCause
				}).then(() => {
					uni.showToast({
						icon: 'success',
						title: '操作成功！',
						duration: 2000
					})
					this.getInfo()
				})

				// post(
				// 	this.apiUrl + '/workOrder/reportWork',
				// 	{
				// 		workOrderId: this.pageId,
				// 		timeoutCause
				// 	},
				// 	true,
				// 	false
				// )
				// 	.then(res => {
				// 		let _this = this
				// 		if (res?.success) {
				// 			let data = res.data
				// 			if (data.length) {
				// 				uni.showModal({
				// 					title: '提示',
				// 					content: `有${data.length}台设备被标记为缺陷，是否要报修？`,
				// 					cancelText: '取消', // 取消按钮的文字
				// 					confirmText: '报修', // 确认按钮的文字
				// 					showCancel: true, // 是否显示取消按钮，默认为 true
				// 					success: res => {
				// 						if (res.confirm) {
				// 							if (data.length > 1) {
				// 								uni.navigateTo({
				// 									url: `/pages/tour_tally/detail/detail?workOrderCode=${this.workOrderCode}&id=${this.pageId}&chooseTab=true`
				// 								})
				// 							} else {
				// 								uni.navigateTo({
				// 									url: `/pages/repair/repair/index?source=5&workOrderCode=${this.workOrderCode}&equiCode=${data[0].equiCode}&equiId=${data[0].equiId}&workOrderId=${this.pageId}&equiName=${data[0].equiName}&equiModel=${data[0].equiModel}&equiLocation=${data[0].equiLocation}`
				// 								})
				// 							}
				// 						} else {
				// 							_this.getInfo()
				// 						}
				// 					}
				// 				})
				// 			} else {
				// 				uni.showToast({
				// 					icon: 'success',
				// 					title: '操作成功！',
				// 					duration: 2000
				// 				})
				// 				this.getInfo()
				// 			}
				// 		}

				// 		/* if (res?.success) {
				// 		  uni.showToast({
				// 		    icon: "success",
				// 		    title: "操作成功！",
				// 		    duration: 2000,
				// 		  });
				// 		  this.getInfo();
				// 		} */
				// 	})
				// 	.catch(res => {
				// 		if (res.code === '4444') {
				// 			this.$refs.inputDialog.open()
				// 		} else if (res.code === '5555') {
				// 			this.modalShow = true
				// 			// uni.showModal({
				// 			//   title: '提示',
				// 			//   content: `您还有 ${this.worksheetInfo.awaitInspectSum} 台设备待检，不可报工`,
				// 			//   success: function (res) {},
				// 			//   showCancel: false
				// 			// })
				// 		}
				// 	})
			},
			// 执行工单
			handleExecute() {
				startExecuting({
					id: this.pageId
				}).then(() => {
					uni.showToast({
						icon: 'success',
						title: '操作成功！',
						duration: 2000
					})
					this.getInfo()
					if(this.euqiList.length){
						this.handleCheck(this.euqiList[0])
					}

				})
				// post(this.apiUrl + '/workOrder/execute', {
				// 	workOrderCode: this.workOrderCode
				// }).then(res => {
				// 	if (res?.success) {
				// 		uni.showToast({
				// 			icon: 'success',
				// 			title: '操作成功！',
				// 			duration: 2000
				// 		})
				// 		this.getInfo()
				// 	}
				// })
			},
			//巡点检设备加载更多
			scrolltolower() {
				if (this.isEnd) return
				this.equipPage++
				this.getEquipList()
			},
			// 巡点检设备列表
			getEquipList() {
				const params = {
					planId: this.planId,
					status: this.equpStatus[this.typeActive].value,
					pageNum: 1,
					size: 9999
				}
				getDeviceList(params).then(data => {
					if (this.equipPage === 1) {
						this.euqiList = data.list
					} else {
						this.euqiList.push(...data.list)
					}
					this.isEnd = this.euqiList.length >= data.count
				})
				// post(this.apiUrl + `/workOrder/getEquipmentListApp?page=${this.equipPage}&size=10`, params, true).then(res => {
				// 	if (res?.success) {
				// 		if (this.equipPage === 1) {
				// 			this.euqiList = res.data.records
				// 		} else {
				// 			this.euqiList.push(...res.data.records)
				// 		}
				// 		this.isEnd = this.euqiList.length >= res.data.total
				// 	}
				// })
			},

			handleTabChange(value) {
				this.active = value
				if (value === 1) {
					this.typeChange(0)
				}
			},

			finishTime(start, end) {
				if (!end) return ''
				let dur = new Date(end).getTime() - new Date(start).getTime()
				return Math.ceil(dur / 1000 / 60) + '分钟'
			},
			// 设备状态切换
			typeChange(type) {
				this.typeActive = type
				this.equipPage = 1
				this.getEquipList()
			},
			handleCheck({
				id
			}) {
				// uni.navigateTo({
				// 	url: `/pages/tour_tally/check/index?id=${id}&equiName=${equiName}&equiCode=${equiCode}&workOrderId=${this.pageId}&workOrderCode=${this.workOrderCode}`
				// })
				uni.navigateTo({
					url: `/pages/tour_tally/check/index?id=${id}`
				})
			},
			checkDetail({
				id
			}) {
				uni.navigateTo({
					url: `/pages/tour_tally/check/detail?id=${id}`
				})
			},
			getInfo() {
				getWorkOrderDetail({
					workId: this.pageId
				}).then(data => {
					this.worksheetInfo = data
					this.getSparePartsApply(data.id)
				})
				getSpareParts({
					workOrderId: this.pageId
				}).then(data => {
					console.log('data-----------------------')
					console.log(data)
					let list = JSON.parse(JSON.stringify(data))
					this.repairInfoLogList = list.reverse()
					this.repairInfoLogList.forEach(item => {
						console.log('item.id-----------------')
						console.log(item.id)
						console.log(this.logs)
						this.logs[item.id] = {
							id: item.id,
							content: item.content,
							createTime: item.createTime,
							type: item.type,
							remark: item.remark,
							requestUserName: item.requestUserName
						}
						if (item.type === 'SPARE_PARTS_APPLY') {
							this.logs[item.id].content.infoList =
								this.logs[item.id].content && this.logs[item.id].content.infoList && this
								.logs[item.id].content.infoList.length > 0 ?
								this.logs[item.id].content.infoList.map(item => {
									return {
										...JSON.parse(item.sparePartsList),
										sparePartsId: item.sparePartsId
									}
								}) : []
						}
					})
				})
				// return post(this.apiUrl + '/workOrder/getDetailsApp', {
				// 	workOrderCode: this.workOrderCode
				// }).then(res => {
				// 	if (res?.success) {
				// 		this.worksheetInfo = res.data
				// 	}
				// })
			},
			// 报修
			handLbx(item) {
				console.log('item', item)
				uni.navigateTo({
					url: `/pages/repair/repair/index?source=5&workOrderCode=${this.workOrderCode}&equiCode=${item.equiCode}&equiId=${item.equiId}&workOrderId=${this.pageId}&equiName=${item.equiName}&equiModel=${item.equiModel}&equiLocation=${item.equiLocation}`
				})
			},
			handLbxDetail(item) {
				uni.navigateTo({
					url: `/pages/repair/detail/detail?id=${item.repairId}`
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import '@/components/submitted.scss';

	/deep/.u-subsection__item__text {
		font-size: 28rpx !important;
	}

	/deep/.u-cell__body {
		// {
		// 	font-size: 26rpx !important;
		// }
		// padding: 12rpx 12rpx;

		.u-cell__title-text,
		.input-value,
		.uni-input-wrapper {
			font-size: 26rpx !important;
		}
	}

	.list-cell {
		display: flex;
		align-items: center;
		justify-content: space-between;
		color: $uni-text-color-grey;
		padding: 5rpx 20rpx;
	}

	.font-sm {
		font-size: $uni-font-size-sm;
	}

	.font-text {
		color: $uni-text-color;
	}

	.btn-execute {
		background-color: $j-primary-border-green;
		width: 450rpx;
		margin-top: 5vh;
	}

	.btn-reassignment {
		color: $uni-color-primary;
		background-color: transparent;
		border: none;
		box-shadow: none;

		&::after {
			display: none;
		}
	}

	.tour-container {
		position: fixed;
		top: 0;
		bottom: 0;
		width: 100vw;
		display: flex;
		flex-direction: column;

		/deep/.u-popup {
			flex: none !important;
		}
	}

	.tour-wrapper {
		position: relative;
		flex: 1;
	}

	.tour_tally-content {
		// padding-top: 40rpx;
		box-sizing: border-box;
		// height: calc(100vh - 88rpx);
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		display: flex;
		flex-direction: column;
	}

	.kd-cell {
		min-height: 90rpx;
		border-bottom: 1px dashed #dadada;
		display: flex;
		align-items: center;

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

		.kd-content {
			flex: 1;
			word-break: break-all;
		}
	}

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

	.kd-equipment {
		flex: 1;
		display: flex;
		flex-direction: column;
		overflow: hidden;

		.kd-type-box {
			text-align: center;
			padding: 26rpx 0;

			view {
				position: relative;
				display: inline-block;
				width: 120rpx;
				padding: 4rpx 0;
				color: #747474;
				margin: 0 20rpx;
				background-color: rgba(215, 215, 215, 0.5);

				&.type—active {
					background-color: #1e7f35;
					color: #fff;
				}

				.count {
					position: absolute;
					top: -9px;
					right: -9px;
					width: 18px;
					height: 18px;
					border-radius: 50%;
					font-size: 12px;
					background-color: red;
					color: #fff;
				}
			}
		}

		.kd-list-container {
			flex: 1;
			display: flex;
			flex-direction: column;
			overflow: hidden;
			padding: 12rpx 18rpx;
			background-color: $page-bg;

			.u-list {
				flex: 1;
				height: 100% !important;
			}
		}
	}

	.btn-sparepart {
		width: 450rpx;
		margin-top: 20rpx;
	}

	.spare-parts {
		flex: 1;
		overflow: hidden;
		overflow-y: auto;
	}

	.kd-card {
		background-color: #fff;
		margin-bottom: 20rpx;
		padding: 8rpx 0;
		font-size: 28rpx;
		word-break: break-all;

		.kd-card-wrapper {
			padding: 0 30rpx;
			border-bottom: 1px solid #dadada;
		}

		.kd-cell {
			line-height: 60rpx;
		}

		.kd-cell:last-of-type {
			border-bottom: none;
		}

		.status-box {
			margin-right: 16rpx;
		}

		.card-footer {
			display: flex;
			justify-content: flex-end;
			align-items: center;
			padding: 8rpx 0 20rpx;

			button {
				width: 180rpx;
				height: 56rpx;
				line-height: 56rpx;
				font-size: 28rpx;
				margin: 0 8rpx;
			}

			.primary-btn {
				background-color: $j-primary-border-green;
			}
		}
	}
</style>