sfms3.0
/
sfms3.0-ui
3
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

首页

master
zhang_li 9 months ago
parent
6c276b5d5a
commit
793554e6ff
9 changed files with 1122 additions and 600 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 22
      src/api/home/index.ts
  2. 12
      src/views/Home/Index.vue
  3. 306
      src/views/Home/components/material.vue
  4. 305
      src/views/Home/components/produce.vue
  5. 284
      src/views/Home/components/product.vue
  6. 172
      src/views/Home/components/productWarehouseKeeper.vue
  7. 162
      src/views/Home/components/productionManager.vue
  8. 263
      src/views/Home/components/supplierIndex.vue
  9. 192
      src/views/Home/components/warehouseKeeper.vue

22
src/api/home/index.ts
View File

@ -0,0 +1,22 @@
import request from '@/config/axios'
// 供应商首页
export const getSupplierData = async () => {
return await request.get({ url: `/wms/index/indexSupplier` })
}
// 原料管理员首页
export const getMaterialData = async () => {
return await request.get({ url: `/wms/index/indexMaterial` })
}
// 生产管理员首页
export const getProduceData = async () => {
return await request.get({ url: `/wms/index/indexProduce` })
}
// 成品管理员首页
export const getProductData = async () => {
return await request.get({ url: `/wms/index/indexProduct` })
}

12
src/views/Home/Index.vue
View File

@ -1,14 +1,14 @@
<template>
<div>
<supplierIndex v-hasRole="['super_admin','supplier']"/>
<warehouseKeeper v-hasRole="['super_admin']"/>
<productWarehouseKeeper v-hasRole="['super_admin']"/>
<productionManager v-hasRole="['super_admin']"/>
<material v-hasRole="['super_admin']"/>
<product v-hasRole="['super_admin']"/>
<produce v-hasRole="['super_admin']"/>
</div>
</template>
<script lang="ts" setup>
import supplierIndex from './components/supplierIndex.vue'
import warehouseKeeper from './components/warehouseKeeper.vue'
import productWarehouseKeeper from './components/productWarehouseKeeper.vue'
import productionManager from './components/productionManager.vue'
import material from './components/material.vue'
import product from './components/product.vue'
import produce from './components/produce.vue'
</script>

306
src/views/Home/components/material.vue
View File

@ -0,0 +1,306 @@
<!-- 原料管理员首页 -->
<template>
<div class="row">
<div class="data">
<div class="small-data-item small-data-item1">
<div class="small-data-item-txt">
<div>今日到货计划(已发货)</div>
<div>{{materialData?.preparetoissueTodayCount}}<span>单</span></div>
</div>
<img src="../../../assets/imgs/icon1.png" alt="" class="img" />
</div>
<div class="small-data-item small-data-item2 ml-14px">
<div class="small-data-item-txt">
<div>今日备料计划(已发料)</div>
<div>{{materialData?.preparetoissueTodayCount}}<span>单</span></div>
</div>
<img src="../../../assets/imgs/icon5.png" alt="" class="img" />
</div>
<div class="small-data-item small-data-item3 ml-14px">
<div class="small-data-item-txt">
<div>今日叫料请求(已发料)</div>
<div>{{materialData?.issueRequestTodayCount}}<span>单</span></div>
</div>
<img src="../../../assets/imgs/icon6.png" alt="" class="img" />
</div>
<div class="small-data-item small-data-item4 ml-14px">
<div class="small-data-item-txt">
<div>空闲库位数/总库位数</div>
<div style="font-size: 20px;">{{materialData?.freeLocationCount}}<span>个</span>/{{materialData?.totalLocationCount}}<span>个</span></div>
</div>
<img src="../../../assets/imgs/icon3.png" alt="" class="img" />
</div>
</div>
<div class="two-row mt-14px">
<div class="data1 w-[47.3%]">
<div class="title">呆滞库存预警</div>
<el-table
:data="materialData?.stagnantBalanceList"
style="width: 100%"
stripe
height="240px"
>
<el-table-column prop="itemCode" label="物料代码" width="180px" />
<el-table-column prop="batch" label="批次" width="180px" />
<el-table-column prop="packingNumber" label="包装号" width="180px" />
<el-table-column prop="containerNumber" label="器具代码" width="180px" />
<el-table-column prop="qty" label="数量" width="180px" />
<el-table-column prop="uom" label="计量单位" width="180px">
<template #default="scope">
{{ formatter(scope.row.uom, DICT_TYPE.UOM) }}
</template>
</el-table-column>
<el-table-column prop="locationCode" label="库位代码" width="180px" />
<el-table-column prop="warehouseCode" label="仓库代码" 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="库位组代码" width="180px" />
<el-table-column prop="areaCode" label="库区代码" width="180px" />
<el-table-column prop="erpLocationCode" label="ERP库位代码" width="180px" />
<el-table-column prop="altBatch" label="替代批次" width="180px" />
<el-table-column prop="arriveDate" label="到货日期" width="180px">
<template #default="scope">
<span>{{ formatDate(scope.row.planDate) }}</span>
</template>
</el-table-column>
<el-table-column prop="produceDate" label="生产日期" width="180px">
<template #default="scope">
<span>{{ formatDate(scope.row.planDate) }}</span>
</template>
</el-table-column>
<el-table-column prop="expireDate" label="失效日期" width="180px">
<template #default="scope">
<span>{{ formatDate(scope.row.planDate) }}</span>
</template>
</el-table-column>
<el-table-column prop="ownerCode" label="货主代码" width="180px" />
<el-table-column prop="lockedQty" label="锁定数量" width="180px" />
<el-table-column prop="usableQty" label="可用数量" width="180px" />
<el-table-column prop="singlePrice" label="单价" width="180px" />
<el-table-column prop="amount" label="金额" width="180px" />
<el-table-column prop="putInTime" label="入库时间" 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">超期库存预警</div>
<el-table
:data="materialData?.overdueBalanceList"
style="width: 100%"
stripe
height="240px"
>
<el-table-column prop="itemCode" label="物料代码" width="180px" />
<el-table-column prop="batch" label="批次" width="180px" />
<el-table-column prop="packingNumber" label="包装号" width="180px" />
<el-table-column prop="containerNumber" label="器具代码" width="180px" />
<el-table-column prop="qty" label="数量" width="180px" />
<el-table-column prop="uom" label="计量单位" width="180px">
<template #default="scope">
{{ formatter(scope.row.uom, DICT_TYPE.UOM) }}
</template>
</el-table-column>
<el-table-column prop="locationCode" label="库位代码" width="180px" />
<el-table-column prop="warehouseCode" label="仓库代码" 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="库位组代码" width="180px" />
<el-table-column prop="areaCode" label="库区代码" width="180px" />
<el-table-column prop="erpLocationCode" label="ERP库位代码" width="180px" />
<el-table-column prop="altBatch" label="替代批次" width="180px" />
<el-table-column prop="arriveDate" label="到货日期" width="180px">
<template #default="scope">
<span>{{ formatDate(scope.row.planDate) }}</span>
</template>
</el-table-column>
<el-table-column prop="produceDate" label="生产日期" width="180px">
<template #default="scope">
<span>{{ formatDate(scope.row.planDate) }}</span>
</template>
</el-table-column>
<el-table-column prop="expireDate" label="失效日期" width="180px">
<template #default="scope">
<span>{{ formatDate(scope.row.planDate) }}</span>
</template>
</el-table-column>
<el-table-column prop="ownerCode" label="货主代码" width="180px" />
<el-table-column prop="lockedQty" label="锁定数量" width="180px" />
<el-table-column prop="usableQty" label="可用数量" width="180px" />
<el-table-column prop="singlePrice" label="单价" width="180px" />
<el-table-column prop="amount" label="金额" width="180px" />
<el-table-column prop="putInTime" label="入库时间" 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">高低储预警</div>
<el-table :data="tableData" style="width: 100%" stripe height="240px">
<el-table-column prop="title" label="标题" />
<el-table-column prop="name" label="发布人" />
<el-table-column prop="date" label="发布日期" />
</el-table>
</div>
<div class="data1 w-[47.3%]">
<div class="title">待处理任务</div>
<el-table :data="tableData" style="width: 100%" stripe height="240px">
<el-table-column prop="title" label="标题" />
<el-table-column prop="name" label="发布人" />
<el-table-column prop="date" label="发布日期" />
</el-table>
</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'
const tableData = [
{
date: '2016-05-03',
name: 'Tom',
title: 'Tom',
text: 'No. 189, Grove St, Los Angeles'
},
{
date: '2016-05-02',
title: 'Tom',
name: 'Tom',
text: 'No. 189, Grove St, Los Angeles'
},
{
date: '2016-05-04',
title: 'Tom',
name: 'Tom',
text: 'No. 189, Grove St, Los Angeles'
},
{
date: '2016-05-01',
title: 'Tom',
name: 'Tom',
text: 'No. 189, Grove St, Los Angeles'
},
{
date: '2016-05-01',
title: 'Tom',
name: 'Tom',
text: 'No. 189, Grove St, Los Angeles'
},
{
date: '2016-05-01',
title: 'Tom',
name: 'Tom',
text: 'No. 189, Grove St, Los Angeles'
}
]
const materialData = ref()
// 获取原料管理员数据
const getMaterialData = async () => {
IndexApi.getMaterialData().then((res) => {
materialData.value = res
})
}
const formatter = (type, dict) => {
let str = getStrDictOptions(dict).filter((item) => type == item.value)[0].label
return str
}
onMounted(async () => {
await getMaterialData()
})
</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>

