sh-app/pages/index/index.vue

<template>
	<view class="wrap home">
		<u-navbar :is-back="false" title-color="#ffffff" :background="navbarBg" title="首页">
			<view class="slot-wrap">
				<u-input style="color: #ffffff;" v-model="currentProjectName" :clearable="false" type="select"
					placeholder="请选择项目" @click="handleShowProjectSelect" />
			</view>
		</u-navbar>
		<view class="home-icons">

			<view class="home-icon" @click="handleScan">
				<u-icon name="saoyisao" custom-prefix="nbd-icon" :size="68" color="#ffffff" />
				<text>扫一扫</text>
			</view>
			<view class="home-icon">
				<u-icon name="daiban" custom-prefix="nbd-icon" :size="68" color="#ffffff" />
				<text>待办</text>
			</view>
		</view>
		<view class="home-hj">
			<view class="hj-content">
				<view class="hj-row">
					<view class="hj-cell">
						<text class="hj-label">工厂焊接一次合格率</text>
						<text class="hj-value">{{ hjIndexData?.GCFirstPassRate|| '--'}}</text>
					</view>
					<view class="hj-cell">
						<text class="hj-label">现场焊接一次合格率</text>
						<text class="hj-value">{{ hjIndexData?.XCFirstPassRate || '--' }}</text>
					</view>
				</view>
				<view class="hj-row">
					<view class="hj-cell">
						<text class="hj-label">工厂预制进度</text>
						<text class="hj-value hj-sub">{{ hjIndexData?.GCProgress|| '--' }}</text>
					</view>
					<view class="hj-cell">
						<text class="hj-label">现场焊接进度</text>
						<text class="hj-value hj-sub">{{ hjIndexData?.XCProgress || '--'}}</text>
					</view>
				</view>
				<view class="hj-row">
					<view class="hj-cell">
						<text class="hj-label">工厂焊工功效</text>
						<text class="hj-value">{{ hjIndexData?.GCWelderEfficacy || '--'}}</text>
					</view>
					<view class="hj-cell">
						<text class="hj-label">现场焊接功效</text>
						<text class="hj-value">{{ hjIndexData?.XCWelderEfficacy || '--'}}</text>
					</view>
				</view>
			</view>
			<view class="hj-footer">
				<text class="hj-footer-label">项目管道实时预制率 (包含工厂和现场的预制口)</text>
				<text class="hj-footer-value">{{ hjIndexData?.PipePrefabricationRate || '--'}}</text>
			</view>
		</view>

		<!-- 快捷应用 -->
		<view class="section-card home-quick">
			<view class="section-title">
				<view class="title-left">
					<text class="title-line"></text>
					<text>快捷应用</text>
				</view>
				<u-icon class="edit-btn" name="edit-pen" :size="32" color="#999" @click="openEditQuick" />
			</view>
			<view class="section-grid">
				<view class="grid-item" v-for="(item, idx) in quickApps" :key="idx" @click="handleSkip(item)">
					<view class="icon-box">
						<u-icon :name="item.icon" :size="56" :custom-prefix='item.prefix'
							:color="pastelColors[idx % 6]" />
					</view>
					<text class="item-label">{{ item.name }}</text>
				</view>
				<view v-if="quickApps.length === 0" class="empty-tip">请选择应用</view>
			</view>
		</view>



		<!-- 业务查询 -->
		<view class="section-card home-query" v-if="queryApps && queryApps.length > 0">
			<view class="section-title">
				<view class="title-left">
					<text class="title-line"></text>
					<text>业务查询</text>
				</view>
			</view>
			<view class="section-grid">
				<view class="grid-item" v-for="(item, idx) in queryApps" :key="idx" @click="handleSkip(item)">
					<view class="icon-box">
						<u-icon :name="item.icon" :custom-prefix='item.prefix' :size="56"
							:color="pastelColors[idx % 6]" />
					</view>
					<text class="item-label">{{ item.name }}</text>
				</view>
			</view>
		</view>

		<!-- 编辑快捷应用弹窗 -->
		<u-popup v-model="showEditQuick" mode="bottom" height="70%">
			<view class="edit-quick">
				<view class="edit-title">
					<text>选择快捷应用</text>
				</view>
				<view class="edit-grid">
					<view v-for="(item, idx) in editCache" :key="idx" class="edit-item"
						:class="{ active: item.selected }" @click="toggleSelect(item)">
						<view class="icon-box">
							<u-icon :name="item.icon" :size="48" :custom-prefix='item.prefix'
								:color="item.selected ? pastelColors[idx % 6] : '#ccc'" />
						</view>
						<text class="edit-label">{{ item.name }}</text>
						<view v-if="item.selected" class="selected-mark">
							<u-icon name="checkmark" :size="24" color="#fff" />
						</view>
					</view>
				</view>
				<view class="edit-btns">
					<u-button size="medium" class="btn-cancel" @click="showEditQuick = false">取消</u-button>
					<u-button size="medium" class="btn-confirm" type="primary" @click="handleConfirmEdit">确定</u-button>
				</view>
			</view>
		</u-popup>
		<nbd-select v-model="showProject" title="请选择项目" :list="projectList" label-key="ProjectName" :show-search="true"
			value-key="ProjectId" v-model:model="currentProject" @search-change="handleSearchChange"
			@confirm="handleConfirmProject" />
	</view>
