sfms3.0-ui/src/views/home/components/product.vue

<!-- 成品管理员首页 -->
<template>
  <div class="row">
    <div class="data">
      <div class="small-data-item small-data-item1">
        <div class="small-data-item-txt">
          <div>{{ t('home.today_arrival_plan_shipped') }}</div>
          <div>{{ productData?.deliverPlanTodayCount || 0 }}<span>{{t('home.single')}}</span></div>
        </div>
        <img src="../../../assets/imgs/icon1.png" alt="" class="img" />
      </div>
    </div>
    <div class="two-row mt-14px">
      <div class="data1 w-[47.3%]">
        <div class="title">{{ t('home.slack_stock_warning') }}</div>
        <el-table
          :data="productData?.stagnantBalanceList"
          style="width: 100%"
          stripe
          height="240px"
        >
          <el-table-column prop="itemCode" :label="t('home.material_code')" width="180px" />
          <el-table-column prop="batch" :label="t('home.batch')" width="180px" />
          <el-table-column prop="packingNumber" :label="t('home.package_number')" width="180px" />
          <el-table-column prop="containerNumber" :label="t('home.appliance_code')" width="180px" />
          <el-table-column prop="qty" :label="t('home.amount')" width="180px" />
          <el-table-column prop="uom" :label="t('home.measuring_unit')" width="180px">
            <template #default="scope">
              {{ formatter(scope.row.uom, DICT_TYPE.UOM) }}
            </template>
          </el-table-column>
          <el-table-column prop="locationCode" :label="t('home.location_code')" width="180px" />
          <el-table-column prop="warehouseCode" :label="t('home.warehouse_code')" width="180px" />
          <el-table-column prop="inventoryStatus" :label="t('home.inventory_state')" width="180px">
            <template #default="scope">
              {{ formatter(scope.row.inventoryStatus, DICT_TYPE.INVENTORY_STATUS) }}
            </template>
          </el-table-column>
          <el-table-column prop="locationGroupCode" :label="t('home.location_group_code')" width="180px" />
          <el-table-column prop="areaCode" :label="t('home.location_area_code')" width="180px" />
          <el-table-column prop="erpLocationCode" :label="t('home.erp_location_code')" width="180px" />
          <el-table-column prop="altBatch" :label="t('home.replace_batch')" width="180px" />
          <el-table-column prop="arriveDate" :label="t('home.arrival_date')" width="180px">
            <template #default="scope">
              <span>{{ formatDate(scope.row.planDate) }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="produceDate" :label="t('home.production_date')" width="180px">
            <template #default="scope">
              <span>{{ formatDate(scope.row.planDate) }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="expireDate" :label="t('home.expiry_date')" width="180px">
            <template #default="scope">
              <span>{{ formatDate(scope.row.planDate) }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="ownerCode" :label="t('home.shipper_code')" width="180px" />
          <el-table-column prop="lockedQty" :label="t('home.lock_quantity')" width="180px" />
          <el-table-column prop="usableQty" :label="t('home.available_quantity')" width="180px" />
          <el-table-column prop="singlePrice" :label="t('home.unit_price')" width="180px" />
          <el-table-column prop="amount" :label="t('home.money')" width="180px" />
          <el-table-column prop="putInTime" :label="t('home.warehouse_entry_time')" width="180px">
            <template #default="scope">
              <span>{{ formatDate(scope.row.planDate) }}</span>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="data1 w-[47.3%]">
        <div class="title">{{ t('home.overstock_warning') }}</div>
        <el-table
          :data="productData?.overdueBalanceList"
          style="width: 100%"
          stripe
          height="240px"
        >
          <el-table-column prop="itemCode" :label="t('home.material_code')" width="180px" />
          <el-table-column prop="batch" :label="t('home.batch')" width="180px" />
          <el-table-column prop="packingNumber" :label="t('home.package_number')" width="180px" />
          <el-table-column prop="containerNumber" :label="t('home.appliance_code')" width="180px" />
          <el-table-column prop="qty" :label="t('home.amount')" width="180px" />
          <el-table-column prop="uom" :label="'home.measuring_unit'" width="180px">
            <template #default="scope">
              {{ formatter(scope.row.uom, DICT_TYPE.UOM) }}
            </template>
          </el-table-column>
          <el-table-column prop="locationCode" :label="t('home.location_code')" width="180px" />
          <el-table-column prop="warehouseCode" :label="t('home.warehouse_code')" width="180px" />
          <el-table-column prop="inventoryStatus" :label="t('home.inventory_state')" width="180px">
            <template #default="scope">
              {{ formatter(scope.row.inventoryStatus, DICT_TYPE.INVENTORY_STATUS) }}
            </template>
          </el-table-column>
          <el-table-column prop="locationGroupCode" :label="t('home.location_group_code')" width="180px" />
          <el-table-column prop="areaCode" :label="t('home.location_area_code')" width="180px" />
          <el-table-column prop="erpLocationCode" :label="t('home.erp_location_code')" width="180px" />
          <el-table-column prop="altBatch" :label="t('home.replace_batch')" width="180px" />
          <el-table-column prop="arriveDate" :label="t('home.arrival_date')" width="180px">
            <template #default="scope">
              <span>{{ formatDate(scope.row.planDate) }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="produceDate" :label="t('home.production_date')" width="180px">
            <template #default="scope">
              <span>{{ formatDate(scope.row.planDate) }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="expireDate" :label="t('home.expiry_date')" width="180px">
            <template #default="scope">
              <span>{{ formatDate(scope.row.planDate) }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="ownerCode" :label="t('home.shipper_code')" width="180px" />
          <el-table-column prop="lockedQty" :label="t('home.lock_quantity')" width="180px" />
          <el-table-column prop="usableQty" :label="t('home.available_quantity')" width="180px" />
          <el-table-column prop="singlePrice" :label="t('home.unit_price')" width="180px" />
          <el-table-column prop="amount" :label="t('home.money')" width="180px" />
          <el-table-column prop="putInTime" :label="t('home.warehouse_entry_time')" width="180px">
            <template #default="scope">
              <span>{{ formatDate(scope.row.planDate) }}</span>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <div class="two-row mt-14px">
      <div class="data1 w-[47.3%]">
        <div class="title">{{ t('home.high_and_low_storage_warning') }}</div>
        <el-table
          :data="productData?.warningBalanceList"
          style="width: 100%"
          stripe
          height="240px"
        >
          <el-table-column prop="itemCode" :label="t('home.material_code')" width="180px" />
          <el-table-column prop="batch" :label="t('home.batch')" width="180px" />
          <el-table-column prop="packingNumber" :label="t('home.package_number')" width="180px" />
          <el-table-column prop="containerNumber" :label="t('home.appliance_code')" width="180px" />
          <el-table-column prop="qty" :label="t('home.amount')" width="180px" />
          <el-table-column prop="uom" :label="t('home.measuring_unit')" width="180px">
            <template #default="scope">
              {{ formatter(scope.row.uom, DICT_TYPE.UOM) }}
            </template>
          </el-table-column>
          <el-table-column prop="locationCode" :label="t('home.location_code')" width="180px" />
          <el-table-column prop="warehouseCode" :label="t('home.warehouse_code')" width="180px" />
          <el-table-column prop="inventoryStatus" label="库存状态" width="180px">
            <template #default="scope">
              {{ formatter(scope.row.inventoryStatus, DICT_TYPE.INVENTORY_STATUS) }}
            </template>
          </el-table-column>
          <el-table-column prop="locationGroupCode" :label="t('home.location_group_code')" width="180px" />
          <el-table-column prop="areaCode" :label="t('home.location_area_code')" width="180px" />
          <el-table-column prop="erpLocationCode" :label="t('home.erp_location_code')" width="180px" />
          <el-table-column prop="altBatch" label="替代批次" width="180px" />
          <el-table-column prop="arriveDate" :label="t('home.arrival_date')" width="180px">
            <template #default="scope">
              <span>{{ formatDate(scope.row.planDate) }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="produceDate" :label="t('home.production_date')" width="180px">
            <template #default="scope">
              <span>{{ formatDate(scope.row.planDate) }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="expireDate" :label="t('home.expiry_date')" width="180px">
            <template #default="scope">
              <span>{{ formatDate(scope.row.planDate) }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="ownerCode" :label="t('home.shipper_code')" width="180px" />
          <el-table-column prop="lockedQty" :label="t('home.lock_quantity')" width="180px" />
          <el-table-column prop="usableQty" :label="t('home.available_quantity')" width="180px" />
          <el-table-column prop="singlePrice" :label="t('home.unit_price')" width="180px" />
          <el-table-column prop="amount" :label="t('home.money')" width="180px" />
          <el-table-column prop="putInTime" :label="t('home.warehouse_entry_time')" width="180px">
            <template #default="scope">
              <span>{{ formatDate(scope.row.planDate) }}</span>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="data1 w-[47.3%]">
        <div class="title">{{ t('home.waiting_tasks') }}</div>
        <Echart :options="barOptions" :height="280" :key="lineIndex" />
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import * as IndexApi from '@/api/home'
import { formatDate } from '@/utils/formatTime'
import { DICT_TYPE, getStrDictOptions } from '@/utils/dict'
import { set } from 'lodash-es'
import { EChartsOption } from 'echarts'
import { barOptions } from '../echarts-data'
const { t } = useI18n()

const lineIndex = ref(0)
// 获取成品管理员首页首页数据
const productData = ref()
const getProductData = async () => {
  IndexApi.getProductData().then((res) => {
    productData.value = res
    getJobCharts()
  })
}
const formatter = (type, dict) => {
  let str = getStrDictOptions(dict).filter((item) => type == item.value)[0]?.label
  return str
}
const barOptionsData = reactive<EChartsOption>(barOptions) as EChartsOption
const getJobCharts = async () => {
  set(
    barOptionsData,
    'xAxis.data',
    Object.keys( productData.value.jobCount)
  )
  set(barOptionsData, 'legend.data', [t('home.waiting_tasks')])
  set(barOptionsData, 'series', [
    {
      name:t('home.waiting_tasks'),
      data: Object.values( productData.value.jobCount),
      type: 'bar',
      barMaxWidth:30
    }
  ])
  lineIndex.value++
}
onMounted(async () => {
  await getProductData()
})
</script>
<style scoped lang="scss">
.title {
  padding-bottom: 10px;
  border-bottom: 1px solid #dedede;
  position: relative;
  padding-left: 10px;
  &::after {
    content: '';
    position: absolute;
    width: 4px;
    height: 16px;
    background: #3c7adf;
    left: 0px;
    top: 3px;
    border-radius: 8px;
  }
}
.data {
  display: flex;
  align-items: center;
  justify-content: space-between;
  .small-data-item {
    width: 25%;
    height: 90px;
    display: flex;
    align-items: center;
    border-radius: 6px;
    color: white;
    padding: 0px 20px;
    .small-data-item-txt {
      flex: 1;
      div {
        &:nth-child(1) {
          font-size: 14px;
        }
        &:nth-child(2) {
          font-size: 26px;
          margin-top: 4px;
          font-weight: bold;
          span {
            font-size: 14px;
            padding-left: 6px;
            font-weight: normal;
          }
        }
      }
    }
    .img {
      width: 40px;
      opacity: 0.5;
    }
  }
  .small-data-item1 {
    background: linear-gradient(to left, #fd817d, #fcad80);
  }
  .small-data-item2 {
    background: linear-gradient(to left, #46c6fa, #336bfe);
  }
  .small-data-item3 {
    background: linear-gradient(to left, #96a6cc, #595f82);
  }
  .small-data-item4 {
    background: linear-gradient(to left, #08dcd5, #46e2bb);
  }
  .small-data-item5 {
    background: linear-gradient(to left, #f4c46b, #ffb313);
  }
  .small-data-item6 {
    background: linear-gradient(to left, #6eccf8, #02acfd);
  }
}
.two-row {
  display: flex;
  align-content: center;
  justify-content: space-between;
  .data1 {
    background: white;
    padding: 14px;
  }
}
</style>