305
src/views/Home/components/produce.vue
View File

@ -0,0 +1,305 @@
<!-- 生产管理员首页 -->
<template>
<div class="row">
<div class="two-row">
<div class="data1 w-[47.3%]">
<div class="title">今日生产计划</div>
<el-table
:data="produceData?.productionTodayList"
style="width: 100%"
stripe
height="240px"
>
<el-table-column prop="number" label="单据号" width="180" />
<el-table-column prop="displayOrder" label="顺序" width="170" />
<el-table-column prop="workshop" label="车间" width="170" />
<el-table-column prop="productionLine" label="生产线" width="170" />
<el-table-column prop="shift" label="班次" width="170" />
<el-table-column prop="team" label="班组" width="170" />
<el-table-column prop="planDate" label="计划日期" width="170"
><template #default="scope">
<span>{{ formatDate(scope.row.planDate) }}</span>
</template>
</el-table-column>
<el-table-column prop="beginTime" label="开始日期" width="170"
><template #default="scope">
<span>{{ formatDate(scope.row.beginTime) }}</span>
</template>
</el-table-column>
<el-table-column prop="endTime" label="结束日期" width="170"
><template #default="scope">
<span>{{ formatDate(scope.row.endTime) }}</span>
</template>
</el-table-column>
<el-table-column prop="businessType" label="业务类型" />
</el-table>
</div>
<div class="data1 w-[47.3%]">
<div class="title">线边安全库存</div>
<el-table :data="produceData?.safeLocationList" style="width: 100%" stripe height="240px">
<el-table-column prop="code" label="代码" width="180" />
<el-table-column prop="name" label="名称" width="180" />
<el-table-column prop="warehouseCode" label="仓库代码" width="180" />
<el-table-column prop="areaCode" label="库区代码" width="180" />
<el-table-column prop="locationGroupCode" label="库位组代码" width="180" />
<el-table-column prop="erpLocationCode" label="ERP库位代码" width="180" />
<el-table-column prop="type" label="类型" width="180" />
<el-table-column prop="aisle" label="巷道" width="180" />
<el-table-column prop="shelf" label="货架" width="180" />
<el-table-column prop="locationRow" label="行" width="180" />
<el-table-column prop="locationColum" label="列" width="180" />
<el-table-column prop="pickPriority" label="拣料优先级" width="180" />
<el-table-column prop="maxWeight" label="最大承重" width="180" />
<el-table-column prop="maxArea" label="最大面积" width="180" />
<el-table-column prop="maxVolume" label="最大体积" width="180" />
<el-table-column prop="userGroupCode" label="用户组代码" width="180" />
<el-table-column prop="activeTime" label="生效时间" width="170">
<template #default="scope">
<span>{{ formatDate(scope.row.createTime) }}</span>
</template>
</el-table-column>
<el-table-column prop="expireTime" label="失效时间" width="170">
<template #default="scope">
<span>{{ formatDate(scope.row.createTime) }}</span>
</template>
</el-table-column>
</el-table>
</div>
</div>
<div class="two-row mt-14px">
<div class="data1 w-[47.3%]">
<div class="title">待上架成品库存</div>
<el-table
:data="produceData?.productputawayJobDetailList"
style="width: 100%"
stripe
height="240px"
>
<el-table-column prop="number" label="单据号" width="180" />
<el-table-column prop="fromWarehouseCode" label="从仓库代码" width="180" />
<el-table-column prop="requestTime" label="申请时间" width="170">
<template #default="scope">
<span>{{ formatDate(scope.row.requestTime) }}</span>
</template>
</el-table-column>
<el-table-column prop="requestDueTime" label="要求截止时间" width="170">
<template #default="scope">
<span>{{ formatDate(scope.row.requestDueTime) }}</span>
</template>
</el-table-column>
<el-table-column prop="status" label="状态" width="140"/>
<el-table-column prop="departmentCode" label="部门" />
<el-table-column prop="acceptUserId" label="承接人用户名" width="170" />
<el-table-column prop="acceptTime" label="承接时间" width="170">
<template #default="scope">
<span>{{ formatDate(scope.row.acceptTime) }}</span>
</template>
</el-table-column>
<el-table-column prop="fromLocationTypes" label="从库位类型范围" width="170"/>
<el-table-column prop="toLocationTypes" label="到库位类型范围" width="170" />
<el-table-column prop="toWarehouseCode" label="到仓库代码" width="170"/>
<el-table-column prop="fromAreaCodes" label="从库区代码范围" width="170"/>
<el-table-column prop="toAreaCodes" label="到库区代码范围" width="170"/>
<el-table-column prop="autoComplete" label="自动完成" width="120">
<template #default="scope">
<span>{{ formatter(scope.row.autoComplete, DICT_TYPE.TRUE_FALSE) }}</span>
</template>
</el-table-column>
<el-table-column prop="allowModifyLocation" label="允许修改库位" width="120">
<template #default="scope">
<span>{{ formatter(scope.row.allowModifyLocation, DICT_TYPE.TRUE_FALSE) }}</span>
</template>
</el-table-column>
<el-table-column prop="allowModifyQty" label="允许修改数量" width="120">
<template #default="scope">
<span>{{ formatter(scope.row.allowModifyQty, DICT_TYPE.TRUE_FALSE) }}</span>
</template>
</el-table-column>
<el-table-column prop="allowBiggerQty" label="允许大于推荐数量" width="140">
<template #default="scope">
<span>{{ formatter(scope.row.allowBiggerQty, DICT_TYPE.TRUE_FALSE) }}</span>
</template>
</el-table-column>
<el-table-column prop="allowSmallerQty" label="允许小于推荐数量" width="140">
<template #default="scope">
<span>{{ formatter(scope.row.allowSmallerQty, DICT_TYPE.TRUE_FALSE) }}</span>
</template>
</el-table-column>
<el-table-column prop="allowModifyInventoryStatus" label="允许修改库存状态" width="140">
<template #default="scope">
<span>{{
formatter(scope.row.allowModifyInventoryStatus, DICT_TYPE.TRUE_FALSE)
}}</span>
</template>
</el-table-column>
<el-table-column prop="allowContinuousScanning" label="允许连续扫描" width="120">
<template #default="scope">
<span>{{ formatter(scope.row.allowContinuousScanning, DICT_TYPE.TRUE_FALSE) }}</span>
</template>
</el-table-column>
<el-table-column prop="allowPartialComplete" label="允许部分完成" width="120">
<template #default="scope">
<span>{{ formatter(scope.row.allowPartialComplete, DICT_TYPE.TRUE_FALSE) }}</span>
</template>
</el-table-column>
<el-table-column prop="allowModifyBatch" label="允许修改批次" width="120">
<template #default="scope">
<span>{{ formatter(scope.row.allowModifyBatch, DICT_TYPE.TRUE_FALSE) }}</span>
</template>
</el-table-column>
<el-table-column prop="allowModifyPackingNumber" label="允许修改箱码" width="120">
<template #default="scope">
<span>{{ formatter(scope.row.allowModifyPackingNumber, DICT_TYPE.TRUE_FALSE) }}</span>
</template>
</el-table-column>
</el-table>
</div>
<div class="data1 w-[47.3%]">
<div class="title">待处理任务</div>
<el-table :data="tableData" style="width: 100%" stripe height="240px">
<el-table-column prop="title" label="标题" />
<el-table-column prop="name" label="发布人" />
<el-table-column prop="date" label="发布日期" />
</el-table>
</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'
const tableData = [
{
date: '2016-05-03',
name: 'Tom',
title: 'Tom',
text: 'No. 189, Grove St, Los Angeles'
},
{
date: '2016-05-02',
title: 'Tom',
name: 'Tom',
text: 'No. 189, Grove St, Los Angeles'
},
{
date: '2016-05-04',
title: 'Tom',
name: 'Tom',
text: 'No. 189, Grove St, Los Angeles'
},
{
date: '2016-05-01',
title: 'Tom',
name: 'Tom',
text: 'No. 189, Grove St, Los Angeles'
},
{
date: '2016-05-01',
title: 'Tom',
name: 'Tom',
text: 'No. 189, Grove St, Los Angeles'
},
{
date: '2016-05-01',
title: 'Tom',
name: 'Tom',
text: 'No. 189, Grove St, Los Angeles'
}
]
const produceData = ref()
// 获取生产管理员首页数据
const getProduceData = async () => {
IndexApi.getProduceData().then((res) => {
produceData.value = res
})
}
const formatter = (type, dict) => {
let str = getStrDictOptions(dict).filter((item) => type == item.value)[0].label
return str
}
onMounted(async () => {
await getProduceData()
})
</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>

