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.
453 lines
17 KiB
453 lines
17 KiB
<!-- 供应商首页 -->
|
|
<template>
|
|
<div class="one-row">
|
|
<div class="data">
|
|
<div class="data-item">
|
|
<div class="small-title">{{ t('home.number_orders') }}</div>
|
|
<div class="small-data">
|
|
<div class="small-data-item small-data-item1">
|
|
<div class="small-data-item-txt">
|
|
<div>{{ supplierData?.openPurchaseCount || 0 }}<span>{{ t('home.single') }}</span></div>
|
|
<div>{{ t('home.number_open') }}</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>{{ t('home.single') }}</span></div>
|
|
<div>{{ t('home.number_total_order') }}</div>
|
|
</div>
|
|
<img src="../../../assets/imgs/icon5.png" alt="" class="img" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="data-item ml-14px">
|
|
<div class="small-title">{{t('home.number_planned_shipments')}}</div>
|
|
<div class="small-data">
|
|
<div class="small-data-item small-data-item3">
|
|
<div class="small-data-item-txt">
|
|
<div>{{ supplierData?.openPurchasePlanCount || 0 }}<span>{{ t('home.single') }}</span></div>
|
|
<div>{{t('home.number_open_plans')}}</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>{{ t('home.single') }}</span></div>
|
|
<div>{{t('home.number_all_plans')}}</div>
|
|
</div>
|
|
<img src="../../../assets/imgs/icon3.png" alt="" class="img" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="data-item ml-14px">
|
|
<div class="small-title">{{t('home.number_invoices')}}</div>
|
|
<div class="small-data">
|
|
<div class="small-data-item small-data-item5">
|
|
<div class="small-data-item-txt">
|
|
<div>{{ supplierData?.notTakeSupplierdeliverCount || 0 }}<span>{{ t('home.single') }}</span></div>
|
|
<div>{{t('home.number_unreceived_orders')}}</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>{{ t('home.single') }}</span></div>
|
|
<div>{{t('home.number_orders_received')}}</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">{{t('home.invoice_trend_month')}}</div>
|
|
<Echart :options="lineOptions" :height="280" :key="lineIndex" />
|
|
</div>
|
|
<div class="data1 w-[35%] ml-14px">
|
|
<div class="title">{{t('home.TOP10_parts_shipped_month')}}</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">{{t('home.latest_news')}}</div>
|
|
<el-table :data="notaicList" style="width: 100%" stripe height="240px">
|
|
<el-table-column :label="t('home.number')" align="center" prop="id" />
|
|
<el-table-column :label="t('home.user_type')" 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="t('home.user_number')" align="center" prop="userId" width="80" />
|
|
<el-table-column :label="t('home.template_coding')" align="center" prop="templateCode" width="80" />
|
|
<el-table-column :label="t('home.sender_number')" align="center" prop="templateNickname" width="180" />
|
|
<el-table-column
|
|
:label="t('home.template_content')"
|
|
align="center"
|
|
prop="templateContent"
|
|
width="200"
|
|
show-overflow-tooltip
|
|
/>
|
|
<el-table-column
|
|
:label="t('home.template_parameters')"
|
|
align="center"
|
|
prop="templateParams"
|
|
width="180"
|
|
show-overflow-tooltip
|
|
>
|
|
<template #default="scope"> {{ scope.row.templateParams }}</template>
|
|
</el-table-column>
|
|
<el-table-column :label="t('home.template_type')" 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="t('home.read')" 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="t('home.read_time')"
|
|
align="center"
|
|
prop="readTime"
|
|
width="180"
|
|
:formatter="dateFormatter"
|
|
/>
|
|
<el-table-column
|
|
:label="t('home.create_time')"
|
|
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">{{ t('home.latest_deduction_details')}}</div>
|
|
<el-table :data="tableData" style="width: 100%" stripe height="240px">
|
|
<el-table-column prop="title" :label="t('home.title')" />
|
|
<el-table-column prop="name" :label="t('home.publisher')" />
|
|
<el-table-column prop="date" :label="t('home.publish_date')" />
|
|
</el-table>
|
|
</div>
|
|
</div>
|
|
<div class="two-row mt-14px">
|
|
<div class="data1 w-[47.3%]">
|
|
<div class="title">{{t('home.month_return_detials')}}</div>
|
|
<el-table
|
|
:data="supplierData?.purchasereturnRecordMonth"
|
|
style="width: 100%"
|
|
stripe
|
|
height="240px"
|
|
>
|
|
<el-table-column prop="number" :label="t('home.document_number')" width="180" />
|
|
<el-table-column prop="fromPackingNumber" :label="t('home.source_package_number')" width="180" />
|
|
<el-table-column prop="toPackingNumber" :label="t('home.destination_package_number')" width="180" />
|
|
<el-table-column prop="fromContainerNumber" :label="t('home.source_appliance_number')" width="120" />
|
|
<el-table-column prop="toContainerNumber" :label="t('home.destination_appliance_number')" width="120" />
|
|
<el-table-column prop="fromBatch" :label="t('home.source_batch')" width="120" />
|
|
<el-table-column prop="toBatch" :label="t('home.destination_batch')" width="120" />
|
|
<el-table-column prop="altBatch" :label="t('home.replace_batch')" width="120" />
|
|
<el-table-column prop="fromLocationCode" :label="t('home.source_location_code')" width="120" />
|
|
<el-table-column prop="toLocationCode" :label="t('home.destination_location_code')" width="120" />
|
|
<el-table-column prop="fromLocationGroupCode" :label="t('home.source_location_group_code')" width="120" />
|
|
<el-table-column prop="toLocationGroupCode" :label="t('home.destination_location_group_code')" width="120" />
|
|
<el-table-column prop="fromAreaCode" :label="t('home.source_location_area_code')" width="120" />
|
|
<el-table-column prop="toAreaCode" :label="t('home.destination_location_area_code')" width="120" />
|
|
<el-table-column prop="fromOwnerCode" :label="t('home.source_shipper_code')" width="120" />
|
|
<el-table-column prop="toOwnerCode" :label="t('home.destination_shipper_code')" width="120" />
|
|
<el-table-column prop="inventoryStatus" :label="t('home.inventory_state')" width="120">
|
|
<template #default="scope">
|
|
{{ formatter(scope.row.inventoryStatus,DICT_TYPE.INVENTORY_STATUS) }}
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="poNumber" :label="t('home.order_number')" width="120" />
|
|
<el-table-column prop="poline" :label="t('home.order_line')" width="120" />
|
|
<el-table-column prop="reason" :label="t('home.cause')" width="120" />
|
|
<el-table-column prop="singlePrice" :label="t('home.unit_price')" width="120" />
|
|
<el-table-column prop="amount" :label="t('home.money')" width="120" />
|
|
<el-table-column prop="itemCode" :label="t('home.material_code')" width="160" />
|
|
<el-table-column prop="itemName" :label="t('home.material_name')" width="120" />
|
|
<el-table-column prop="itemDesc1" :label="t('home.material_description1')" width="120" />
|
|
<el-table-column prop="itemDesc2" :label="t('home.material_description2')" width="120" />
|
|
<el-table-column prop="qty" :label="t('home.amount')" width="120" />
|
|
<el-table-column prop="uom" :label="t('home.measuring_unit')" width="120">
|
|
<template #default="scope">
|
|
{{ formatter(scope.row.uom,DICT_TYPE.UOM) }}
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="projectCode" :label="t('home.item_code')" width="120" />
|
|
<el-table-column prop="remark" :label="t('home.comment')" width="120" />
|
|
<el-table-column prop="createTime" :label="t('home.create_time')" width="170">
|
|
<template #default="scope">
|
|
<span>{{ formatDate(scope.row.createTime) }}</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="creator" :label="t('home.creater')" width="120" />
|
|
</el-table>
|
|
</div>
|
|
<div class="data1 w-[47.3%]">
|
|
<div class="title">{{t('home.claim_details_month')}}</div>
|
|
<el-table
|
|
:data="supplierData?.purchasereturnRecordMonth"
|
|
style="width: 100%"
|
|
stripe
|
|
height="240px"
|
|
>
|
|
<el-table-column prop="number" :label="t('home.document_number')" width="180" />
|
|
<el-table-column prop="fromBatch" :label="t('home.batch')" width="120" />
|
|
<el-table-column prop="poNumber" :label="t('home.order_number')" width="120" />
|
|
<el-table-column prop="poline" :label="t('home.order_line')" width="120" />
|
|
<el-table-column prop="reason" :label="t('home.cause')" width="120" />
|
|
<el-table-column prop="singlePrice" :label="t('home.unit_price')" width="120" />
|
|
<el-table-column prop="amount" :label="t('home.money')" width="120" />
|
|
<el-table-column prop="code" label="代码" width="160" />
|
|
<el-table-column prop="createTime" :label="t('home.create_time')" width="170">
|
|
<template #default="scope">
|
|
<span>{{ formatDate(scope.row.createTime) }}</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="creator" :label="t('home.creater')" 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,dateFormatter } 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', [t('home.invoice_trend_month')])
|
|
set(lineOptionsData, 'series', [
|
|
{
|
|
name: t('home.invoice_trend_month'),
|
|
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( () => {
|
|
// 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>
|
|
|