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">{{ userName.charAt(0) }}</text></view
      >
      <view class="user-info uni-column">
        <view class="nickname uni-row"
          ><text class="label">{{ userName }}</text
          ><text class="label" style="margin-left: 12rpx">ID</text><text class="label" style="margin-left: 8rpx">{{ 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">绑定设备</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'

onLoad((options) => {
  userName.value = options.userName
  userId.value = options.userId
  getDepartmentName()
})
const deptName = ref('')
const name = ref('')
const userName = ref('')
const userId = ref(null)
const handleToRecerptSfprod = () => {
  uni.navigateTo({
    url: '/pages/recerptSfprod/index'
  })
}
const handleToProductionPlan = () => {
  uni.navigateTo({
    url: '/pages/productionPlan/index'
  })
  // getSubPlanDetailsList().then((res) => {
  //   console.log(res)
  // })
} 
const handleToHandlingList = () => {
  uni.navigateTo({
    url: '/pages/handlingList/index'
  })
}
const handleSwitchOrQuit = () => {
  uni.navigateTo({
    url: '/pages/index/index'
  })
}
function getDepartmentName() {
  getDeptName(userId.value).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>