284
src/views/Home/components/product.vue
View File

@ -0,0 +1,284 @@
<!-- 成品管理员首页 -->
<template>
<div class="row">
<div class="data">
<div class="small-data-item small-data-item1">
<div class="small-data-item-txt">
<div>今日到货计划(已发货)</div>
<div>{{ productData?.deliverPlanTodayCount || 0 }}<span>单</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">呆滞库存预警</div>
<el-table
:data="productData?.stagnantBalanceList"
style="width: 100%"
stripe
height="240px"
>
<el-table-column prop="itemCode" label="物料代码" width="180px" />
<el-table-column prop="batch" label="批次" width="180px" />
<el-table-column prop="packingNumber" label="包装号" width="180px" />
<el-table-column prop="containerNumber" label="器具代码" width="180px" />
<el-table-column prop="qty" label="数量" width="180px" />
<el-table-column prop="uom" label="计量单位" width="180px">
<template #default="scope">
{{ formatter(scope.row.uom, DICT_TYPE.UOM) }}
</template>
</el-table-column>
<el-table-column prop="locationCode" label="库位代码" width="180px" />
<el-table-column prop="warehouseCode" label="仓库代码" 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="库位组代码" width="180px" />
<el-table-column prop="areaCode" label="库区代码" width="180px" />
<el-table-column prop="erpLocationCode" label="ERP库位代码" width="180px" />
<el-table-column prop="altBatch" label="替代批次" width="180px" />
<el-table-column prop="arriveDate" label="到货日期" width="180px">
<template #default="scope">
<span>{{ formatDate(scope.row.planDate) }}</span>
</template>
</el-table-column>
<el-table-column prop="produceDate" label="生产日期" width="180px">
<template #default="scope">
<span>{{ formatDate(scope.row.planDate) }}</span>
</template>
</el-table-column>
<el-table-column prop="expireDate" label="失效日期" width="180px">
<template #default="scope">
<span>{{ formatDate(scope.row.planDate) }}</span>
</template>
</el-table-column>
<el-table-column prop="ownerCode" label="货主代码" width="180px" />
<el-table-column prop="lockedQty" label="锁定数量" width="180px" />
<el-table-column prop="usableQty" label="可用数量" width="180px" />
<el-table-column prop="singlePrice" label="单价" width="180px" />
<el-table-column prop="amount" label="金额" width="180px" />
<el-table-column prop="putInTime" label="入库时间" 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">超期库存预警</div>
<el-table
:data="productData?.overdueBalanceList"
style="width: 100%"
stripe
height="240px"
>
<el-table-column prop="itemCode" label="物料代码" width="180px" />
<el-table-column prop="batch" label="批次" width="180px" />
<el-table-column prop="packingNumber" label="包装号" width="180px" />
<el-table-column prop="containerNumber" label="器具代码" width="180px" />
<el-table-column prop="qty" label="数量" width="180px" />
<el-table-column prop="uom" label="计量单位" width="180px">
<template #default="scope">
{{ formatter(scope.row.uom, DICT_TYPE.UOM) }}
</template>
</el-table-column>
<el-table-column prop="locationCode" label="库位代码" width="180px" />
<el-table-column prop="warehouseCode" label="仓库代码" 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="库位组代码" width="180px" />
<el-table-column prop="areaCode" label="库区代码" width="180px" />
<el-table-column prop="erpLocationCode" label="ERP库位代码" width="180px" />
<el-table-column prop="altBatch" label="替代批次" width="180px" />
<el-table-column prop="arriveDate" label="到货日期" width="180px">
<template #default="scope">
<span>{{ formatDate(scope.row.planDate) }}</span>
</template>
</el-table-column>
<el-table-column prop="produceDate" label="生产日期" width="180px">
<template #default="scope">
<span>{{ formatDate(scope.row.planDate) }}</span>
</template>
</el-table-column>
<el-table-column prop="expireDate" label="失效日期" width="180px">
<template #default="scope">
<span>{{ formatDate(scope.row.planDate) }}</span>
</template>
</el-table-column>
<el-table-column prop="ownerCode" label="货主代码" width="180px" />
<el-table-column prop="lockedQty" label="锁定数量" width="180px" />
<el-table-column prop="usableQty" label="可用数量" width="180px" />
<el-table-column prop="singlePrice" label="单价" width="180px" />
<el-table-column prop="amount" label="金额" width="180px" />
<el-table-column prop="putInTime" label="入库时间" 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">高低储预警</div>
<el-table :data="tableData" style="width: 100%" stripe height="240px">
<el-table-column prop="title" label="标题" />
<el-table-column prop="name" label="发布人" />
<el-table-column prop="date" label="发布日期" />
</el-table>
</div>
<div class="data1 w-[47.3%]">
<div class="title">待处理任务</div>
<el-table :data="tableData" style="width: 100%" stripe height="240px">
<el-table-column prop="title" label="标题" />
<el-table-column prop="name" label="发布人" />
<el-table-column prop="date" label="发布日期" />
</el-table>
</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'
const tableData = [
{
date: '2016-05-03',
name: 'Tom',
title: 'Tom',
text: 'No. 189, Grove St, Los Angeles'
},
{
date: '2016-05-02',
title: 'Tom',
name: 'Tom',
text: 'No. 189, Grove St, Los Angeles'
},
{
date: '2016-05-04',
title: 'Tom',
name: 'Tom',
text: 'No. 189, Grove St, Los Angeles'
},
{
date: '2016-05-01',
title: 'Tom',
name: 'Tom',
text: 'No. 189, Grove St, Los Angeles'
},
{
date: '2016-05-01',
title: 'Tom',
name: 'Tom',
text: 'No. 189, Grove St, Los Angeles'
},
{
date: '2016-05-01',
title: 'Tom',
name: 'Tom',
text: 'No. 189, Grove St, Los Angeles'
}
]
// 获取成品管理员首页首页数据
const productData = ref()
const getProductData = async () => {
IndexApi.getProductData().then((res) => {
productData.value = res
})
}
const formatter = (type, dict) => {
let str = getStrDictOptions(dict).filter((item) => type == item.value)[0].label
return str
}
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>

