bonus-material-app/src/pages/materialsStation/index/index.vue

<template>
  <view class="page-bg" :style="{ height: `calc(100vh - ${statusBarHeight})` }">
    <view class="upper-user">
      <view class="user-rig">
        <view>你好！</view>
        <view>欢迎使用智慧材料站管理系统</view>
      </view>
    </view>
    <view class="sliders">
      <view>
        <h2>{{ todayDatas.normalNum || 0 }}</h2>
        <span>检修期内</span>
      </view>
      <view>
        <h2>{{ todayDatas.threeMonthNum || 0 }}</h2>
        <span>临近检期3个月</span>
      </view>
      <view>
        <h2>{{ todayDatas.oneMonthNum || 0 }}</h2>
        <span>临近检期1个月</span>
      </view>
    </view>
    <view class="sections">
      <div
        class="item"
        v-for="(item, index) in isUsingList"
        :key="index"
        @click="jumpUrl(item.path)"
      >
        <image class="item-icon" :src="`../../../static/home/${item.src}.png`" mode="" />
      </div>
    </view>
  </view>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { onShow } from '@dcloudio/uni-app'
import {
  getProjectInfoApi,
  getUserInfoByUserNameApi,
  getUserInfoByIdCardApi,
  updateTeamProjectApi,
  getToolsLedgerDetailsListApi,
  getBmTeamList,
} from '@/services/materialsStation'
import { useMemberStore } from '@/stores'
const memberStore = useMemberStore()
const userInfo = ref({})
const isTeamLeader = ref(false)

const todayDatas = reactive({
  normalNum: '', // 正常
  threeMonthNum: '', // 三个月
  oneMonthNum: '', // 一个月
})
const isUsingList = ref([
  { path: 'toolsLease', src: 'lease', isShow: true },
  { path: 'toolsOut', src: 'outStore', isShow: true },
  { path: 'toolsBack', src: 'back', isShow: true },
  { path: 'toolsLedger', src: 'ledger', isShow: true },
  { path: 'teamLeaseRecord', src: 'teamLease', isShow: true },
  { path: 'teamBackRecord', src: 'teamBack', isShow: true },
  { path: 'teamStore', src: 'teamStore', isShow: true },
  { path: 'teamWarning', src: 'teamWarning', isShow: true },
])

let statusBarHeight = ref('50px')
// #ifdef MP-WEIXIN
statusBarHeight.value = uni.getWindowInfo().statusBarHeight + 'px'
// #endif
// #ifndef MP-WEIXIN
statusBarHeight.value = uni.getSystemInfoSync().statusBarHeight + 'px'
// #endif

function jumpUrl(path) {
  if (isTeamLeader.value && (path == 'toolsOut' || path == 'toolsBack' || path == 'toolsLedger')) {
    // 提示无权限
    uni.showToast({
      title: '当前账号权限不足, 请联系材料站长',
      icon: 'none',
    })
    return
  }
  if (path == 'toolsOut') {
    const params = {
      isOut: true,
      isNew: 0,
    }
    uni.navigateTo({
      url: '/pages/materialsStation/toolsLease/toolsLease?params=' + JSON.stringify(params),
    })
  } else if (path == 'teamStore') {
    const params = {
      isTeam: true,
    }
    uni.navigateTo({
      url: '/pages/materialsStation/toolsLedger/toolsLedger?params=' + JSON.stringify(params),
    })
  } else {
    uni.navigateTo({
      url: `/pages/materialsStation/${path}/${path}`,
    })
  }
}

const idCard = ref('')
const projectIds = ref([])
const getUserInfoByIdCard = async () => {
  const params = {
    idCard: idCard.value,
    projectIds: projectIds.value,
  }
  try {
    const res = await getUserInfoByIdCardApi(params)
    console.log('🚀 ~ getUserInfoByIdCard ~ res:', res)
    if (res.code === 200 && res.data && res.data.length > 0) {
      const params = {
        teamList: res.data,
      }
      const res2 = await updateTeamProjectApi(params)
      console.log('🚀 ~ getUserInfoByIdCard ~ res2:', res2)
    }
  } catch (error) {
    console.log('🚀 ~ getUserInfoByIdCard ~ error:', error)
  }
}

const getUserInfoByUserName = async () => {
  try {
    const userName = userInfo.value.userName
    console.log('🚀 ~ getUserInfoByUserName ~ userName:', userName)
    const res = await getUserInfoByUserNameApi({ userName })
    idCard.value = res?.data?.idCard
    console.log('🚀 ~ getUserInfoByUserName ~ idCard.value:', idCard.value)
    uni.setStorageSync('idCard', idCard.value)
  } catch (error) {
    console.log('🚀 ~ getUserInfoByUserName ~ error:', error)
  }
}

const projectInfoList = async () => {
  try {
    const res = await getProjectInfoApi({ unitId: null, isApp: true })
    console.log('🚀 ~ projectInfoList ~ res:', res)
    if (res.data && res.data.length > 0) {
      projectIds.value = res.data.map((item) => item.proId)
    }
  } catch (error) {
    console.log('🚀 ~ projectInfoList ~ error:', error)
  }
}

// 预警统计
const getToolsLedgerDetailsList = async () => {
  try {
    const res = await getToolsLedgerDetailsListApi()
    todayDatas.normalNum = res.data.normalNum
    todayDatas.threeMonthNum = res.data.threeMonthNum
    todayDatas.oneMonthNum = res.data.oneMonthNum
  } catch (error) {
    console.log('🚀 ~ getToolsLedgerDetailsList ~ error:', error)
  }
}

