aiot-app/pages/home/home.vue

<template>
	<view class="ss">
		<!-- 头 -->
		<uni-nav-bar fixed="true" statusBar="true" right-icon="scan" title="首页"
			@clickRight="HandlScanCode">
			<template v-slot:left>
				<uni-badge size="small" :text="messageCount" absolute="righttop" type="error">
					<uni-icons type="notification" size="24" @click="handleMessage"></uni-icons>
				</uni-badge>
			</template>
		</uni-nav-bar>
		<!-- <uni-nav-bar fixed="true" statusBar="true" title="工作台"></uni-nav-bar> -->

		<view class="container">
			<navigation :workOrder="workOrder" ref="navigationRef"></navigation>
			<!-- 设备主管 -->
			<equipment v-if="roleId == 102" ref="equipmentRef"></equipment>
			<!-- 运维 -->
			<Mocha v-if="roleId == 157" ref="mochaRef"></Mocha>
			<!-- 模具舟皿 -->
			<mould v-if="roleId == 155" ref="mouldRef"></mould>
			<!-- 备品备件 -->
			<sparePart v-if="roleId == 150" ref="sparePartRef"></sparePart>
			<!--  -->
			<view v-if="$isAuthorities('pda:home:manage')">
				<homeNew ref="homeNewRef"></homeNew>
			</view>

			<view v-else>
				<view class="data-middle">
					<view class="cell">
						<view class="num">
							{{homeData.totalFinishedProducts}}
						</view>
						<view class="label">
							成品库存总量
						</view>
					</view>

					<view class="cell">
						<view class="num">
							{{homeData.totalRawMaterials}}
						</view>
						<view class="label">
							物料库存总量
						</view>
					</view>

					<view class="cell">
						<view class="num">
							{{homeData.goodsCount}}
						</view>
						<view class="label">
							商品列表
						</view>
					</view>

					<view class="cell">
						<view class="num">
							{{homeData.yearAmount}}
						</view>
						<view class="label">
							年度合同金额(万元)
						</view>
					</view>

					<view class="cell">
						<view class="num">
							{{homeData.receivableAmount}}
						</view>
						<view class="label">
							应收金额(万元)
						</view>
					</view>

					<view class="cell">
						<view class="num">
							{{homeData.payableAmount}}
						</view>
						<view class="label">
							应付金额(万元)
						</view>
					</view>
				</view>

				<view class="data-rank">
					<view class="tab-top">
						<view class="tab-item" v-for="(item,index) in tabList" :key="index">
							<view :class="{active: activeIndex == item.index}" @click="handleTabChange(item)">
								{{item.name}}
							</view>
						</view>
					</view>


					<!-- <uni-table class="table" ref="table" emptyText="暂无更多数据">
						<uni-tr class="table-title">
							<uni-th align="center" width="100">产品编码</uni-th>
							<uni-th align="center">名称</uni-th>
							<uni-th align="center" width="100">销量</uni-th>
						</uni-tr>
						<uni-tr v-for="(item, index) in tableData" :key="index">
							<uni-td>{{index+1}}.{{item.productCode}}</uni-td>
							<uni-td>{{item.productName}}</uni-td>
							<uni-td align="center">{{item.totalSaleCount}}</uni-td>
						</uni-tr>
					</uni-table> -->

					<view class="table-title" style="text-align: center;">
						<view class="code">产品编码</view>
						<view class="name">名称</view>
						<view class="total">销量</view>
					</view>
					<view class="table-content" v-for="(item,index) in tableData">
						<view class="code">
							<view class="index">{{index+1}}.</view>
							<view class="value">{{item.productCode}}</view>

						</view>
						<view class="name">{{item.productName}}</view>
						<view class="total">{{item.totalSaleCount}}</view>
					</view>



				</view>

				<view class="data-bottom">
					<view class="cell">
						<view class="num">
							{{this.homeData.yearProduceAmount}}
						</view>
						<view class="label">
							年度生产总量
						</view>
					</view>

					<view class="cell">
						<view class="num">
							{{this.homeData.monthProduceAmount}}
						</view>
						<view class="label">
							月生产总量
						</view>
					</view>

					<view class="cell">
						<view class="num">
							{{homeData.pendingAmount}}
						</view>
						<view class="label">
							待生产总量
						</view>
					</view>

				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import navigation from './components/navigation.vue'
	import equipment from './pages/equipment/equipment.vue'
	import Mocha from './pages/Mocha/Mocha.vue'
	import mould from './pages/mould/mould.vue'
	import sparePart from './pages/sparePart/sparePart.vue'
	import ScanCode from '@/components/ScanCode.vue'
	import homeNew from './homeNew.vue'
	import {
		getUnreadNotifyMessageCountAPI
	} from '@/api/wt/index.js'

	import {
		getDateNew,
		yuanToWan
	} from '@/utils/utils.js'
	import {
		postJ,
		post,
		get
	} from '@/utils/api'
	import {
		statistics
	} from '@/api/myTicket'
	import {
		getCount,
		getYearAmount,
		getPayableAmount,
		getReceivableAmount,
		getGoodsPage,
		getProduceAmount,
		// getPendingAmount,
		getHotProduct
	}
	from '@/api/home'
	export default {
		components: {
			navigation,
			equipment,
			Mocha,
			mould,
			sparePart,
			ScanCode,
			homeNew
		},
		onShow() {



			this.init()
			// tab 切换回来时刷新 manage 图表数据
			this.$refs.homeNewRef?.refreshManage()
			let _this = this
			uni.$off('scancodedate') // 每次进来先 移除全局自定义事件监听器
			uni.$on('scancodedate', function(data) {
				console.log(data, '-----scancodedate')
				_this.cbScancodedate(data)
			})
			// this.getStatistics()
			// this.Scancodedate()
		},
		onLoad() {
			this.getHomeData()
			// this.initPush()
			// this.getStatistics()
		},
		onUnload() {
			uni.$off('scancodedate')
		},
		onHide() {
			uni.$off('scancodedate')
		},
		data() {
			return {
				roleId: null,
				timer: null,
				qrContent: null,
				barType: null,
				cid:'',
				// 扫码后的设备信息
				equipmentInfo: '',
				qrContent: '',
				barType: '',
				messageCount: 0,
				workOrder: {
					maintenanceNum: 0,
					patrolInspection: 0,
					quantityNum: 0,
					repairsNum: 0,
					total: 0
				}, // 工单统计数据
				activeIndex: 0,
				tabList: [{
					name: '热销品排行榜',
					index: 0,
				}, {
					name: '滞销品排行榜',
					index: 1,
				}],
				tableData: [],
				homeData: {
					totalFinishedProducts: '',
					totalRawMaterials: '',
					goodsCount: '',
					yearAmount: '',
					receivableAmount: '',
					payableAmount: '',
					yearProduceAmount: '',
					monthProduceAmount: '',
					pendingAmount: ''
				},
				hotProductList: [],

			}
		},
		created() {
			this.getCount()
			uni.getStorage({
				key: 'userInfo',
				success: res => {
					// console.log(res);
					this.roleId = res.data.roleId[0]
				}
			})
		},
		onHide() {
			clearTimeout(this.timer);
		},
		onUnload() {
			clearTimeout(this.timer);
		},


		methods: {
			handleMessage() {
				uni.navigateTo({
					url: '/pages/home/wt/message/message'
				})
			},
			async getCount() {
				// const res = await getTodoList({}, false)
				// this.workList[0].badge = res.count
				const messageCount = await getUnreadNotifyMessageCountAPI()
				this.messageCount = Number(messageCount)
			},
			init() {
				this.getStatistics()
				// this.$refs.navigationRef && this.$refs.navigationRef.getCount()
				this.$refs.equipmentRef && this.$refs.equipmentRef.getData()
				this.$refs.mochaRef && this.$refs.mochaRef.getData()
				this.$refs.mouldRef &&
					(this.$refs.mouldRef.getBoatInventoryCountList(),
						this.$refs.mouldRef.getModeInventoryCountList())
				this.$refs.sparePartRef && this.$refs.sparePartRef.getData()
				this.timer = setTimeout(() => {
					this.init()
				}, 12000)
			},
			// 获取工单统计数
			getStatistics() {
				statistics().then(res => {
					this.workOrder = res
				})
			},

			// 相机扫码
			HandlScanCode() {
				uni.scanCode({
					success: (res) => {
						const scanResult = res.result;
						if(scanResult && scanResult.includes("/pages/warehouse/hwQrcode/index")) {
							uni.navigateTo({
								url: `${scanResult}`,
							});
							return
						}
						this.Scancodedate(res.result)
					}
				})
				//_this.Scancodedate('res')
			},
			// 根据条码请求设备数据
			getData() {
				let par = {
					barType: this.barType,
					qrContent: this.qrContent
				}
				this.equipmentInfo = {}
				return postJ(this.apiUrl + '/scan/getAssetInfo', par)
					.then(res => {
						console.log(res.data)
						this.equipmentInfo = res.data
					})
					.catch(err => {
						console.log(err, 'err-----------------')
						uni.showToast({
							title: '系统错误！',
							icon: 'none',
							duration: 2000
						})
					})
			},
			// 扫码枪扫码
			cbScancodedate(data) {
				this.Scancodedate(data.code)
			},
			async Scancodedate(code) {
				this.qrContent = code.trim()
				// this.qrContent = 'w01000002100001@_@0' //code.trim()
				//this.qrContent = '005/w01000001120041/锤锤专用02-不拆包-批量/规格01//成型/成型工序@_@0'
				this.barType = this.setBarType(this.qrContent)
				await this.getData()

				if (this.equipmentInfo.assetCode) {
					if (this.equipmentInfo.assetType != 1) {
						uni.showToast({
							title: '请扫描生产设备码！',
							icon: 'none',
							duration: 2000
						})

						return
					}
					let par = {
						info: encodeURIComponent(JSON.stringify(this.equipmentInfo)),
						qrContent: this.qrContent
					}
					par = this.URLSearchParams(par)
					console.log('qrwewett')
					uni.navigateTo({
						url: '/pages/equipment_ledger/index?' + par
					})
				}
			},
			// 设置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
			},
			// 切换排行版tab
			handleTabChange(item) {
				this.activeIndex = item.index
				this.tableData
				// console.log(item);
			},
			async getHomeData() {
				uni.showLoading({
					title: '加载中'
				})

				const res1 = await getCount()
				const res2 = await getGoodsPage()
				const res3 = await getYearAmount()
				const res4 = await getReceivableAmount()
				const res5 = await getPayableAmount()
				// 年度
				const res6 = await getProduceAmount({
					createTimeStart: getDateNew('year') + '-01',
					createTimeEnd: getDateNew('year') + '-12',
					factoryId: null
				})
				// 本月
				const res7 = await getProduceAmount({
					createTimeStart:  getDateNew('month'),
					createTimeEnd:  getDateNew('month'),
					factoryId: null
				})


				const res9 = await getHotProduct()


				this.homeData.totalFinishedProducts = res1?.totalFinishedProducts ?? 0
				this.homeData.totalRawMaterials = res1?.totalRawMaterials ?? 0
				this.homeData.goodsCount = res2?.count ?? 0
				this.homeData.yearAmount = yuanToWan(res3 ?? 0)
				this.homeData.receivableAmount = yuanToWan(res4 ?? 0)
				this.homeData.payableAmount = yuanToWan(res5 ?? 0)
				this.homeData.yearProduceAmount = res6?.reduce((pre, cur) => {
					return pre + cur?.formedNum
				}, 0) ?? 0

				this.homeData.monthProduceAmount = res7?.reduce((pre, cur) => {
					return pre + cur?.formedNum
				}, 0) ?? 0
				this.homeData.pendingAmount = res6?.reduce((pre, cur) => {
					return pre + cur?.pendingProductionCount
				}, 0) ?? 0
				this.hotProductList = res9
				this.tableData = this.hotProductList.slice(0, 4)
				uni.hideLoading()

			},
			/**
			 * 初始化推送功能（仅App端执行）
			 */
			initPush() {
				// 1. 申请Android通知权限（Android 13+ 需要动态申请POST_NOTIFICATIONS）
				this.requestNotificationPermission()
			
				// 2. 获取设备推送标识（cid），用于服务端定向推送
				this.getPushClientId()
			
				// 3. 监听推送消息的到达和点击事件
				this.setupPushListeners()
			},
			
			/**
			 * 申请Android通知权限
			 * 参考文档：https://uniapp.dcloud.net.cn/tutorial/app-push-unipush.html
			 */
			requestNotificationPermission() {
				// #ifdef APP-PLUS
				if (plus.os.name === 'Android') {
					// Android 13（API 33）及以上需要申请 POST_NOTIFICATIONS 权限
					plus.android.requestPermissions(
						['android.permission.POST_NOTIFICATIONS'],
						function(e) {
							console.log('通知权限申请结果:', e)
						},
						function(e) {
							console.error('通知权限申请失败:', e)
						}
					)
				}
			
				// 检测当前通知授权状态，若被拒绝则引导用户去设置页面开启
				const notificationAuthorized = uni.getAppAuthorizeSetting().notificationAuthorized
				if (notificationAuthorized === 'denied') {
					uni.showModal({
						title: '提示',
						content: '请开启通知权限，以便接收重要消息提醒',
						success: (res) => {
							if (res.confirm) {
								// 跳转到应用设置页面
								uni.openAppAuthorizeSetting()
							}
						}
					})
				}
				// #endif
			},
			
			/**
			 * 获取设备推送标识（cid/clientid）
			 * 该标识用于服务端向指定设备推送消息，需要在服务端存储并与用户账号关联
			 * 参考：https://uniapp.dcloud.net.cn/tutorial/app-push-unipush.html
			 */
			getPushClientId() {
				uni.getPushClientId({
					success: (res) => {
						console.log('获取cid成功:', res.cid)
						// TODO: 将 cid 发送到你的后端服务器，与当前登录用户关联
						this.sendCidToServer(res.cid)
					},
					fail: (err) => {
						console.error('获取cid失败:', err)
						// 获取失败时，延迟重试
						setTimeout(() => {
							this.getPushClientId()
						}, 2000)
					}
				})
			},
			
			/**
			 * 将设备cid发送到后端服务器
			 * @param {string} cid 设备推送标识
			 */
			sendCidToServer(cid) {
				// 示例：使用 uni.request 发送到你的后端接口
				// uni.request({
				// 	url: 'https://your-server.com/api/push/register',
				// 	method: 'POST',
				// 	data: { cid: cid },
				// 	success: (res) => {
				// 		console.log('cid上报成功')
				// 	}
				// })
				this.cid=cid
				console.log('TODO: 将cid发送到后端，cid:', cid)
			},
			
			/**
			 * 监听推送消息（接收和点击事件）
			 * 参考：https://uniapp.dcloud.net.cn/tutorial/app-push-unipush.html
			 */
			setupPushListeners() {
				// 监听透传消息（应用在前台或后台接收，自定义处理）
				uni.onPushMessage((res) => {
					console.log('收到推送消息:', JSON.stringify(res))
			
					// 消息类型：click 表示用户点击通知栏消息，receive 表示收到消息（未点击）
					if (res.type === 'receive') {
						// 收到消息，根据业务需求处理
						this.handlePushReceive(res.data)
					} else if (res.type === 'click') {
						// 用户点击通知栏消息
						this.handlePushClick(res.data)
					}
				})
			},
			
			/**
			 * 处理收到推送消息（未点击）
			 * @param {object} payload 推送携带的自定义数据
			 */
			handlePushReceive(payload) {
				console.log('收到推送数据:', payload)
			
				// 示例：根据业务类型处理
				// if (payload.type === 'chat') {
				// 	// 聊天消息：更新聊天记录
				// 	this.updateChatList(payload)
				// } else if (payload.type === 'order') {
				// 	// 订单消息：更新订单状态
				// 	this.refreshOrderStatus(payload)
				// }
			
				// 如果需要在应用内弹框提示，可自行实现
				uni.showToast({
					title: payload?.title || '收到新消息',
					icon: 'none',
					duration: 2000
				})
			},
			
			/**
			 * 处理用户点击通知栏消息
			 * @param {object} payload 推送携带的自定义数据
			 */
			handlePushClick(payload) {
				console.log('点击推送消息:', payload)
			
				// 根据 payload 中的数据跳转到指定页面
				// 例如：payload = { page: '/pages/message/detail', id: '123' }
				if (payload?.page) {
					uni.navigateTo({
						url: payload.page + (payload.id ? '?id=' + payload.id : ''),
						fail: (err) => {
							console.error('跳转失败:', err)
							// 跳转失败则跳转到首页
							uni.switchTab({
								url: '/pages/index/index'
							})
						}
					})
				} else if (payload?.url) {
					// 支持外部链接跳转
					uni.navigateTo({
						url: '/pages/webview/index?url=' + encodeURIComponent(payload.url)
					})
				} else {
					// 默认跳转到消息中心页面
					uni.navigateTo({
						url: '/pages/message/index'
					})
				}
			}
		}
	}
