logpm/pagesHome/pages/VehicleArrivalDetails/VehicleArrivalDetails.vue

<template>
	<BasicContainer ref="basicContainer" :option="option">
		<template #head>
			<view class="hdtp">
				<view>
					<view>
						配载批次：{{details.pageInfo.carsNo}}
					</view>
					<view class="butlur" v-if="Number(details.pageType) !== 2" @click="showsdqs">
						录入包条码
					</view>
					<view class="butlur" v-else @click="showsdqs">
						录入托盘码
					</view>
				</view>
				<view>
					<view>司机名称：{{details.pageInfo.driverName}}</view>
					<view>司机电话：{{details.pageInfo.driverMobile}}</view>
				</view>
				<view>
					<view>车牌号：{{details.pageInfo.carNumber}}</view>
				</view>
				<view style="width: 100%;">
					路线：{{details.pageInfo.carsLineName}}
				</view>
				<!-- 				<view>
					<view>备货是否完成：{{items.isstock}}</view>
					<view>装车是否完成：{{items.isload}}</view>
				</view> -->
			</view>
			<view class="hdtpnum">
				<view>
					<view>计划件数</view>
					<view>{{details.pageInfo.planLoadingNumber || 0}}</view>
				</view>
				<view>
					<view>在车件数</view>
					<view>{{details.pageInfo.realLoadingNumber || 0}}</view>
				</view>
				<view>
					<view>计划卸车数量 </view>
					<view>{{details.pageInfo.planUnloadNum || 0}}</view>
				</view>
				<view>
					<view>卸车数</view>
					<view>{{details.pageInfo.unloadNumber || 0}}</view>
				</view>
			</view>

			<view class="tabtip">
				<view @click="setorderStatus(1)" :class="orderStatus==1?'active':''">
					<view>定制品</view>
				</view>
				<view @click="setorderStatus(2)" :class="orderStatus==2?'active':''">
					<view>零担</view>
				</view>
				<view @click="setorderStatus(3)" :class="orderStatus==3?'active':''">
					<view>异常</view>
				</view>
			</view>
		</template>

		<template #body>
			<jp-virtual-list ref="jpScorllView" :style="{height: details.jpScorllViewHeight}" code="id"
				class="jpScorllView" :refresher="false" :data="datalist">
				<template v-slot="{ list }">
					<view v-for="item in list" :key="item.waybillNo" :id="item.waybillNo" :ref="item.waybillNo">
						<template v-if="Number(orderStatus) !== 3">
							<PullDownBox>
								<template #title>
									<view class="contenbx1">
										<view style="flex: 1; display: flex;">
											<view>订单号：</view>
											<view class="row_value">
												{{item.orderCode}}
											</view>
										</view>
									</view>
									<view class="contenbx1">
										<view style="flex: 1; display: flex;">
											<view>运单号：</view>
											<view class="row_value">
												{{item.waybillNo}}
											</view>
										</view>
									</view>
									<view class="contenbx1">
										<view>
											<text>订单总数：</text>
											{{item.totalNumber}}
										</view>
										<view>
											<text>
												装车数/卸车数：
											</text>
											<text style="color: #000;">
												{{item.loadingNum}}
											</text>
											/
											<text style="color: #00d400;">
												{{item.unloadNum}}
											</text>
										</view>
									</view>
								</template>

								<template #content>
									<u-divider text="详情"></u-divider>
									<block v-for="value in item.unloadPackageList" :key="value.name">
										<view class="details_container">
											<!-- 定制品 -->
											<template v-if="Number(orderStatus) === 1">
												<view class="flex-c-sb">
													<view style="flex: 1;">
														包条码: {{value.orderPackageCode}}
													</view>
													<view class="flex1" style="display: flex; align-items: center; margin-left:5px;">
														卸车状态:
														<view :class="{
																'tip': true,
																'red': Number(value.scanStatus) === 1,
																'green': Number(value.scanStatus) === 2,
																'blue': Number(value.scanStatus) === 3
																}">
															{{Number(value.scanStatus) === 1? '已装车': Number(value.scanStatus) === 2? '已卸车': '已签收'}}
														</view>
													</view>
												</view>
												<view class="flex-c-sb mt10">
													<view class="flex1">
														托盘名称: {{ value.trayName }}
													</view>
													<view class="flex1">
														托盘码: {{ value.trayCode }}
													</view>
												</view>

												<view class="flex-c-sb mt10">
													<view class="flex1">
														卸车仓库: {{value.unloadNodeName }}
													</view>
												</view>
											</template>

											<!-- 零担 -->
											<template v-if="Number(orderStatus) === 2">
												<view class="flex-c-sb" @click="handleZeroStowage(item, value)">
													<view class="flex1">
														产品名称: {{value.orderPackageCode}}
													</view>

													<view class="flex1">
														装车数/卸车数: {{value.num + '/' + (value.unloadNum || 0)}}
													</view>
												</view>
												<view class="flex-c-sb mt10">
													<view class="flex1">
														托盘名称: {{value.trayName}}
													</view>
													<view class="flex1">
														托盘码: {{value.trayCode}}
													</view>
												</view>
												<view class="flex-c-sb mt10">
													<view class="flex1">
														卸车仓库: {{value.unloadNodeName }}
													</view>
												</view>
											</template>
										</view>
									</block>
								</template>
							</PullDownBox>
						</template>

						<template v-else>
							<view class="abnormal">
								<view class="scroll_row" style="zoom: 0.9;">
									<view class="flex1">
										包条码: {{item.scanCode}}
									</view>
									<view class="flex1" style="display: flex; align-items: center; margin-left:5px;">
										卸车状态:
										<view :class="{
												'tip': true,
												'red': Number(item.scanStatus) === 1,
												'green': Number(item.scanStatus) === 2,
												'blue': Number(item.scanStatus) === 3
												}">
											{{Number(item.scanStatus) === 1? '已装车': Number(item.scanStatus) === 2? '已卸车': '已签收'}}
										</view>
									</view>
								</view>
								<view class="scroll_row mt10" style="zoom: 0.9;">
									<view class="flex1">
										托盘名称: {{item.trayName || '暂无数据'}}
									</view>
									<view class="flex1">
										托盘码: {{item.trayCode || '暂无数据'}}
									</view>
								</view>
							</view>
						</template>
					</view>
				</template>
			</jp-virtual-list>
		</template>
	</BasicContainer>

	<tiplist ref="tiplists">

	</tiplist>

	<!-- 零担装车 -->
	<PopUp ref='ZeroStowage'>

		<scroll-view scroll-y="true">
			<view class="contenbx1">
				<view><text style="color: #90A0AF;">订单编号：</text>{{details.zeroInfo.orderCode}}
				</view>
			</view>
			<view class="contenbx1">
				<view><text style="color: #90A0AF;">运单号：</text>{{details.zeroInfo.waybillNo}}
				</view>
			</view>
			<view class="contenbx1">
				<view><text style="color: #90A0AF;">物料名称：</text>{{details.zeroInfo.orderPackageCode}}
				</view>
			</view>
			<view class="flex-c-sb">
				<view><text style="color: #90A0AF;">装车数：</text>{{details.zeroInfo.num || 0}}</view>
				<view><text style="color: #90A0AF;">卸车数：</text>{{details.zeroInfo.unloadNum || 0}}</view>
			</view>
			<inputNum :minNum="0" :maxNum="details.zeroInfo.num" v-model="details.zeroInfo.unloadNum" />

		</scroll-view>
	</PopUp>

	<!-- 定制品异常装车 -->
	<PopUp ref='OrderStowage'>
		<scroll-view scroll-y="true">
			<view class="">
				当前包件未在本次计划, 是否异常卸车
			</view>
			<view class="">
				包条码: {{details.scancode}}
			</view>
		</scroll-view>
	</PopUp>

	<!-- 整托卸车 -->
	<PopUp ref='TrayStowage'>
		<view>托盘名称：{{details.trayInfo.trayName}}</view>
		<view>托盘码：{{details.trayInfo.trayCode}}</view>
		<scroll-view style="margin-top: 10px; height: 50vh; zoom: 0.9" scroll-y="true">
			<view class="">
				零担:
			</view>
			<block v-for="item in details.trayInfo.zeroList" :key="item.scanCode">
				<view class="pop_row">
					<view>订单号：{{item.orderCode}}</view>
					<view>运单号：{{item.waybillNo}}</view>
					<view class="flex-c-sb">
						<view>产品名称：{{item.scanCode}}</view>
						<view>数量：{{item.num}}</view>
					</view>
				</view>
			</block>

			<view class="mt10">
				定制品:
			</view>
			<block v-for="item in details.trayInfo.packageList" :key="item">
				<view class="pop_row">
					<view>订单号：{{item.orderCode}}</view>
					<view class="flex-c-sb">
						<view>包条码：{{item.scanCode}}</view>
						<view>数量：{{item.num}}</view>
					</view>
				</view>
			</block>
		</scroll-view>
	</PopUp>
	<!-- #ifdef APP -->
	<saomiao2 :ishidestop="scanState !== 0"></saomiao2>
	<!-- #endif -->