172
src/views/Home/components/productWarehouseKeeper.vue
View File

@ -1,172 +0,0 @@
<template>
<div class="row">
<div class="data">
<div class="small-data-item small-data-item1">
<div class="small-data-item-txt">
<div>今日到货计划(已发货)</div>
<div>22<span>单</span></div>
</div>
<img src="../../../assets/imgs/icon1.png" alt="" class="img" />
</div>
</div>
<div class="two-row mt-14px">
<div class="data1 w-[50%]">
<div class="title">呆滞库存预警</div>
<el-table :data="tableData" style="width: 100%" stripe height="240px">
<el-table-column prop="title" label="标题" />
<el-table-column prop="name" label="发布人" />
<el-table-column prop="date" label="发布日期" />
</el-table>
</div>
<div class="data1 w-[50%] ml-14px">
<div class="title">超期库存预警</div>
<el-table :data="tableData" style="width: 100%" stripe height="240px">
<el-table-column prop="title" label="标题" />
<el-table-column prop="name" label="发布人" />
<el-table-column prop="date" label="发布日期" />
</el-table>
</div>
</div>
<div class="two-row mt-14px">
<div class="data1 w-[50%]">
<div class="title">高低储预警</div>
<el-table :data="tableData" style="width: 100%" stripe height="240px">
<el-table-column prop="title" label="标题" />
<el-table-column prop="name" label="发布人" />
<el-table-column prop="date" label="发布日期" />
</el-table>
</div>
<div class="data1 w-[50%] ml-14px">
<div class="title">待处理任务</div>
<el-table :data="tableData" style="width: 100%" stripe height="240px">
<el-table-column prop="title" label="标题" />
<el-table-column prop="name" label="发布人" />
<el-table-column prop="date" label="发布日期" />
</el-table>
</div>
</div>
</div>
</template>
<script lang="ts" setup>
const tableData = [
{
date: '2016-05-03',
name: 'Tom',
title: 'Tom',
text: 'No. 189, Grove St, Los Angeles'
},
{
date: '2016-05-02',
title: 'Tom',
name: 'Tom',
text: 'No. 189, Grove St, Los Angeles'
},
{
date: '2016-05-04',
title: 'Tom',
name: 'Tom',
text: 'No. 189, Grove St, Los Angeles'
},
{
date: '2016-05-01',
title: 'Tom',
name: 'Tom',
text: 'No. 189, Grove St, Los Angeles'
},
{
date: '2016-05-01',
title: 'Tom',
name: 'Tom',
text: 'No. 189, Grove St, Los Angeles'
},
{
date: '2016-05-01',
title: 'Tom',
name: 'Tom',
text: 'No. 189, Grove St, Los Angeles'
}
]
</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;
.data1 {
background: white;
padding: 14px;
}
}
</style>

