FT501-WMS/RuoYi-App-master/pages/index.vue

<template>
  <view class="container">
    <!-- 顶部信息卡片 -->
    <view class="info-card">
      <text class="welcome">{{ $t('home.greeting') }}{{ userName }}</text>
      <text class="date">{{ $t('home.today') }}{{ currentDate }}</text>
      
      <view class="stats-row">
       <!-- <view class="stat-item">
          <text class="stat-label">{{ $t('home.taskCompletionRate') }}</text>
          <text class="stat-value">98%</text>
        </view> -->
        <view class="stat-item" >
          <text class="stat-label">{{ $t('home.pendingTasks') }}</text>
          <text class="stat-value">{{ pendingTaskCount }}</text>
        </view>
      </view>
    </view>

    <!-- 今日数据统计 -->
   <!-- <view class="data-stats">
      <view class="stat-card">
        <view class="stat-header">今日入库</view>
        <view class="stat-content">
          <text class="number">128</text>
          <text class="trend up">↑ 12% 较昨日</text>
        </view>
      </view>
      <view class="stat-card">
        <view class="stat-header">今日出库</view>
        <view class="stat-content">
          <text class="number">96</text>
          <text class="trend down">↓ 5% 较昨日</text>
        </view>
      </view>
    </view> -->

    <!-- 功能模块入口 -->
    <view class="function-grid">
      <view class="function-item" @click="navigateTo('/pages/in/menu')">
        <view class="icon-box blue">
          <image src="/static/images/tabbar/caigouruku.png" mode="aspectFit" class="icon-image"></image>
        </view>
        <view class="function-text">
          <text class="title">{{ $t('home.inbound.title') }}</text>
          <text class="desc">{{ $t('home.inbound.desc') }}</text>
        </view>
      </view>
      <view class="function-item" @click="navigateTo('/pages/out/menu')">
        <view class="icon-box green">
          <image src="/static/images/tabbar/chukudan.png" mode="aspectFit" class="icon-image"></image>
        </view>
        <view class="function-text">
          <text class="title">{{ $t('home.outbound.title') }}</text>
          <text class="desc">{{ $t('home.outbound.desc') }}</text>
        </view>
      </view>
      <view class="function-item" @click="navigateTo('/pages/charts/spaceAnalysis')">
        <view class="icon-box orange">
          <image src="/static/images/tabbar/warehouse.png" mode="aspectFit" class="icon-image"></image>
        </view>
        <view class="function-text">
          <text class="title">{{ $t('home.inventory.title') }}</text>
          <text class="desc">{{ $t('home.inventory.desc') }}</text>
        </view>
      </view>
      <view class="function-item" @click="navigateTo('/pages/pandian/menu')">
        <view class="icon-box purple">
          <image src="/static/images/tabbar/pandian.png" mode="aspectFit" class="icon-image"></image>
        </view>
        <view class="function-text">
          <text class="title">{{ $t('home.stocktaking.title') }}</text>
          <text class="desc">{{ $t('home.stocktaking.desc') }}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { getPrepareTask } from '@/api/search/job'

export default {
  data() {
    return {
      userName: '',
      pendingTaskCount: 0
    }
  },
  computed: {
    currentDate() {
      const date = new Date();
      const year = date.getFullYear();
      const month = date.getMonth() + 1;
      const day = date.getDate();
      const weekDayIndex = date.getDay();
      
      if (this.$i18n.locale === 'en-US') {
        const weekDays = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
        return `${year}-${month}-${day} ${weekDays[weekDayIndex]}`;
      } else {
        const weekDays = ['日', '一', '二', '三', '四', '五', '六'];
        return `${year}年${month}月${day}日 星期${weekDays[weekDayIndex]}`;
      }
    }
  },
 
  created() {
    // 确保用户信息已加载
    this.userName = this.$store.getters.name
    // 获取待处理任务数量
    this.getPendingTaskCount()
  },
  onShow() {
    // 根据当前语言动态设置标题
    const currentLanguage = this.$i18n.locale;
    const title = this.$t('tabBar.workbench');
    uni.setNavigationBarTitle({
      title: title
    });
  },
  methods: {
    navigateTo(url) {
      uni.navigateTo({
        url: url
      })
    },
     async getPendingTaskCount() {
      // 调用API获取待处理任务数量

        const response=await getPrepareTask({inOut:''})
        if(response.code=== 200){
            this.pendingTaskCount=response.data.length
        }else{
            this.pendingTaskCount=0
        }

    }
  }
}
</script>

