aiot-app/pages/index/index.vue

<template>
	<view>
		<uni-nav-bar fixed="true" statusBar="true" title="工作台" right-icon="scan"
			@clickRight="HandlScanCode"></uni-nav-bar>
		<!-- 顶部横向导航 -->
		<view class="top-nav-wrapper" v-if="moduleNavList.length > 0">
			<scroll-view class="top-nav" scroll-x enable-flex :scroll-into-view="scrollIntoViewId" scroll-with-animation
				@scroll="handleNavScroll">
				<view class="nav-tab" v-for="(item, index) in moduleNavList" :key="index" :id="'nav-' + item.id"
					:class="{ active: currentNavIndex === index }" @click="goToModule(item, index)">
					{{ item.name }}
				</view>
			</scroll-view>
		</view>
		<view class="content-wrapper">
			<view v-if="internalManagementList.length > 0" :id="'module-xietong'" :data-index="0">
				<CellTip title="协同办公"></CellTip>
				<view class="nav">
					<view class="nav-content">
						<view class="nav-item" v-for="(item, index) in internalManagementList"
							@click="toNav(item.path)">
							<MenuIcon :name="item.name || item.title"></MenuIcon>
							<i class="badge" v-if="item.badge">{{ item.badge }}</i>
							<label>{{ item.name }}</label>
						</view>
					</view>
				</view>
			</view>
			<view v-if="hrList.length > 0" :id="'module-renli'" :data-index="1">
				<CellTip title="人力资源"></CellTip>
				<view class="nav">
					<view class="nav-content">
					<view class="nav-item" v-for="item in hrList" :key="item.link_url"
						@click="toNav(item.path)">
						<MenuIcon :name="item.name || item.title"></MenuIcon>
						<i class="badge" v-if="item.badge">{{ item.badge }}</i>
						<label>{{ item.title }}</label>
						<label>{{ item.num }}</label>
					</view>
					</view>
				</view>
			</view>
			<view v-if="productionList.length > 0" :id="'module-shengchan'" :data-index="1">
				<CellTip title="生产管理"></CellTip>
				<view class="nav">
					<view class="nav-content">
					<view class="nav-item" v-for="item in productionList" :key="item.link_url"
						@click="toNav(item.path)">
						<MenuIcon :name="item.name || item.title"></MenuIcon>
						<i class="badge" v-if="item.badge">{{ item.badge }}</i>
						<label>{{ item.title }}</label>
						<label>{{ item.num }}</label>
					</view>
					</view>
				</view>
			</view>
			<view v-if="operationsList.length > 0" :id="'module-yunwei'" :data-index="2">
				<CellTip title="运维管理"></CellTip>
				<view class="nav">
					<view class="nav-content">
						<view class="nav-item" v-for="(item, index) in operationsList" @click="toNav(item.path)">
							<MenuIcon :name="item.name || item.title"></MenuIcon>
							<i class="badge" v-if="item.badge">{{ item.badge }}</i>
							<label>{{ item.name }}</label>
						</view>
					</view>
				</view>
			</view>
			<view v-if="serviceList.length > 0" :id="'module-shouhou'" :data-index="3">
				<CellTip title="售后服务管理"></CellTip>
				<view class="nav">
					<view class="nav-content">
						<view class="nav-item" v-for="(item, index) in serviceList" @click="toNav(item.path)">
							<MenuIcon :name="item.name || item.title"></MenuIcon>
							<i class="badge" v-if="item.badge">{{ item.badge }}</i>
							<label>{{ item.name }}</label>
						</view>
					</view>
				</view>
			</view>
			<view v-if="warehousingList.length > 0" :id="'module-cangchu'" :data-index="4">
				<CellTip title="仓储管理"></CellTip>
				<view class="nav">
					<view class="nav-content">
					<view class="nav-item" v-for="(item, index) in warehousingList" @click="toNav(item.path)">
						<MenuIcon :name="item.name || item.title"></MenuIcon>
						<i class="badge" v-if="item.badge">{{ item.badge }}</i>
						<label>{{ item.title }}</label>
					</view>
					</view>
				</view>
			</view>
			<view v-if="dispatchList.length > 0" :id="'module-yunshu'" :data-index="5">
				<CellTip title="运输管理"></CellTip>
				<view class="nav">
					<view class="nav-content">
						<view class="nav-item" v-for="(item, index) in dispatchList" @click="toNav(item.path)">
							<MenuIcon :name="item.name || item.title"></MenuIcon>
							<i class="badge" v-if="item.badge">{{ item.badge }}</i>
							<label>{{ item.name }}</label>
						</view>
					</view>
				</view>
			</view>
			<view v-if="saleManageList.length > 0" :id="'module-yingxiao'" :data-index="6">
				<CellTip title="营销管理"></CellTip>
				<view class="nav">
					<view class="nav-content">
						<view class="nav-item" v-for="(item, index) in saleManageList" @click="toNav(item.path)">
							<MenuIcon :name="item.name || item.title"></MenuIcon>
							<i class="badge" v-if="item.badge">{{ item.badge }}</i>
							<label>{{ item.name }}</label>
						</view>
					</view>
				</view>
			</view>
			<view v-if="purchaseManageList.length > 0" :id="'module-caigou'" :data-index="7">
				<CellTip title="采购管理"></CellTip>
				<view class="nav">
					<view class="nav-content">
						<view class="nav-item" v-for="(item, index) in purchaseManageList" @click="toNav(item.path)">
							<MenuIcon :name="item.name || item.title"></MenuIcon>
							<i class="badge" v-if="item.badge">{{ item.badge }}</i>
							<label>{{ item.name }}</label>
						</view>
					</view>
				</view>
			</view>
			<view v-if="pcsList.length > 0" :id="'module-shengchanguanli'" :data-index="8">
				<CellTip title="生产管控"></CellTip>
				<view class="nav">
					<view class="nav-content">
						<view class="nav-item" v-for="(item, index) in pcsList" @click="toNav(item.path)">
							<MenuIcon :name="item.name || item.title"></MenuIcon>
							<i class="badge" v-if="item.badge">{{ item.badge }}</i>
							<label>{{ item.name }}</label>
						</view>
					</view>
				</view>
			</view>
			<view v-if="qmsList.length > 0" :id="'module-zhiliang'" :data-index="9">
				<CellTip title="质量管理"></CellTip>
				<view class="nav">
					<view class="nav-content">
						<view class="nav-item" v-for="(item, index) in qmsList" @click="toNav(item.path)">
							<MenuIcon :name="item.name || item.title"></MenuIcon>
							<i class="badge" v-if="item.badge">{{ item.badge }}</i>
							<label>{{ item.name }}</label>
						</view>
					</view>
				</view>
			</view>
			<view v-if="energyManagement.length > 0" :id="'module-nengyuan'" :data-index="10">
				<CellTip title="能源管理"></CellTip>
				<view class="nav">
					<view class="nav-content">
						<view class="nav-item" v-for="(item, index) in energyManagement" @click="toNav(item.path)">
							<MenuIcon :name="item.name || item.title"></MenuIcon>
							<i class="badge" v-if="item.badge">{{ item.badge }}</i>
							<label>{{ item.name }}</label>
						</view>
					</view>
				</view>
			</view>
			<view v-if="productionSafetyManagement.length > 0" :id="'module-anquan'" :data-index="11">
				<CellTip title="生产安全"></CellTip>
				<view class="nav">
					<view class="nav-content">
						<view class="nav-item" v-for="(item, index) in productionSafetyManagement"
							@click="toNav(item.path)">
							<MenuIcon :name="item.name || item.title"></MenuIcon>
							<i class="badge" v-if="item.badge">{{ item.badge }}</i>
							<label>{{ item.name }}</label>
						</view>
					</view>
				</view>
			</view>

			<view v-if="traceabilityList.length > 0" :id="'module-suyuan'" :data-index="12">
				<CellTip title="溯源管理"></CellTip>
				<view class="nav">
					<view class="nav-content">
						<view class="nav-item" v-for="(item, index) in traceabilityList" @click="toNav(item.path)">
							<MenuIcon :name="item.name || item.title"></MenuIcon>
							<i class="badge" v-if="item.badge">{{ item.badge }}</i>
							<label>{{ item.name }}</label>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import CellTip from "./CellTip.vue";
	import MenuIcon from "./MenuIcon.vue";
	import {
		statistics,
		qualityTodoByPda
	} from "@/api/myTicket";
	import { getResourcesTree } from "@/api/pda/common.js";
	// 已下线的 HR 列表页 → 直达发起页（菜单 path 由后台配置，此处兜底兼容旧配置，
	// 避免菜单仍然指向已删除的页面导致「页面不存在」；后台改好后这里自然不再命中）
	const LEGACY_ENTRY = {
		// 入职列表（2026-10-15 下线）
		"/pages/hr/manage/onboard-list": "/pages/hr/manage/onboard-create",
		// 转正办理列表（2026-10-16 下线）
		"/pages/hr/manage/regular-list": "/pages/hr/manage/regular-create",
		// 人事异动列表（2026-10-16 下线）→ 发起调岗
		"/pages/hr/manage/transfer-list": "/pages/hr/manage/transfer-create",
		// 离职管理列表（2026-10-16 下线）→ 发起离职申请
		"/pages/hr/manage/resign-list": "/pages/hr/apply/form?type=resign",
		// 单据详情页（2026-10-16 下线）：详情统一走「发起页的 detail 模式」，
		// 旧 path 兜底到「我的申请」，用户可再从列表点进具体单据
		"/pages/hr/manage/transfer-detail": "/pages/hr/apply/list",
		"/pages/hr/manage/resign-detail": "/pages/hr/apply/list",
		"/pages/hr/manage/regular-detail": "/pages/hr/apply/list",
		"/pages/hr/manage/onboard-detail": "/pages/hr/manage/onboard-create",
	};
	export default {
		components: {
			CellTip,
			MenuIcon,
		},
		data() {
			return {
				timer: null,
				src1: "https://cdn.uviewui.com/uview/album/1.jpg",
				workOrder: {}, // 工单统计数据
				qmsList: [],
				//生产类
				productionList: [],
				// 人力资源
				hrList:[],
				//仓储管理
				warehousingList: [],
				//运维类
				operationsList: [],
				dispatchList: [],
				internalManagementList: [],
				treeList: [],
				saleManageList: [],
				// 售后服务
				serviceList: [],
				// 溯源管理
				traceabilityList: [],
				// 采购管理
				purchaseManageList: [],
				pcsList: [],
				// 导航相关
				moduleNavList: [],
				energyManagement: [],
				//安全生产
				productionSafetyManagement: [],
				scrollIntoViewId: "",
				currentNavIndex: 0,
				moduleObserver: null,
				// 顶部固定区域高度（状态栏 + nav-bar + 横向导航）
				topNavHeight: 0,
			};
		},
		created() {
			this.getTree();
		},
		onShow() {
			// this.getStatistics();
			this.$nextTick(() => {
				this.calculateTopNavHeight();
			});
		},
		onReady() {
			// 页面准备完成后，滚动到第一个模块
			this.$nextTick(() => {
				if (this.moduleNavList.length > 0) {
					this.goToModule(this.moduleNavList[0], 0);
				}
			});
		},
		onHide() {
			clearTimeout(this.timer);
		},
		onUnload() {
			clearTimeout(this.timer);
		},
		methods: {
			// 计算顶部固定区域高度（动态获取实际高度）
			calculateTopNavHeight() {
				const query = uni.createSelectorQuery().in(this);
				query
					.select(".top-nav-wrapper")
					.boundingClientRect((rect) => {
						if (rect) {
							this.topNavHeight = rect.bottom;
						}
					})
					.exec();
			},
			// getStatistics() {
			// 	// 获取工单统计数
			// 	statistics()
			// 		.then((res) => {
			// 			this.workOrder = res;
			// 			this.operationsList.forEach((item) => {
			// 				if (item.name == "保养工单") item.badge = res.maintenanceNum;
			// 				if (item.name == "巡点检工单") item.badge = res.patrolInspection;
			// 				if (item.name == "维修工单") item.badge = res.repairsNum;
			// 				if (item.name == "检修工单") item.badge = res.serviceNum;

			// 			});
			// 		})
			// 		.finally(() => {
			// 			this.timer = setTimeout(() => {
			// 				this.getStatistics();
			// 			}, 12000);
			// 		});

			// },
			getBrages() {
				qualityTodoByPda().then((res) => {
					console.log(2)
					this.qmsList.forEach((item) => {
						if (item.name == "质检工单") item.badge = res.workOrderNum;
						if (item.name == "我的质检工单")
							item.badge = res.myWorkOrderNum;
						if (item.name == "我的任务单") item.badge = res.myTaskMonadNum;
						if (item.name == "我的受托单")
							item.badge = res.myRequestEntrustNum;
					});
					// this.qmsList = f.children;
				});

				statistics()
					.then((res) => {
						this.workOrder = res;
						this.operationsList.forEach((item) => {
							if (item.name == "保养工单") item.badge = res.maintenanceNum;
							if (item.name == "巡点检工单") item.badge = res.patrolInspection;
							if (item.name == "维修工单") item.badge = res.repairsNum;
							if (item.name == "检修工单") item.badge = res.serviceNum;
						});
					})
			},
			getTree() {
				// 菜单缓存必须容错读取：不能写成 JSON.parse(uni.getStorageSync("treeList"))。
				// 缓存为空时（首次进入 / 退出登录、token 过期被 removeStorageSync 清掉）
				// getStorageSync 返回 ""，JSON.parse("") 抛
				// SyntaxError: Unexpected end of JSON input，直接打断 created 钩子 → 整页白屏。
				let list = [];
				try {
					const raw = uni.getStorageSync("treeList");
					if (raw) list = typeof raw === "string" ? JSON.parse(raw) : raw;
				} catch (e) {
					console.log("[工作中心] 菜单缓存解析失败，已按空菜单处理:", (e && e.message) || e);
				}
				if (!Array.isArray(list)) list = [];
				this.treeList = list;
				console.log("-----------list--------------");
				console.log(list);

				this.renderMenuTree(list);
				this.buildNavList();
				this.getBrages();

				// 缓存缺失时自愈：重新拉一次菜单树并回写缓存，避免工作中心一直是空白
				if (list.length === 0) {
					if (uni.getStorageSync("token")) {
						this.reloadMenuTree();
					} else {
						uni.reLaunch({ url: "/pages/login/login" });
					}
				}
			},
			// 把菜单树铺到各模块列表（树为空时什么都不做）
			renderMenuTree(list) {
				// children 也要判断：缓存里可能是 [{...}] 这种没有 children 的残缺结构
				if (list[0] && Array.isArray(list[0].children) && list[0].children.length > 0) {
					// console.log(list[0].children, "list[0].children ----");
					list[0].children.forEach((f) => {
						if (f.path == "productionManage") {
							this.productionList = f.children;
						} else if (f.path == "hr") {
							this.hrList = f.children;
						} else if (f.path == "operationsList") {
							// const promise = statistics().then((res) => {
							// console.log(3)
							// this.workOrder = res;
							// f.children.forEach((item) => {
							// 	if (item.name == "保养工单") item.badge = res.maintenanceNum;
							// 	if (item.name == "巡点检工单")
							// 		item.badge = res.patrolInspection;
							// 	if (item.name == "维修工单") item.badge = res.repairsNum;
							// });
							this.operationsList = f.children;
							// });
							// asyncPromises.push(promise);
						} else if (f.path == "warehouseManagement") {
							this.warehousingList = f.children;
						} else if (f.path == "saleManageList") {
							this.saleManageList = f.children;
							this.saleManageList.forEach((item) => {
								item.name = item.name.replace("员工", "");
								item.name = item.name.replace("管理员", "");
							});
						} else if (f.path == "internalManagement") {
							// console.log(f, "f");
							this.internalManagementList = f.children;
						} else if (f.path == "serviceList") {
							this.serviceList = f.children;
						} else if (f.path == "traceability") {
							this.traceabilityList = f.children;
						} else if (f.path == "purchasingManage") {
							this.purchaseManageList = f.children;
						} else if (f.path == "qualityManage") {
							// const promise = qualityTodoByPda().then((res) => {
							// console.log(2)
							// f.children.forEach((item) => {
							// 	if (item.name == "质检工单") item.badge = res.workOrderNum;
							// 	if (item.name == "我的质检工单")
							// 		item.badge = res.myWorkOrderNum;
							// 	if (item.name == "我的任务单") item.badge = res.myTaskMonadNum;
							// 	if (item.name == "我的受托单")
							// 		item.badge = res.myRequestEntrustNum;
							// });
							this.qmsList = f.children;
							// });
							// asyncPromises.push(promise);
						} else if (f.path == "productionControlManagement") {
							this.pcsList = f.children;
						} else if (f.path == "dispatchManage") {
							this.dispatchList = f.children;
						} else if (f.path == 'energyManagement') {
							this.energyManagement = f.children

						} else if (f.path == 'productionSafetyManagement') {
							this.productionSafetyManagement = f.children

						}
					});
				}
			},
			// 菜单缓存缺失时的自愈：重新获取菜单树 → 回写缓存 → 重新渲染
			async reloadMenuTree() {
				try {
					const res = await Promise.race([
						getResourcesTree(),
						new Promise((_, reject) =>
							setTimeout(() => reject(new Error("菜单树请求超时")), 10000)
						),
					]);
					if (!Array.isArray(res) || res.length === 0) {
						console.log("[工作中心] 菜单树为空，可能未配置权限");
						return;
					}
					uni.setStorageSync("treeList", JSON.stringify(res));
					this.treeList = res;
					this.renderMenuTree(res);
					this.buildNavList();
					this.getBrages();
					console.log("[工作中心] 菜单缓存已自动重建");
				} catch (e) {
					// utils/request 在响应非 JSON 时 Promise 不会 settle，这里用超时兜底，避免一直白屏
					console.log("[工作中心] 菜单树自动重建失败:", (e && e.message) || e);
				}
			},
			// 构建导航列表
			buildNavList() {
				const navMap = {
					internalManagementList: {
						name: "协同办公",
						id: "xietong"
					},
					hrList: {
						name: "人力资源",
						id: "renli"
					},
					productionList: {
						name: "生产管理",
						id: "shengchan"
					},
					operationsList: {
						name: "运维管理",
						id: "yunwei"
					},
					serviceList: {
						name: "售后服务",
						id: "shouhou"
					},
					warehousingList: {
						name: "仓储管理",
						id: "cangchu"
					},
					dispatchList: {
						name: "运输管理",
						id: "yunshu"
					},
					saleManageList: {
						name: "营销管理",
						id: "yingxiao"
					},
					purchaseManageList: {
						name: "采购管理",
						id: "caigou"
					},
					pcsList: {
						name: "生产管控",
						id: "shengchanguanli"
					},
					qmsList: {
						name: "质量管理",
						id: "zhiliang"
					},
					energyManagement: {
						name: "能源管理",
						id: "nengyuan"
					},
					productionSafetyManagement: {
						name: "生产安全",
						id: "anquan"
					},
					traceabilityList: {
						name: "溯源管理",
						id: "suyuan"
					},
				};

				this.moduleNavList = Object.entries(navMap)
					.filter(([key]) => this[key]?.length > 0)
					.map(([, value]) => value);


			},
			// 点击导航跳转 - 使用动态获取的顶部高度进行精确定位
			goToModule(item, index) {
				this.currentNavIndex = index;
				this.scrollIntoViewId = "nav-" + item.id;
				setTimeout(() => {
					this.scrollIntoViewId = "";
					const query = uni.createSelectorQuery().in(this);
					query.select("#module-" + item.id).boundingClientRect();
					query.select(".top-nav-wrapper").boundingClientRect();
					query.selectViewport().scrollOffset();
					query.exec((res) => {
						if (res[0] && res[1] && res[2]) {
							const targetTop = res[0].top;
							const fixedBottom = res[1].bottom;
							const currentScrollTop = res[2].scrollTop;
							const scrollTop = currentScrollTop + targetTop - fixedBottom - 10;
							uni.pageScrollTo({
								scrollTop: Math.max(0, scrollTop),
								duration: 300,
							});
						}
					});
				}, 200);
			},
			// 监听导航滚动
			handleNavScroll(e) {
				// 可以在这里添加滚动时的逻辑
			},
			onUnload() {
				if (this.moduleObserver) {
					this.moduleObserver.disconnect();
				}
				clearTimeout(this.timer);
			},

			toNav(url) {
				console.log(url);
				// 只按路径匹配（后台 path 可能带 query）；命中已下线的旧列表页时改走直达发起页
				const path = String(url || "").split("?")[0].split("#")[0];
				uni.navigateTo({
					url: LEGACY_ENTRY[path] || url,
					// 跳转失败不能静默：真机上「点击没反应」多数是菜单 path 指向
					// 已删除/未注册的页面，这里把目标路径直接报出来便于定位
					fail: (err) => {
						console.log("[工作中心] 跳转失败：", path, err);
						// 失败路径直接进剪贴板，方便把配置错误发给开发定位
						uni.setClipboardData({
							data: path,
							success: () => {
								uni.showToast({
									title: `页面未注册：${path}（路径已复制）`,
									icon: "none",
									duration: 3000,
								});
							},
						});
					},
				});
			},
			HandlScanCode() {
				let _this = this;
				uni.scanCode({
					success: function(res) {
						console.log(res);
						// 获取扫描结果中的URL
						const scanResult = res.result;
						// 检查URL是否包含traceability
						if (scanResult && scanResult.includes("/traceability")) {
							// 从扫描结果中提取id参数
							let id = "";
							if (scanResult.includes("id=")) {
								// 分割URL获取id参数值
								const idPart = scanResult.split("id=")[1];
								// 如果id后面还有其他参数，只取到第一个&之前的部分
								if (idPart.includes("&")) {
									id = idPart.split("&")[0];
								} else {
									id = idPart;
								}
							}
							// 跳转到溯源页面并传递id
							uni.navigateTo({
								url: `/pages/traceability/scanCode/index?id=${id}`,
							});
							return;
						} else if (scanResult && scanResult.includes("/pages/warehouse/hwQrcode/index")) {
							uni.navigateTo({
								url: `${scanResult}`,
							});
							return
						}
						_this.scantoRouter(scanResult);
					},
				});
			},
			scantoRouter(result) {
				uni.navigateTo({
					url: `/pages/pda/workOrder/extrusionMolding/index?id=${result}`,
				});
			},
		},
	};
</script>

<style lang="scss" scoped>
	@import "index.scss";
</style>