You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
452 lines
16 KiB
452 lines
16 KiB
<!-- 供应商首页 -->
|
|
<template>
|
|
<div class="one-row">
|
|
<div class="data">
|
|
<div class="data-item">
|
|
<div class="small-title">订单数</div>
|
|
<div class="small-data">
|
|
<div class="small-data-item small-data-item1">
|
|
<div class="small-data-item-txt">
|
|
<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>{{ supplierData?.allPurchaseCount || 0 }}<span>单</span></div>
|
|
<div>全部订单数</div>
|
|
</div>
|
|
<img src="../../../assets/imgs/icon5.png" alt="" class="img" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="data-item ml-14px">
|
|
<div class="small-title">要货计划数</div>
|
|
<div class="small-data">
|
|
<div class="small-data-item small-data-item3">
|
|
<div class="small-data-item-txt">
|
|
<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>{{ supplierData?.allPurchasePlanCount || 0 }}<span>单</span></div>
|
|
<div>全部计划数</div>
|
|
</div>
|
|
<img src="../../../assets/imgs/icon3.png" alt="" class="img" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="data-item ml-14px">
|
|
<div class="small-title">发货单数</div>
|
|
<div class="small-data">
|
|
<div class="small-data-item small-data-item5">
|
|
<div class="small-data-item-txt">
|
|
<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>{{ supplierData?.takeSupplierdeliverCount || 0 }}<span>单</span></div>
|
|
<div>已收货订单数</div>
|
|
</div>
|
|
<img src="../../../assets/imgs/icon2.png" alt="" class="img" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="two-row mt-14px">
|
|
<div class="data1 w-[65%]">
|
|
<div class="title">本月发货单趋势</div>
|
|
<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" :key="lineIndex" />
|
|
</div>
|
|
</div>
|
|
<div class="two-row mt-14px">
|
|
<div class="data1 w-[47.3%]">
|
|
<div class="title">最新消息</div>
|
|
<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-[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 class="two-row mt-14px">
|
|
<div class="data1 w-[47.3%]">
|
|
<div class="title">本月退货明细</div>
|
|
<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-[47.3%]">
|
|
<div class="title">本月索赔明细</div>
|
|
<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>
|
|
</div>
|
|
</template>
|
|
<script lang="ts" setup>
|
|
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 = [
|
|
{
|
|
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 supplierData = ref()
|
|
const lineIndex = ref(0)
|
|
// 本月发货单趋势
|
|
const lineOptionsData = reactive<EChartsOption>(lineOptions) as EChartsOption
|
|
const getInvoiceCharts = async () => {
|
|
set(
|
|
lineOptionsData,
|
|
'xAxis.data',
|
|
supplierData.value.supplierdeliverMonthCount.map((v) => v.date)
|
|
)
|
|
set(lineOptionsData, 'legend.data', ['本月发货单趋势'])
|
|
set(lineOptionsData, 'series', [
|
|
{
|
|
name: '本月发货单趋势',
|
|
smooth: true,
|
|
type: 'line',
|
|
itemStyle: {},
|
|
animationDuration: 2800,
|
|
animationEasing: 'quadraticOut',
|
|
data: supplierData.value.supplierdeliverMonthCount.map((v) => v.count)
|
|
}
|
|
])
|
|
lineIndex.value++
|
|
}
|
|
//本月发货零件TOP10
|
|
const pieOptionsData = reactive<EChartsOption>(pieOptions) as EChartsOption
|
|
const getPartTOPCharts = async () => {
|
|
const data = [
|
|
{ value: 335, name: 'analysis.directAccess' },
|
|
{ value: 310, name: 'analysis.mailMarketing' },
|
|
{ value: 234, name: 'analysis.allianceAdvertising' },
|
|
{ value: 135, name: 'analysis.videoAdvertising' },
|
|
{ value: 1548, name: 'analysis.searchEngines' }
|
|
]
|
|
console.log(supplierData.value.supplierdeliverItemMonthTop)
|
|
set(
|
|
pieOptionsData,
|
|
'legend.data',
|
|
supplierData.value.supplierdeliverItemMonthTop.map((v) => v.itemCode)
|
|
)
|
|
pieOptionsData!.series![0].data = supplierData.value.supplierdeliverItemMonthTop.map((v) => {
|
|
return {
|
|
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 {
|
|
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;
|
|
.data-item {
|
|
width: calc(100% / 3);
|
|
padding: 10px 0px;
|
|
background: white;
|
|
.small-title {
|
|
padding: 0px 14px 10px;
|
|
}
|
|
.small-data {
|
|
display: flex;
|
|
align-content: center;
|
|
justify-content: space-between;
|
|
padding: 0px 14px;
|
|
.small-data-item {
|
|
width: 50%;
|
|
height: 70px;
|
|
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: 20px;
|
|
span {
|
|
font-size: 12px;
|
|
padding-left: 6px;
|
|
}
|
|
}
|
|
&:nth-child(2) {
|
|
font-size: 12px;
|
|
}
|
|
}
|
|
}
|
|
.img {
|
|
width: 30px;
|
|
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>
|
|
|