<style lang="scss">
.container {
  padding: 20px;
  background-color: #f5f7fa;

  .info-card {
    background: linear-gradient(135deg, #4285f4, #34a853);
    border-radius: 16px;
    padding: 20px;
    color: #fff;
    margin-bottom: 20px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    animation: fadeInDown 0.8s ease;

    .welcome {
      font-size: 24px;
      font-weight: 600;
      display: block;
      margin-bottom: 8px;
    }

    .date {
      font-size: 14px;
      opacity: 0.9;
      display: block;
      margin-bottom: 20px;
    }

    .stats-row {
      display: flex;
      justify-content: space-between;
      margin-top: 10px;

      .stat-item {
        text-align: center;
        flex: 1;
        padding: 0 10px;
        border-right: 1px solid rgba(255, 255, 255, 0.2);

        &:last-child {
          border-right: none;
        }

        .stat-label {
          font-size: 14px;
          opacity: 0.9;
          display: block;
          margin-bottom: 5px;
        }

        .stat-value {
          font-size: 24px;
          font-weight: 600;
          display: block;
        }
      }
    }
  }
}

  @keyframes fadeInDown {
    from {
      opacity: 0;
      transform: translateY(-20px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

.container {
  // padding: 20rpx;
  // background-color: #f5f6fa;
  // min-height: 100vh;
  width: 100%;
  height: 100%;
}

.info-card {
  background: linear-gradient(135deg, #1890ff, #096dd9);
  color: #fff;
  padding: 30rpx;
  border-radius: 16rpx;
  margin-bottom: 20rpx;
}

.welcome {
  font-size: 40rpx;
  font-weight: bold;
  display: block;
  margin-bottom: 10rpx;
}

.date {
  font-size: 28rpx;
  opacity: 0.9;
  display: block;
  margin-bottom: 30rpx;
}

.stats-row {
  display: flex;
  justify-content: space-between;
  margin-top: 20rpx;
}

.stat-item {
  text-align: center;
}

.stat-label {
  font-size: 24rpx;
  opacity: 0.9;
  display: block;
}

.stat-value {
  font-size: 36rpx;
  font-weight: bold;
  margin-top: 10rpx;
  display: block;
}

.data-stats {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20rpx;
}

.stat-card {
  background: #fff;
  padding: 20rpx;
  border-radius: 12rpx;
  flex: 1;
  margin: 0 10rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.stat-header {
  font-size: 28rpx;
  color: #666;
  margin-bottom: 10rpx;
}

.stat-content {
  .number {
    font-size: 40rpx;
    font-weight: bold;
    color: #333;
    display: block;
  }
  
  .trend {
    font-size: 24rpx;
    &.up {
      color: #52c41a;
    }
    &.down {
      color: #ff4d4f;
    }
  }
}

.function-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20rpx;
}

.function-item {
  background: #fff;
  padding: 20rpx;
  border-radius: 12rpx;
  display: flex;
  align-items: center;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.icon-box {
  width: 80rpx;
  height: 80rpx;
  border-radius: 16rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 20rpx;
  
  &.blue { background: #e6f7ff; }
  &.green { background: #f6ffed; }
  &.orange { background: #fff7e6; }
  &.purple { background: #f9f0ff; }
  
  .icon-image {
    width: 40rpx;
    height: 40rpx;
  }
  
  .iconfont {
    font-size: 40rpx;
    &.icon-in { color: #1890ff; }
    &.icon-out { color: #52c41a; }
    &.icon-stock { color: #fa8c16; }
    &.icon-check { color: #722ed1; }
  }
}

.function-text {
  flex: 1;
  
  .title {
    font-size: 28rpx;
    color: #333;
    font-weight: bold;
    display: block;
  }
  
  .desc {
    font-size: 24rpx;
    color: #999;
    margin-top: 6rpx;
    display: block;
  }
}
</style>