</template>

<script lang="ts" setup>
	import {
		postCarsLoadUnloadPackage,
		postArriveUnloadCarsDetail,
		postCarsLoadUnloadZero,
		postFindUnloadTrayGoodsList,
		postUnloadTray,
		postTransferUnloadPackage,
		postTransferUnloadZero,
		postTransferUnloadTray
	} from '@/api/user.js'
	import {
		onLoad,
		onShow,
	} from '@dcloudio/uni-app'
	import { computed, inject, nextTick, onMounted, reactive, ref, toRefs, } from "vue";
	import useSystemSettingsStore from '@/store/useSystemSettingsStore';
	import { storeToRefs } from 'pinia';
	import utils from '@/utils/utils.js';
	const { scanState } = storeToRefs(useSystemSettingsStore())

	const option = reactive({
		title: '配载按件卸车',
		haveData: true,
		async pullDownRefreshInitPage() {
			return await initpage()

		},
	})

	let details = reactive({
		schanvalue: '',
		typearr: [
			{
				value: 3,
				label: '齐套'
			},
			{
				value: 2,
				label: '部分扫'
			},
			{
				value: 1,
				label: '未扫'
			}
		],
		items: {} as any,
		datalist: [],
		scancode: '',
		orderStatus: 1,
		loadId: '',
		orderType: 0,
		inputtxt: '',
		listcheckindex: -1,
		/** 是否为扫描后执行刷新 */
		isscan: false,
		/** 是否异常提交后执行刷新 */
		isAbnormal: false,
		order: [],
		zero: [],
		pageInfo: {
		},
		page: 'ArrivalList' as 'ArrivalList' | 'RelayScanList',
		// 零担详情装车列表
		zeroList: [],
		/** 页面类型 1: 按件装车 2: 整托卸车 */
		pageType: 1,
		/** 整托渲染列表 */
		trayInfo: {
			zeroList: [],
			packageList: []
		},
		/** 卸车的零担信息 */
		zeroInfo: {},
		jpScorllViewHeight: '60vh'
	})


	// 获取组件实例
	const tiplists = ref(null)
	const basicContainer = ref(null)

	/** 零担装车 */
	const ZeroStowage = ref()
	/** 定制品异常装车 */
	const OrderStowage = ref()

	/** 整托卸车 */
	const TrayStowage = ref()

	const jpScorllView = ref()

	onLoad((op) => {
		details.loadId = op.id
		details.pageType = op.type

		details.page = op.page

		option.title = Number(op.type) === 2 ? '配载整托卸车' : '配载按件卸车'

		let content = ''
		if (Number(details.pageType) === 1) content = '请扫描包件码'
		else if (Number(details.pageType) === 2) content = '请扫描托盘码'

		// #ifdef APP
		utils.ttsspke(content)
		// #endif
	})

	/** 查看订单详情 -- 上架数据(保留页面, 后续跳详情直接cv) */
	function goorderdetail(item) {
		uni.navigateTo({
			url: '/pagesHome/pages/orderDetails/orderDetails?orderCode=' + item.orderCode
		})
	}

	onShow(async () => {
		// #ifdef APP
		uni.$off('scancodedate')
		uni.$on('scancodedate', function (code) {
			if (code) {
				console.log('code', code);
				details.scancode = code
				details.isscan = true
				scandata()
			}
		})
		// #endif

		await nextTick()
		// 请求页面
		basicContainer.value.startPullDownRefresh()
	})

	onMounted(async () => {
		// 等待子组件加载完毕
		await nextTick()

		details.jpScorllViewHeight = await utils.getViewDistanceFormTop('.jpScorllView')
	})

	function showsdqs() {
		tiplists.value.setdetails({
			isshow: true,
			tipstate: 1,
			title: '请输入扫描的码',
			placeholder: '请输入扫描的码',
			inputtext: '',
			success: (detail) => {
				details.scancode = detail.inputtext
				scandata()
				tiplists.value.setdetails({ isshow: false })
			},
			cancel: () => {
				tiplists.value.setdetails({ isshow: false })
			},
			close: () => {
				tiplists.value.setdetails({ isshow: false })
			}
		})
	}

	/** 请求页面数据 */
	async function initpage() {
		try {

			const response = await postArriveUnloadCarsDetail({
				loadId: details.loadId
			})

			const { code, data } = response
			console.log('response :>> ', response);
			if (code === 200) {
				details.pageInfo = data
				details.datalist = details.orderStatus === 1 ?
					details.pageInfo.unloadScanOrderList :
					details.orderStatus === 2 ?
						details.pageInfo.unloadZeroList :
						details.pageInfo.exceptionList

				if (details.isscan || details.isAbnormal) {
					// 签收总数
					let _total = 0

					let _abnormal = 0

					// 定制品
					for (let iterator of details.pageInfo.unloadScanOrderList) {
						if (iterator.unloadNum)
							_total += iterator.unloadNum || 0
					}

					// 零担
					for (let iterator of details.pageInfo.unloadZeroList) {
						if (iterator.unloadNum)
							_total += iterator.unloadNum || 0
					}

					_total += details.pageInfo.exceptionList.length

					_abnormal += details.pageInfo.exceptionList.length

					// #ifdef APP
					if (details.isAbnormal) {
						utils.handleToast(`卸车${_total}件, 异常卸车${_abnormal}件`)
						return
					}

					utils.handleToast(`卸车${_total}件`)
					// #endif
				}
			}
		} catch (e) {
			//TODO handle the exception
		} finally {
			details.isscan = false
			details.isAbnormal = false
			return null
		}
	}

	function checktype(e) {
		if (e == '') {
			details.schanvalue = ''
			details.orderType = 0
		}
		details.typearr.map(item => {
			if (item.value == e) {
				details.schanvalue = item.label
				details.orderType = item.value
			}
		})
	}

	/**
	 * 切换tabBer状态
	 * @param {type} state 选中的状态 
	 */
	function setorderStatus(state : number) {
		if (details.orderStatus === state) return
		details.orderStatus = state


		details.datalist = details.orderStatus === 1 ?
			details.pageInfo.unloadScanOrderList :
			details.orderStatus === 2 ?
				details.pageInfo.unloadZeroList :
				details.pageInfo.exceptionList
		// for (let i = 0; i < 1000; i++) {
		// 	details.datalist.push({ orderCode: i, unloadPackageList: [] })
		// }

		// return
	}

	/** 包件卸车 -- 单个 */
	const handleOrderStowage = async (_scanCode) => {
		try {
			const submitData = {
				orderPackageCode: _scanCode,
				loadId: details.loadId
			}

			let res = {} as any

			if (details.page === 'ArrivalList') res = await postCarsLoadUnloadPackage(submitData)
			else if (details.page === 'RelayScanList') res = await postTransferUnloadPackage(submitData)

			if (res.code !== 200) return

			basicContainer.value.startPullDownRefresh()
			return res

		} catch (err) {
			console.log('err :>> ', err);
			//TODO handle the exception
		}
	}

	/** 扫描包件 */
	const scanOrder = async () => {
		OrderStowage.value.details.showPopUp = false
		let _scanCode = details.scancode

		// 是否存在该包件
		let isHave = false

		// 该包件是否已被卸车或签收
		let returnContent = ''

		// 该包件是否有托盘信息
		let _trayCode = ''
		for (let item of details.pageInfo.unloadScanOrderList) {
			let isBreak = false
			for (let val of item.unloadPackageList) {
				if (_scanCode === val.orderPackageCode) {
					isHave = true
					isBreak = true
					if (Number(val.scanStatus) === 2) {
						returnContent = '该包件已卸车'
					} else if (Number(val.scanStatus) === 3) {
						returnContent = '该包件已签收'
					}

					if (val.trayCode) {
						_trayCode = val.trayCode
					}
				}
			}

			if (isBreak) break
		}

		if (returnContent) {
			// #ifdef APP
			utils.ttsspke(returnContent)
			// #endif
			uni.showToast({
				title: returnContent,
				icon: 'none'
			})
			return
		}

		if (!isHave) {
			// #ifdef APP
			utils.handleToast('是否异常卸车')
			// #endif

			OrderStowage.value.setDetails({
				title: '异常卸车',
				showPopUp: true,
				async success() {
					try {
						const submitData = {
							orderPackageCode: _scanCode,
							loadId: details.loadId
						}
						let res = {} as any

						if (details.page === 'ArrivalList') res = await postCarsLoadUnloadPackage(submitData)
						else if (details.page === 'RelayScanList') res = await postTransferUnloadPackage(submitData)

						if (res.code !== 200) return

						details.isAbnormal = true
						OrderStowage.value.details.showPopUp = false
						// 刷新
						basicContainer.value.startPullDownRefresh()

					} catch (err) {
						console.log('err :>> ', err);
						//TODO handle the exception
					}
				}
			})
			return
		}

		if (_trayCode) {
			utils.handleToast('是否整托卸车')

			tiplists.value.setdetails({
				isshow: true,
				tipstate: 2,
				list: [],
				isonecheck: true,
				title: '是否整托卸车',
				success: () => {
					tiplists.value.setdetails({ isshow: false })
					// 整托卸车
					scanTray()
				},
				cancel: async () => {
					tiplists.value.setdetails({ isshow: false })

					handleOrderStowage(_scanCode)
				},
				close: () => {
					tiplists.value.setdetails({ isshow: false })
				}
			})
			details.scancode = _trayCode
			return

		}


		handleOrderStowage(_scanCode)
	}

	/** 扫描托盘 */
	const scanTray = async () => {
		const submitData = {
			trayCode: details.scancode,
			loadId: details.loadId
		}
		const res = await postFindUnloadTrayGoodsList(submitData)
		const { code, data } = res
		if (code !== 200) return res
		details.trayInfo.zeroList = data.filter(val => {
			return Number(val.type) === 2
		})

		details.trayInfo.packageList = data.filter(val => {
			return Number(val.type) === 1
		})

		details.trayInfo.trayCode = data[0].trayCode
		details.trayInfo.trayName = data[0].trayName


		TrayStowage.value.setDetails({
			title: '整托卸车',
			showPopUp: true,
			async success() {
				try {
					let res = {} as any

					if (details.page === 'ArrivalList') res = await postUnloadTray(submitData)
					else if (details.page === 'RelayScanList') res = await postTransferUnloadTray(submitData)
					if (res.code !== 200) return
					uni.showToast({
						title: '卸车成功',
						icon: 'none'
					})
					TrayStowage.value.details.showPopUp = false
					basicContainer.value.startPullDownRefresh()
				} catch (e) {
					//TODO handle the exception
				}
			},
			close() {
				TrayStowage.value.details.showPopUp = false
			}
		})

		// return res
	}

	/** 扫描接口
	 * */
	function scandata() {
		console.log('deta :>> ', details.pageType);
		// 按件卸车
		if (Number(details.pageType) === 1) scanOrder()
		else if (Number(details.pageType) === 2) scanTray()
	}

	/** 零担 -- 单独卸车 */
	const handleZeroSoleStowage = (_item, _value) => {
		details.zeroInfo = { waybillNo: _item.waybillNo, orderCode: _item.orderCode, ..._value }

		details.zeroInfo.unloadNum = details.zeroInfo.num

		ZeroStowage.value.setDetails({
			title: '零担卸车',
			showPopUp: true,
			async success() {
				console.log('details.zeroInfo :>> ', details.zeroInfo);
				const submitData = {
					loadId: details.loadId,
					waybillNo: details.zeroInfo.waybillNo,
					orderCode: details.zeroInfo.orderCode,
					productName: details.zeroInfo.orderPackageCode,
					enterNum: details.zeroInfo.unloadNum
				}

				let res = {} as any

				if (details.page === 'ArrivalList') res = await postCarsLoadUnloadZero(submitData)
				else if (details.page === 'RelayScanList') res = await postTransferUnloadZero(submitData)

				if (res.code !== 200) return

				ZeroStowage.value.details.showPopUp = false
				basicContainer.value.startPullDownRefresh()
			}
		})
	}

	/** 零担卸车 */
	const handleZeroStowage = (_item, _value) => {
		// 检测该零担是否符合卸车要求
		let content = ''
		if (Number(_value.scanStatus) === 2) {
			content = '该零担已卸车'
		}
		else if (Number(_value.scanStatus) === 2) {
			content = '该零担已签收'
		}

		if (content) {
			// #ifdef APP
			utils.ttsspke(content)
			// #endif
			uni.showToast({
				title: content,
				icon: 'none'
			})
			return
		}

		// 检测该零担是否有托盘信息; 有: 询问是否整托卸车, 当在整托卸车时, 不允许单独卸车
		if (_value.trayCode) {
			utils.handleToast('是否整托卸车')

			tiplists.value.setdetails({
				isshow: true,
				tipstate: 2,
				list: [],
				isonecheck: true,
				title: '是否整托卸车',
				success: () => {
					tiplists.value.setdetails({ isshow: false })
					// 整托卸车
					scanTray()
				},
				cancel: () => {
					tiplists.value.setdetails({ isshow: false })

					if (Number(details.pageType) === 2) return
					handleZeroSoleStowage(_item, _value)
				},
				close: () => {
					tiplists.value.setdetails({ isshow: false })
				}
			})
			details.scancode = _value.trayCode
			return
		}

		if (Number(details.pageType) === 2) return
		handleZeroSoleStowage(_item, _value)
	}

	const { orderStatus, items, datalist } = toRefs(details)