162
src/views/Home/components/productionManager.vue
View File

@ -1,162 +0,0 @@
<template>
<div class="row">
<div class="two-row">
<div class="data1 w-[50%]">
<div class="title">今日生产计划</div>
<el-table :data="tableData" style="width: 100%" stripe height="240px">
<el-table-column prop="title" label="标题" />
<el-table-column prop="name" label="发布人" />
<el-table-column prop="date" label="发布日期" />
</el-table>
</div>
<div class="data1 w-[50%] ml-14px">
<div class="title">线边安全库存</div>
<el-table :data="tableData" style="width: 100%" stripe height="240px">
<el-table-column prop="title" label="标题" />
<el-table-column prop="name" label="发布人" />
<el-table-column prop="date" label="发布日期" />
</el-table>
</div>
</div>
<div class="two-row mt-14px">
<div class="data1 w-[50%]">
<div class="title">待上架成品库存</div>
<el-table :data="tableData" style="width: 100%" stripe height="240px">
<el-table-column prop="title" label="标题" />
<el-table-column prop="name" label="发布人" />
<el-table-column prop="date" label="发布日期" />
</el-table>
</div>
<div class="data1 w-[50%] ml-14px">
<div class="title">待处理任务</div>
<el-table :data="tableData" style="width: 100%" stripe height="240px">
<el-table-column prop="title" label="标题" />
<el-table-column prop="name" label="发布人" />
<el-table-column prop="date" label="发布日期" />
</el-table>
</div>
</div>
</div>
</template>
<script lang="ts" setup>
const tableData = [
{
date: '2016-05-03',
name: 'Tom',
title: 'Tom',
text: 'No. 189, Grove St, Los Angeles'
},
{
date: '2016-05-02',
title: 'Tom',
name: 'Tom',
text: 'No. 189, Grove St, Los Angeles'
},
{
date: '2016-05-04',
title: 'Tom',
name: 'Tom',
text: 'No. 189, Grove St, Los Angeles'
},
{
date: '2016-05-01',
title: 'Tom',
name: 'Tom',
text: 'No. 189, Grove St, Los Angeles'
},
{
date: '2016-05-01',
title: 'Tom',
name: 'Tom',
text: 'No. 189, Grove St, Los Angeles'
},
{
date: '2016-05-01',
title: 'Tom',
name: 'Tom',
text: 'No. 189, Grove St, Los Angeles'
}
]
</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;
.data1 {
background: white;
padding: 14px;
}
}
</style>

263
src/views/Home/components/supplierIndex.vue
View File

