1

2026-09-24 16:25:22 +08:00
commit 7428184f01
1198 changed files with 314515 additions and 0 deletions
@@ -0,0 +1,234 @@
+<template>
+	<hr-page page-bg="#F3F4F6" status-bg="#FFFFFF" nav-title="设备详情" :xloading="true" @right-click="onMore">
+		<template v-slot:right>
+			<x-icon name="more-fill" color="#6B7280" font-size="18"></x-icon>
+		</template>
+
+		<view class="hr-body">
+
+			<!-- ============ 概览 ============ -->
+			<hr-card>
+				<view class="hr-row">
+					<view class="hr-avt hr-avt-lg dd-avt">
+						<text>{{ device.icon }}</text>
+					</view>
+					<view class="hr-flex1">
+						<text class="dd-name">{{ device.name }}</text>
+						<text class="dd-meta">{{ device.meta }}</text>
+						<view style="margin-top:7px">
+							<hr-pc :level="2" :text="device.status"></hr-pc>
+						</view>
+					</view>
+				</view>
+			</hr-card>
+
+			<!-- ============ 借用前自检 ============ -->
+			<hr-sec :title="'借用前自检（5 项缺一不可）'" :more="checkedCount + ' / 5'"></hr-sec>
+			<hr-card variant="list">
+				<view v-for="(c, i) in checks" :key="i" :class="c.checked ? 'dd-ck dd-ck-on' : 'dd-ck'"
+					@click="toggleCheck(i)">
+					<view :class="c.checked ? 'dd-ck-box dd-ck-box-on' : 'dd-ck-box'">
+						<x-icon v-if="c.checked" name="check-line" color="#FFFFFF" font-size="14"></x-icon>
+					</view>
+					<view class="hr-flex1">
+						<text class="dd-ck-t">{{ c.title }}</text>
+						<text class="dd-ck-s">{{ c.sub }}</text>
+					</view>
+				</view>
+			</hr-card>
+
+			<!-- ============ 维护记录 ============ -->
+			<hr-sec title="维护记录" :first="false"></hr-sec>
+			<hr-card>
+				<hr-timeline :nodes="device.maintain"></hr-timeline>
+			</hr-card>
+
+			<hr-tip style="margin-top:14px" theme="warn" icon="⚠"
+				text="发现设备异常可直接一键报修，系统将自动流转至设备科并暂停借出。"></hr-tip>
+
+			<view style="height:14px"></view>
+		</view>
+
+		<template v-slot:footer>
+			<view class="hr-fixedbar">
+				<view class="hr-btn hr-btn-ghost dd-foot-report" @click="onReport">
+					<x-icon name="error-warning-line" color="#1F2937" font-size="16"></x-icon>
+					<text class="dd-foot-t">报修</text>
+				</view>
+				<view :class="allChecked ? 'hr-btn hr-btn-primary' : 'hr-btn hr-btn-disabled'" style="flex:1"
+					@click="onBorrow">
+					<text :class="allChecked ? 'dd-foot-t2' : 'dd-foot-t3'">
+						{{ allChecked ? '确认自检并借用' : '请完成 5 项自检' }}
+					</text>
+				</view>
+			</view>
+		</template>
+	</hr-page>
+</template>
+
+<script lang="uts" setup>
+	import { ref, computed } from 'vue'
+	import { deviceDetail } from '@/mock/index.uts'
+	import { HrDeviceCheck } from '@/mock/types.uts'
+	import { navBack } from '@/utils/nav.uts'
+
+	/**
+	 * s32 设备详情
+	 * 借用前 5 项自检缺一不可，全部确认后才可借出。
+	 */
+	const device = deviceDetail
+	const checks = ref<HrDeviceCheck[]>([])
+
+	// 深拷贝一份，避免污染 mock 数据
+	const arr : HrDeviceCheck[] = []
+	for (let i = 0; i < device.checkList.length; i++) {
+		const c = device.checkList[i]
+		arr.push({ title: c.title, sub: c.sub, checked: c.checked } as HrDeviceCheck)
+	}
+	checks.value = arr
+
+	const checkedCount = computed(() : number => {
+		let n = 0
+		for (let i = 0; i < checks.value.length; i++) {
+			if (checks.value[i].checked) { n++ }
+		}
+		return n
+	})
+
+	const allChecked = computed(() : boolean => {
+		return checkedCount.value == checks.value.length
+	})
+
+	function toggleCheck(i : number) : void {
+		const list : HrDeviceCheck[] = []
+		for (let k = 0; k < checks.value.length; k++) {
+			const c = checks.value[k]
+			list.push({
+				title: c.title, sub: c.sub, checked: k == i ? !c.checked : c.checked
+			} as HrDeviceCheck)
+		}
+		checks.value = list
+	}
+
+	function onBorrow() : void {
+		if (!allChecked.value) {
+			uni.showToast({ title: '请先完成 5 项自检', icon: 'none' })
+			return
+		}
+		uni.showLoading({ title: '提交中' })
+		setTimeout(() => {
+			uni.hideLoading()
+			uni.showModal({
+				title: '借用成功',
+				content: `${device.name}\n预计归还时间：3 天后（09-27）\n已生成借用单，逾期将自动提醒。`,
+				showCancel: false,
+				success: (res) => {
+					navBack()
+				}
+			})
+		}, 700)
+	}
+
+	function onReport() : void {
+		uni.showModal({
+			title: '一键报修',
+			editable: true,
+			placeholderText: '请描述设备异常，如：屏幕无法点亮',
+			success: (res) => {
+				if (res.confirm) {
+					uni.showToast({ title: '已流转至设备科', icon: 'success' })
+				}
+			}
+		})
+	}
+
+	function onMore() : void {
+		uni.showToast({ title: '设备档案 / 借还记录', icon: 'none' })
+	}
+</script>
+
+<style>
+	.dd-avt {
+		margin-right: 26rpx;
+		background-color: #2563EB;
+	}
+
+	.dd-name {
+		font-size: 33.6rpx;
+		font-weight: bold;
+		color: #1F2937;
+	}
+
+	.dd-meta {
+		font-size: 25.8rpx;
+		color: #6B7280;
+		margin-top: 10rpx;
+	}
+
+	.dd-ck {
+		display: flex;
+		flex-direction: row;
+		align-items: center;
+		padding-top: 22rpx;
+		padding-bottom: 22rpx;
+		border-bottom: 2rpx solid #F3F4F6;
+	}
+
+	.dd-ck-on {
+		/* 选中态体现在勾选框 */
+	}
+
+	.dd-ck-box {
+		width: 44rpx;
+		height: 44rpx;
+		border-radius: 14rpx;
+		border: 3rpx solid #D1D5DB;
+		background-color: #FFFFFF;
+		display: flex;
+		flex-direction: row;
+		align-items: center;
+		justify-content: center;
+		margin-right: 22rpx;
+	}
+
+	.dd-ck-box-on {
+		border: 3rpx solid #10B981;
+		background-color: #10B981;
+	}
+
+	.dd-ck-t {
+		font-size: 30.2rpx;
+		font-weight: bold;
+		color: #1F2937;
+	}
+
+	.dd-ck-s {
+		font-size: 23.6rpx;
+		color: #9CA3AF;
+		margin-top: 4rpx;
+	}
+
+	.dd-foot-report {
+		flex: 0 0 220rpx;
+		margin-right: 18rpx;
+	}
+
+	.dd-foot-t {
+		font-size: 31.4rpx;
+		font-weight: bold;
+		color: #1F2937;
+		margin-left: 10rpx;
+	}
+
+	.dd-foot-t2 {
+		font-size: 32.4rpx;
+		font-weight: bold;
+		color: #FFFFFF;
+	}
+
+	.dd-foot-t3 {
+		font-size: 32.4rpx;
+		font-weight: bold;
+		color: #9CA3AF;
+	}
+</style>