zhaoxuebing
11 months ago
12 changed files with 1127 additions and 604 deletions
@ -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` }) |
|||
} |
|||
|
@ -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> |
|||
|
@ -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> |
@ -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> |
@ -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> |
@ -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> |
@ -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> |
@ -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> |
Loading…
Reference in new issue