</script>

<style lang="scss" scoped>
	.xialaxz {
		display: flex;
		flex-direction: column;

		.box {
			display: flex;
			align-items: flex-start;
			justify-content: space-between;
			border-top: 1upx solid #00000010;
			padding: 20upx 0;
			box-sizing: border-box;
			font-size: 28upx;
			color: #092C4D;
			flex-wrap: wrap;

			>view {
				min-width: 50%;
				word-wrap: break-word;
				word-break: break-all;

				&:nth-last-child(1) {
					margin-right: 0upx;
				}
			}
		}
	}

	.butlur {
		width: 200upx !important;
		height: 64upx !important;
		background: var(--subjectColor);
		border-radius: 8upx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 32upx;
		font-weight: 400;
		color: #FFFFFF;
	}

	.tabtip {
		display: flex;
		background-color: #fff;

		>view {
			padding: 20upx 0;
			flex: 1;
			position: relative;
			text-align: center;

			&::after {
				content: '';
				display: block;
				position: absolute;
				width: 0%;
				height: 6upx;
				background: var(--subjectColor);
				bottom: 3upx;
				left: 50%;
				transform: translateX(-50%);
				transition: all .3s;


			}

			&.active {
				&::after {
					content: '';
					display: block;
					width: 60%;
				}
			}
		}


	}


	.hdtp {
		padding: 34upx 32upx 0;
		box-sizing: border-box;
		background-color: #ffffff;
		display: flex;
		flex-direction: column;
		align-items: center;

		>view {
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-size: 28upx;
			font-weight: 400;
			color: #092C4D;
			margin-bottom: 10upx;

			&:nth-last-child(1) {
				margin-bottom: 0;
			}

			>view {
				width: 50%;
				// flex: 1;
			}
		}
	}

	.scve {
		width: 100%;
		height: 50vh;
		margin-top: 20upx;

		.mabx {
			background: #fff;
			display: flex;
			flex-direction: column;
			align-items: center;
			background: #FFFFFF;
		}
	}

	.contenbx1 {
		display: flex;
		justify-content: space-between;
		font-size: 28upx;
		color: #092C4D;
		margin: 20upx;

		>view {

			// &:first-child {
			// margin-right: 20upx;
			// }
			>view:first-child {
				flex: none;
			}
		}

		&:nth-last-child(1) {
			margin-bottom: 0;
		}

		// >view {
		// 	flex: 1;
		// }
	}

	.hdtpnum {
		display: flex;
		align-items: center;
		justify-content: space-around;
		background-color: #ffffff;
		padding: 20upx 0;
		border-bottom: 3upx solid #EEEEEE;

		>view {
			display: flex;
			align-items: center;
			flex-direction: column;
			font-size: 28upx;
			font-weight: 400;
			color: #092C4D;

			&:nth-of-type(1) {
				>view:nth-of-type(2) {
					color: #092C4D;
				}
			}

			&:nth-of-type(2) {
				>view:nth-of-type(2) {
					color: #0086F1;
				}
			}

			&:nth-of-type(3) {
				>view:nth-of-type(2) {
					color: #3AD8BC;
				}
			}

			&:nth-of-type(4) {
				>view:nth-of-type(2) {
					color: #FA8C16;
				}
			}

			>view:nth-of-type(2) {
				font-size: 36upx;
				font-weight: 400;
				color: #092C4D;
			}
		}
	}

	.flex-c-sb {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	// 按钮
	.button {
		padding: 10upx 15upx;
		background: var(--subjectColor);
		color: #fff;
		border-radius: 5upx;
		width: auto;
		display: inline-block;
		font-size: 28upx;

		&.abnormalBtn {
			background: #f8544b;
		}
	}

	// 异常
	.abnormal {
		padding: 10upx;
		background: #fff;
		margin: 5upx 0;
	}

	.w100 {
		width: 100%;
	}

	.input {
		padding: 10upx 20upx;
		border: 1upx solid #aaa;
		border-radius: 10upx;
		margin: 5upx 0 20upx;
	}

	.pop_row {
		padding: 10upx 0;
		border-bottom: 1upx solid #aaa;
	}

	// 分界线
	:deep(.u-divider) {
		margin: 10upx 0;
	}

	:deep(.u-divider__text) {
		font-size: 28upx !important;
	}

	// 详情
	.details_container {
		font-size: 28upx;
		zoom: 0.9;
		border-bottom: 1upx solid #FA8C16;
		padding: 15upx 0;

		&:last-child {
			border-bottom: 0upx;
		}
	}

	// 每行的值
	.row_value {
		font-size: 0.8rem;
		word-break: break-all;
	}

	.mt10 {
		margin-top: 10upx;
	}

	.flex1 {
		flex: 1;
	}

	// 标签
	.tip {
		padding: 10upx 15upx;
		background: var(--subjectColor);
		color: #fff;
		border-radius: 5upx;
		margin-left: 10upx;

		&.red {
			background: #dc362e;
		}

		&.green {
			background: #00d400;
		}

		&.blue {
			background: #0086F1;
		}
	}

	.scroll_row {
		display: flex;

		>view {
			word-break: break-all;
			flex: 1;
		}
	}
</style>