// 获取班组
const getTeamList = async () => {
  try {
    const res = await getBmTeamList({ isAll: 0 })
    console.log('🚀 ~ getTeamList ~ res:', res)
    if (res.data.length > 0) {
      // 循环 res.data 如果其中有teamLeaderIdCard 与 userInfo.value.userName 一致，则设置 isTeamLeader 为 true
      isTeamLeader.value = res.data.some((item) => item.teamLeaderIdCard == userInfo.value.userName)
      console.log('🚀 ~ getTeamList ~ isTeamLeader.value:', isTeamLeader.value)
    }
  } catch (error) {
    console.log('🚀 ~ getTeamList ~ error:', error)
  }
}

// 页面显示时获取数据
onShow(async () => {
  userInfo.value = memberStore.userInfo || {}
  // console.log('🚀 ~ onShow ~ userInfo.value:', userInfo.value)
  getToolsLedgerDetailsList()
  await Promise.all([getUserInfoByUserName(), projectInfoList()])
  getUserInfoByIdCard()
  getTeamList()
})
</script>

<style lang="scss" scoped>
.page-bg {
  background: url('../../../static/bgd.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;
  /* min-height: 100vh; */
}
.upper-user {
  width: 85%;
  /* margin: 8vh auto; */
  margin-bottom: 0;
  box-sizing: border-box;
  padding: 15rpx;
  display: flex;
  // 针对平板（如宽度大于等于768px）设置不同的 padding-top
  @media (min-width: 768px) {
    padding-top: 150rpx;
  }
  // 针对手机（如宽度小于768px）设置不同的 padding-top
  @media (max-width: 767px) {
    padding-top: 100rpx;
  }
  .user-lef {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    overflow: hidden;
    image {
      width: 100%;
      height: 100%;
    }
  }
  .user-rig {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    box-sizing: border-box;
    padding-left: 20rpx;
    view {
      width: 100%;
      color: #fff;
    }
    view:first-child {
      font-size: 20px;
      @media (min-width: 768px) {
        font-size: 24px;
      }
    }
    view:last-child {
      font-size: 14px;
      letter-spacing: 6rpx;
      @media (min-width: 768px) {
        font-size: 20px;
      }
    }
  }
}
.sliders {
  width: 85%;
  margin: 4vh auto;
  margin-bottom: 2vh;
  border-radius: 15rpx 15rpx 0 0;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(2px);
  border: 1px solid #b3d3ff;
  padding: 1.3vh 0;
  display: flex;
  view {
    width: 33.3%;
    height: 50px;
    border-right: 1px solid #cde2ff;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    color: #fff;
    h2 {
      font-size: 22px;
    }
    span {
      font-size: 12px;
    }
  }
  view:last-child {
    border-right: none;
  }
}
.sections {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  box-sizing: border-box;
  padding-top: 6%;
  .item {
    width: 25%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
    .item-icon {
      width: 68px;
      height: 68px;
      @media (min-width: 768px) {
        width: 120px;
        height: 120px;
      }
    }
  }
}
.wait-do {
  width: 90%;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  view {
    width: 48%;
    height: 13vh;
    margin-bottom: 15rpx;
    border-radius: 15rpx;
    box-sizing: border-box;
    padding: 25rpx;
    h4 {
      margin-bottom: 5rpx;
      font-size: 22px;
    }
    h5 {
      font-weight: normal;
      font-size: 14px;
    }
  }
  .llsp {
    background: url('../../static/llsp.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
  }
  .tlsp {
    background: url('../../static/tlsp.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
  }
  .bfsh {
    background: url('../../static/bfsh.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
  }
  .sysh {
    background: url('../../static/sysh.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
  }
}
.single-notice {
  width: 100%;
  margin: 0 auto;
  border-bottom: 1px solid #dee3ea;
  box-sizing: border-box;
  padding: 20rpx 5%;
  display: flex;
  background-color: #fff;
  .notice-lef {
    width: 12%;
    height: 5.5vh;
    border-radius: 50%;
    overflow: hidden;
    image {
      width: 100%;
      height: 100%;
    }
  }
  .notice-rig {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    box-sizing: border-box;
    padding-left: 20rpx;
    h4 {
      font-size: 14px;
    }
    h5 {
      font-size: 12px;
      color: #8f9298;
      font-weight: normal;
    }
  }
}
.popup {
  width: 80vw;
  height: 90vh;
  background-color: #fff;
  border-radius: 15rpx;
  overflow-y: auto;
  background: linear-gradient(#d9e7fe, #fff, #fff, #fff);
  .pop-top {
    width: 100%;
    height: 5vh;
    box-sizing: border-box;
    padding: 0 25rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .unread-notice {
    width: 85%;
    margin: 40rpx auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    .tit {
      font-size: 20px;
      font-weight: bold;
      margin-bottom: 20rpx;
    }
    .info {
      width: 100%;
      view {
        margin-bottom: 15rpx;
      }
      view:last-child {
        margin-bottom: 0;
      }
    }
    .read-one {
      width: 40%;
      margin: 40rpx auto;
      display: flex;
      align-items: center;
      justify-content: center;
      box-sizing: border-box;
      border-radius: 15rpx;
      padding: 10rpx 0;
      background-color: #3788ff;
      color: #fff;
    }
  }
}
</style>