ezhizao_dms_app/pages/dashboard/index.vue

<template>
	<view class="page-container uni-column">
		<view class="logo-container uni-row">
			<image class="logo" src="../../static/images/logo.png" />
		</view>
		<view class="title"><text class="label">德迈仕数字生产线管理平台</text></view>
		<view class="user-info-container uni-row">
			<view class="icon"><text class="label">{{ userInfo.nickName.charAt(0) }}</text></view>
			<view class="user-info uni-column">
				<view class="nickname uni-row"><text class="label">{{ userInfo.userName }}</text><text class="label"
						style="margin-left: 12rpx">ID</text><text class="label"
						style="margin-left: 8rpx">{{ userInfo.userId }}</text>
				</view>
				<view class="process uni-row"><text class="label">当前工段：</text><text class="label">{{ deptName }}</text>
				</view>
			</view>
		</view>
		<view class="business-btn uni-row" @click="handleToRecerptSfprod"><text class="label">半成品接收</text></view>
		<view class="business-btn uni-row" @click="handleToProductionPlan"><text class="label">报工</text></view>
		<view class="business-btn uni-row" @click="handleToHandlingList"><text class="label">周转</text></view>
		<view class="bottom-btn-container">
			<view class="start-batch-btn uni-row"><text class="label" @click="handleToEquiPmentList">绑定设备</text></view>
			<view class="start-batch-btn uni-row" @click="handleSwitchOrQuit"><text class="label">切换 / 退出账号</text>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'
	import {
		onLoad,
		onReady
	} from '@dcloudio/uni-app'
	import {
		getSubPlanDetailsList
	} from '../../api/business/subPlanDetails'
	import {
		getDeptName
	} from '@/api/login/index.js'
	import { store } from '@/store/index.js'


	const deptName = ref('')
	const name = ref('')
	const userName = ref('')
	const userId = ref(null)
	const userInfo = ref({})
	
	onLoad((options) => {
		userInfo.value = store.userInfo || {
			nickName: ""
		};
		console.log(userInfo.value)
		getDepartmentName()
	})
	
	const handleToRecerptSfprod = () => {
		uni.navigateTo({
			url: '/pages/recerptSfprod/index'
		})
	}
	const handleToProductionPlan = () => {
		uni.navigateTo({
			url: '/pages/productionPlan/index'
		})
	}
	const handleToHandlingList = () => {
		uni.navigateTo({
			url: '/pages/handlingList/index'
		})
	}
	const handleSwitchOrQuit = () => {
		uni.navigateTo({
			url: '/pages/index/index'
		})
	}

	function handleToEquiPmentList() {
		uni.navigateTo({
			url: "/pages/equipmentList/index"
		})
	}

	function getDepartmentName() {
		getDeptName(userInfo.value.userId).then((res) => {
			if (res.code == 200) {
				deptName.value = res.msg
			}
		})
	}
</script>

<style lang="scss">
	.logo-container {
		justify-content: center;

		.logo {
			width: 120rpx;
			height: 120rpx;
		}
	}

	.title {
		align-items: center;

		.label {
			font-size: 40rpx;
			font-weight: bold;
		}
	}

	.user-info-container {
		margin: 64rpx 0 40rpx 8rpx;

		.icon {
			width: 120rpx;
			height: 120rpx;
			justify-content: center;
			align-items: center;
			border-radius: 60rpx;
			border: 1px solid #e1e1e1;

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

		.user-info {
			margin-left: 8rpx;
			justify-content: center;

			// font-size: 20rpx;
			.nickname {
				margin-bottom: 16rpx;

				.label {
					font-weight: bold;
					font-size: 32rpx;
				}
			}

			.process {
				.label {
					font-size: 32rpx;
				}
			}
		}
	}

	.business-btn {
		margin: 0 20rpx 20rpx 20rpx;
		background-color: #fff;
		height: 200rpx;
		border-radius: 4;
		align-items: center;
		justify-content: center;
		border: 1px solid #e1e1e1;
		border-radius: 8rpx;

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

	.bottom-btn-container {
		position: fixed;
		right: 20rpx;
		bottom: 0;
		left: 20rpx;

		.start-batch-btn {
			background-color: grey;
			margin-bottom: 24rpx;
			border-radius: 8rpx;
			justify-content: center;
			align-items: center;
			height: 80rpx;

			.label {
				font-size: 32rpx;
				color: #ffffff;
			}
		}
	}
</style>