</script>

<style>
	page {
		background-color: #f0f0f0;
	}
</style>

<style lang="scss" scoped>
	// /deep/.uni-page-wrapper{
	// 	background-color: pink;
	// }

	/deep/.uni-table {
		min-width: auto !important;
		border-radius: 0;
	}

	page {
		background-color: #f0f0f0;
	}

	.container {
		background-color: $page-bg;
		padding: 20rpx;

		.data-middle {
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;

			.cell {
				display: flex;
				width: 30%;
				padding: 20rpx 0;
				margin-bottom: 20rpx;
				flex-direction: column;
				background-color: rgb(22, 146, 50);
				justify-content: center;
				align-items: center;
				border-radius: 10rpx;
				color: #fff;

				.num {
					font-size: 28rpx;
				}

				.label {
					font-size: 20rpx;
				}
			}

		}

		.data-rank {
			width: 100%;
			padding: 10rpx 20rpx 0 20rpx;
			margin-bottom: 20rpx;
			background-color: #fff;
			border-radius: 20rpx 20rpx 0 0rpx;

			.tab-top {
				display: flex;
				margin-bottom: 20rpx;

				.tab-item {
					margin-right: 20rpx;

					.active {
						border-bottom: 2px solid rgb(22, 146, 50);
					}
				}
			}


			.table-title {
				width: 100%;
				display: flex;
				color: #333;
				flex-wrap: nowrap;
				justify-content: space-between;

				.code {
					width: 40%;
					word-break: normal
				}

				.name {
					width: 40%;
					word-break: normal
				}

				.total {
					width: 15%;
					word-break: normal
				}

			}

			.table-content {
				font-size: 28rpx;
				display: flex;
				padding: 10rpx 0;
				width: 100%;
				color: #333;
				flex-wrap: nowrap;
				justify-content: space-between;
				border-bottom: 1px solid #eee;


				.code {
					display: flex;
					width: 40%;

					.index {
						width: 20rpx;
						margin-right: 20rpx;
					}

					.value {
						word-break: break-all;
						flex: 1;
					}
				}

				.name {
					width: 40%;
					white-space: nowarp;
					over-flow: hidden;
					text-overflow: ellipsip;
					word-break: break-all;
				}

				.total {
					text-align: center;
					width: 15%;
					white-space: nowarp;
					over-flow: hidden;
					text-overflow: ellipsip;
					word-break: break-all;
				}
			}

		}

		.data-rank .table-content:last-child {
			border-bottom: none;
		}

		.data-bottom {
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;

			.cell {
				display: flex;
				width: 30%;
				padding: 20rpx 0;
				margin-bottom: 20rpx;
				flex-direction: column;
				background-color: #fff;
				justify-content: center;
				align-items: center;
				border-radius: 10rpx;
				color: #000;

				.num {
					font-size: 28rpx;
				}

				.label {

					font-size: 20rpx;
				}
			}
		}

	}
</style>