@ -1,3 +1,4 @@
<!-- 供应商首页 -->
<template>
<div class="one-row">
<div class="data">
@ -6,14 +7,14 @@
<div class="small-data">
<div class="small-data-item small-data-item1">
<div class="small-data-item-txt">
<div>22<span>单</span></div>
<div>开发订单数</div>
<div>{{ supplierData?.openPurchaseCount || 0 }}<span>单</span></div>
<div>开放订单数</div>
</div>
<img src="../../../assets/imgs/icon1.png" alt="" class="img" />
</div>
<div class="small-data-item small-data-item2 ml-14px">
<div class="small-data-item-txt">
<div>2456<span>单</span></div>
<div>{{ supplierData?.allPurchaseCount || 0 }}<span>单</span></div>
<div>全部订单数</div>
</div>
<img src="../../../assets/imgs/icon5.png" alt="" class="img" />
@ -25,14 +26,14 @@
<div class="small-data">
<div class="small-data-item small-data-item3">
<div class="small-data-item-txt">
<div>255<span>单</span></div>
<div>{{ supplierData?.openPurchasePlanCount || 0 }}<span>单</span></div>
<div>开放计划数</div>
</div>
<img src="../../../assets/imgs/icon6.png" alt="" class="img" />
</div>
<div class="small-data-item small-data-item4 ml-14px">
<div class="small-data-item-txt">
<div>2555<span>单</span></div>
<div>{{ supplierData?.allPurchasePlanCount || 0 }}<span>单</span></div>
<div>全部计划数</div>
</div>
<img src="../../../assets/imgs/icon3.png" alt="" class="img" />
@ -44,14 +45,14 @@
<div class="small-data">
<div class="small-data-item small-data-item5">
<div class="small-data-item-txt">
<div>255<span>单</span></div>
<div>{{ supplierData?.notTakeSupplierdeliverCount || 0 }}<span>单</span></div>
<div>未收货订单数</div>
</div>
<img src="../../../assets/imgs/icon4.png" alt="" class="img" />
</div>
<div class="small-data-item small-data-item6 ml-14px">
<div class="small-data-item-txt">
<div>2555<span>单</span></div>
<div>{{ supplierData?.takeSupplierdeliverCount || 0 }}<span>单</span></div>
<div>已收货订单数</div>
</div>
<img src="../../../assets/imgs/icon2.png" alt="" class="img" />
@ -62,23 +63,80 @@
<div class="two-row mt-14px">
<div class="data1 w-[65%]">
<div class="title">本月发货单趋势</div>
<Echart :options="lineOptions" :height="280" />
<Echart :options="lineOptions" :height="280" :key="lineIndex" />
</div>
<div class="data1 w-[35%] ml-14px">
<div class="title">本月发货零件TOP10</div>
<Echart :options="pieOptions" :height="280" />
<Echart :options="pieOptions" :height="280" :key="lineIndex" />
</div>
</div>
<div class="two-row mt-14px">
<div class="data1 w-[50%]">
<div class="data1 w-[47.3%]">
<div class="title">最新消息</div>
<el-table :data="tableData" style="width: 100%" stripe height="240px">
<el-table-column prop="title" label="标题" />
<el-table-column prop="name" label="发布人" />
<el-table-column prop="date" label="发布日期" />
<el-table :data="notaicList" style="width: 100%" stripe height="240px">
<el-table-column label="编号" align="center" prop="id" />
<el-table-column label="用户类型" align="center" prop="userType">
<template #default="scope">
<dict-tag :type="DICT_TYPE.USER_TYPE" :value="scope.row.userType" />
</template>
</el-table-column>
<el-table-column label="用户编号" align="center" prop="userId" width="80" />
<el-table-column label="模板编码" align="center" prop="templateCode" width="80" />
<el-table-column label="发送人名称" align="center" prop="templateNickname" width="180" />
<el-table-column
label="模版内容"
align="center"
prop="templateContent"
width="200"
show-overflow-tooltip
/>
<el-table-column
label="模版参数"
align="center"
prop="templateParams"
width="180"
show-overflow-tooltip
>
<template #default="scope"> {{ scope.row.templateParams }}</template>
</el-table-column>
<el-table-column label="模版类型" align="center" prop="templateType" width="120">
<template #default="scope">
<dict-tag
:type="DICT_TYPE.SYSTEM_NOTIFY_TEMPLATE_TYPE"
:value="scope.row.templateType"
/>
</template>
</el-table-column>
<el-table-column label="是否已读" align="center" prop="readStatus" width="100">
<template #default="scope">
<dict-tag :type="DICT_TYPE.INFRA_BOOLEAN_STRING" :value="scope.row.readStatus" />
</template>
</el-table-column>
<el-table-column
label="阅读时间"
align="center"
prop="readTime"
width="180"
:formatter="dateFormatter"
/>
<el-table-column
label="创建时间"
align="center"
prop="createTime"
width="180"
:formatter="dateFormatter"
/>
<!-- <el-table-column label="操作" align="center" fixed="right" width="120">
<template #default="scope">
<el-button link type="primary" @click="openDetail(scope.row)" v-hasPermi="['system:notify-message:query']">
<Icon icon="ep:document-copy" />
详情
</el-button>
</template>
</el-table-column> -->
</el-table>
</div>
<div class="data1 w-[50%] ml-14px">
<div class="data1 w-[47.3%]">
<div class="title">最新扣分明细</div>
<el-table :data="tableData" style="width: 100%" stripe height="240px">
<el-table-column prop="title" label="标题" />
@ -88,20 +146,82 @@
</div>
</div>
<div class="two-row mt-14px">
<div class="data1 w-[50%]">
<div class="data1 w-[47.3%]">
<div class="title">本月退货明细</div>
<el-table :data="tableData" style="width: 100%" stripe height="240px">
<el-table-column prop="title" label="标题" />
<el-table-column prop="name" label="发布人" />
<el-table-column prop="date" label="发布日期" />
<el-table
:data="supplierData?.purchasereturnRecordMonth"
style="width: 100%"
stripe
height="240px"
>
<el-table-column prop="number" label="单据号" width="180" />
<el-table-column prop="fromPackingNumber" label="从包装号" width="180" />
<el-table-column prop="toPackingNumber" label="到包装号" width="180" />
<el-table-column prop="fromContainerNumber" label="从器具号" width="120" />
<el-table-column prop="toContainerNumber" label="到器具号" width="120" />
<el-table-column prop="fromBatch" label="从批次" width="120" />
<el-table-column prop="toBatch" label="到批次" width="120" />
<el-table-column prop="altBatch" label="替代批次" width="120" />
<el-table-column prop="fromLocationCode" label="从库位代码" width="120" />
<el-table-column prop="toLocationCode" label="到库位代码" width="120" />
<el-table-column prop="fromLocationGroupCode" label="从库位组代码" width="120" />
<el-table-column prop="toLocationGroupCode" label="到库位组代码" width="120" />
<el-table-column prop="fromAreaCode" label="从库区代码" width="120" />
<el-table-column prop="toAreaCode" label="到库区代码" width="120" />
<el-table-column prop="fromOwnerCode" label="从货主代码" width="120" />
<el-table-column prop="toOwnerCode" label="到货主代码" width="120" />
<el-table-column prop="inventoryStatus" label="库存状态" width="120">
<template #default="scope">
{{ formatter(scope.row.inventoryStatus,DICT_TYPE.INVENTORY_STATUS) }}
</template>
</el-table-column>
<el-table-column prop="poNumber" label="订单号" width="120" />
<el-table-column prop="poline" label="订单行" width="120" />
<el-table-column prop="reason" label="原因" width="120" />
<el-table-column prop="singlePrice" label="单价" width="120" />
<el-table-column prop="amount" label="金额" width="120" />
<el-table-column prop="itemCode" label="物品代码" width="160" />
<el-table-column prop="itemName" label="物品名称" width="120" />
<el-table-column prop="itemDesc1" label="物品描述1" width="120" />
<el-table-column prop="itemDesc2" label="物品描述2" width="120" />
<el-table-column prop="qty" label="数量" width="120" />
<el-table-column prop="uom" label="计量单位" width="120">
<template #default="scope">
{{ formatter(scope.row.uom,DICT_TYPE.UOM) }}
</template>
</el-table-column>
<el-table-column prop="projectCode" label="项目代码" width="120" />
<el-table-column prop="remark" label="备注" width="120" />
<el-table-column prop="createTime" label="创建时间" width="170">
<template #default="scope">
<span>{{ formatDate(scope.row.createTime) }}</span>
</template>
</el-table-column>
<el-table-column prop="creator" label="创建者" width="120" />
</el-table>
</div>
<div class="data1 w-[50%] ml-14px">
<div class="data1 w-[47.3%]">
<div class="title">本月索赔明细</div>
<el-table :data="tableData" style="width: 100%" stripe height="240px">
<el-table-column prop="title" label="标题" />
<el-table-column prop="name" label="发布人" />
<el-table-column prop="date" label="发布日期" />
<el-table
:data="supplierData?.purchasereturnRecordMonth"
style="width: 100%"
stripe
height="240px"
>
<el-table-column prop="number" label="单据号" width="180" />
<el-table-column prop="fromBatch" label="批次" width="120" />
<el-table-column prop="poNumber" label="订单号" width="120" />
<el-table-column prop="poline" label="订单行" width="120" />
<el-table-column prop="reason" label="原因" width="120" />
<el-table-column prop="singlePrice" label="单价" width="120" />
<el-table-column prop="amount" label="金额" width="120" />
<el-table-column prop="code" label="代码" width="160" />
<el-table-column prop="createTime" label="创建时间" width="170">
<template #default="scope">
<span>{{ formatDate(scope.row.createTime) }}</span>
</template>
</el-table-column>
<el-table-column prop="creator" label="创建者" width="120" />
</el-table>
</div>
</div>
@ -111,6 +231,10 @@
import { set } from 'lodash-es'
import { EChartsOption } from 'echarts'
import { lineOptions, pieOptions } from '../echarts-data'
import { formatDate } from '@/utils/formatTime'
import * as NotifyMessageApi from '@/api/system/notify/message'
import * as IndexApi from '@/api/home'
import { DICT_TYPE, getStrDictOptions } from '@/utils/dict'
const { t } = useI18n()
const tableData = [
{
@ -150,60 +274,31 @@ const tableData = [
text: 'No. 189, Grove St, Los Angeles'
}
]
const supplierData = ref()
const lineIndex = ref(0)
// 本月发货单趋势
const lineOptionsData = reactive<EChartsOption>(lineOptions) as EChartsOption
const getInvoiceCharts = async () => {
const data = [
{ value: 20, name: '1日' },
{ value: 50, name: '2日' },
{ value: 250, name: '3日' },
{ value: 220, name: '4日' },
{ value: 230, name: '5日' },
{ value: 160, name: '6日' },
{ value: 120, name: '7日' },
{ value: 160, name: '8日' },
{ value: 130, name: '9日' },
{ value: 240, name: '10日' },
{ value: 230, name: '11日' },
{ value: 100, name: '12日' },
{ value: 40, name: '13日' },
{ value: 80, name: '14日' },
{ value: 30, name: '15日' },
{ value: 88, name: '16日' },
{ value: 134, name: '17日' },
{ value: 156, name: '18日' },
{ value: 143, name: '19日' },
{ value: 240, name: '20日' },
{ value: 160, name: '21日' },
{ value: 160, name: '22日' },
{ value: 160, name: '23日' },
{ value: 160, name: '24日' },
{ value: 160, name: '25日' },
{ value: 160, name: '26日' },
{ value: 160, name: '27日' },
{ value: 160, name: '28日' },
{ value: 160, name: '29日' },
{ value: 160, name: '30日' }
]
set(
lineOptionsData,
'xAxis.data',
data.map((v) => t(v.name))
supplierData.value.supplierdeliverMonthCount.map((v) => v.date)
)
set(lineOptionsData, 'legend.data', ['本月发货单趋势'])
set(lineOptionsData, 'series', [
{
name: '哈哈',
name: '本月发货单趋势',
smooth: true,
type: 'line',
itemStyle: {},
animationDuration: 2800,
animationEasing: 'quadraticOut',
data: data.map((v) => v.value)
data: supplierData.value.supplierdeliverMonthCount.map((v) => v.count)
}
])
lineIndex.value++
}
//本月发货零件TOP10
const pieOptionsData = reactive<EChartsOption>(pieOptions) as EChartsOption
const getPartTOPCharts = async () => {
const data = [
@ -213,21 +308,56 @@ const getPartTOPCharts = async () => {
{ value: 135, name: 'analysis.videoAdvertising' },
{ value: 1548, name: 'analysis.searchEngines' }
]
console.log(supplierData.value.supplierdeliverItemMonthTop)
set(
pieOptionsData,
'legend.data',
data.map((v) => t(v.name))
supplierData.value.supplierdeliverItemMonthTop.map((v) => v.itemCode)
)
pieOptionsData!.series![0].data = data.map((v) => {
pieOptionsData!.series![0].data = supplierData.value.supplierdeliverItemMonthTop.map((v) => {
return {
name: t(v.name),
value: v.value
name: v.itemCode,
value: v.qty
}
})
lineIndex.value++
}
// 获取供应商数据
const getSupplierData = async () => {
IndexApi.getSupplierData().then((res) => {
supplierData.value = res
getInvoiceCharts()
getPartTOPCharts()
})
}
// 最新消息
const notaicList = ref([]) // 列表的数据
const queryParams = reactive({
pageNo: 1,
pageSize: 10,
userType: undefined,
userId: undefined,
templateCode: undefined,
templateType: undefined,
createTime: []
})
/** 查询列表 */
const getList = async () => {
try {
const data = await NotifyMessageApi.getNotifyMessagePage(queryParams)
notaicList.value = data.list
} finally {
}
}
const formatter = (type,dict) => {
let str = getStrDictOptions(dict).filter((item) => type == item.value)[0]
.label
return str
}
onMounted(async () => {
await getSupplierData()
getList()
})
</script>
<style scoped lang="scss">
.title {
@ -314,6 +444,7 @@ getPartTOPCharts()
.two-row {
display: flex;
align-content: center;
justify-content: space-between;
.data1 {
background: white;
padding: 14px;

192
src/views/Home/components/warehouseKeeper.vue
View File

@ -1,192 +0,0 @@
<template>
<div class="row">
<div class="data">
<div class="small-data-item small-data-item1">
<div class="small-data-item-txt">
<div>今日到货计划(已发货)</div>
<div>22<span>单</span></div>
</div>
<img src="../../../assets/imgs/icon1.png" alt="" class="img" />
</div>
<div class="small-data-item small-data-item2 ml-14px">
<div class="small-data-item-txt">
<div>今日备料计划(已发料)</div>
<div>2456<span>单</span></div>
</div>
<img src="../../../assets/imgs/icon5.png" alt="" class="img" />
</div>
<div class="small-data-item small-data-item3 ml-14px">
<div class="small-data-item-txt">
<div>今日叫料请求(已发料)</div>
<div>255<span>单</span></div>
</div>
<img src="../../../assets/imgs/icon6.png" alt="" class="img" />
</div>
<div class="small-data-item small-data-item4 ml-14px">
<div class="small-data-item-txt">
<div>空闲库位数/总库位数</div>
<div style="font-size: 20px;">2555<span>个</span>/65555<span>个</span></div>
</div>
<img src="../../../assets/imgs/icon3.png" alt="" class="img" />
</div>
</div>
<div class="two-row mt-14px">
<div class="data1 w-[50%]">
<div class="title">呆滞库存预警</div>
<el-table :data="tableData" style="width: 100%" stripe height="240px">
<el-table-column prop="title" label="标题" />
<el-table-column prop="name" label="发布人" />
<el-table-column prop="date" label="发布日期" />
</el-table>
</div>
<div class="data1 w-[50%] ml-14px">
<div class="title">超期库存预警</div>
<el-table :data="tableData" style="width: 100%" stripe height="240px">
<el-table-column prop="title" label="标题" />
<el-table-column prop="name" label="发布人" />
<el-table-column prop="date" label="发布日期" />
</el-table>
</div>
</div>
<div class="two-row mt-14px">
<div class="data1 w-[50%]">
<div class="title">高低储预警</div>
<el-table :data="tableData" style="width: 100%" stripe height="240px">
<el-table-column prop="title" label="标题" />
<el-table-column prop="name" label="发布人" />
<el-table-column prop="date" label="发布日期" />
</el-table>
</div>
<div class="data1 w-[50%] ml-14px">
<div class="title">待处理任务</div>
<el-table :data="tableData" style="width: 100%" stripe height="240px">
<el-table-column prop="title" label="标题" />
<el-table-column prop="name" label="发布人" />
<el-table-column prop="date" label="发布日期" />
</el-table>
</div>
</div>
</div>
</template>
<script lang="ts" setup>
const tableData = [
{
date: '2016-05-03',
name: 'Tom',
title: 'Tom',
text: 'No. 189, Grove St, Los Angeles'
},
{
date: '2016-05-02',
title: 'Tom',
name: 'Tom',
text: 'No. 189, Grove St, Los Angeles'
},
{
date: '2016-05-04',
title: 'Tom',
name: 'Tom',
text: 'No. 189, Grove St, Los Angeles'
},
{
date: '2016-05-01',
title: 'Tom',
name: 'Tom',
text: 'No. 189, Grove St, Los Angeles'
},
{
date: '2016-05-01',
title: 'Tom',
name: 'Tom',
text: 'No. 189, Grove St, Los Angeles'
},
{
date: '2016-05-01',
title: 'Tom',
name: 'Tom',
text: 'No. 189, Grove St, Los Angeles'
}
]
</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;
.data1 {
background: white;
padding: 14px;
}
}
</style>
Write Preview
Loading…
Cancel
Save