</template>

<script setup>
	import {
		reqProjectByUserId
	} from '@/api/user.js'
	import {
		computed,
		reactive,
		ref
	} from 'vue'
	import {
		useUserStore,
		useMenuStore,
		useLargeStore
	} from '@/store';

	import {
		storeToRefs
	} from 'pinia';

	import {
		scanToSkipUrl
	} from '@/utils/scanUtils.js'

	const userStore = useUserStore()
	const menuStore = useMenuStore()
	const largeStore = useLargeStore()
	const {
		setProjectList,
		setCurrentProject
	} = userStore
	const {
		userInfo,
		projectList,
		currentProject
	} = storeToRefs(userStore)
	const {
		quickApps,
		queryApps,
		editCache
	} = storeToRefs(menuStore)
	const {
		hjIndexData
	} = storeToRefs(largeStore)
	const {
		pastelColors
	} = menuStore
	const navbarBg = reactive({
		backgroundColor: "var(--u-type-primary)"
	})
	const projectNameKeyword = ref('')
	const showProject = ref(false)
	const showEditQuick = ref(false)

	const currentProjectName = computed(() => currentProject.value?.ProjectName || '')

	const handleSkip = (item) => {
		if (!currentProject.value.ProjectId) {
			handleShowProjectSelect()
			uni.showToast({
				title: '请选择一个项目',
				icon: 'none'
			})
			return
		}
		uni.navigateTo({
			url: item.path
		})
	}

	// 打开编辑弹窗
	const openEditQuick = () => {
		menuStore.openEdit()
		showEditQuick.value = true
	}

	// 切换选择状态
	const toggleSelect = (item) => {
		menuStore.toggleSelect(item)
	}

	// 确认编辑
	const handleConfirmEdit = () => {
		menuStore.confirmEdit()
		showEditQuick.value = false
		uni.showToast({
			title: '已更新快捷应用',
			icon: 'none'
		})
	}

	const handleShowProjectSelect = () => {
		reqProjectByUserId(userInfo.value.PersonId).then(res => {
			setProjectList(res.data)
			showProject.value = true
		})
	}
	/**
	 * 项目列表点击确认
	 */
	const handleConfirmProject = (item) => {
		setCurrentProject(item)
		showProject.value = false
	}
	/**
	 * 项目按名称搜索
	 */
	const handleSearchChange = (keyword) => {
		projectNameKeyword.value = keyword
	}

	/**
	 * 扫一扫
	 */
	const handleScan = () => {
		uni.scanCode({
			onlyFromCamera: true,
			success(res) {
				const result = res.result || ''
				uni.navigateTo({
					url:scanToSkipUrl(result)
				})
			},
			fail(err) {
				console.error('扫码失败:', err)
			}
		})
	}
</script>