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

home

master
陈薪名 9 months ago
parent
a6f42fcb76
commit
bedf7cb85a
9 changed files with 2442 additions and 0 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 381
      src/views/home/Index copy.vue
  2. 319
      src/views/home/Index2.vue
  3. 336
      src/views/home/components/material.vue
  4. 286
      src/views/home/components/produce.vue
  5. 313
      src/views/home/components/product.vue
  6. 452
      src/views/home/components/supplierIndex.vue
  7. 286
      src/views/home/echarts-data.ts
  8. 14
      src/views/home/index.vue
  9. 55
      src/views/home/types.ts

381
src/views/home/Index copy.vue
View File

@ -0,0 +1,381 @@
<template>
<div>
<el-card shadow="never">
<el-skeleton :loading="loading" animated>
<el-row :gutter="20" justify="space-between">
<el-col :xl="12" :lg="12" :md="12" :sm="24" :xs="24">
<div class="flex items-center">
<img :src="avatar" alt="" class="mr-20px h-70px w-70px rounded-[50%]" />
<div>
<div class="text-20px">
{{ t('workplace.welcome') }} {{ username }} {{ t('workplace.happyDay') }}
</div>
<div class="mt-10px text-14px text-gray-500">
{{ t('workplace.toady') }}，20℃ - 32℃！
</div>
</div>
</div>
</el-col>
<el-col :xl="12" :lg="12" :md="12" :sm="24" :xs="24">
<div class="h-70px flex items-center justify-end lt-sm:mt-10px">
<div class="px-8px text-right">
<div class="mb-20px text-14px text-gray-400">{{ t('workplace.project') }}</div>
<CountTo
class="text-20px"
:start-val="0"
:end-val="totalSate.project"
:duration="2600"
/>
</div>
<el-divider direction="vertical" />
<div class="px-8px text-right">
<div class="mb-20px text-14px text-gray-400">{{ t('workplace.toDo') }}</div>
<CountTo
class="text-20px"
:start-val="0"
:end-val="totalSate.todo"
:duration="2600"
/>
</div>
<el-divider direction="vertical" border-style="dashed" />
<div class="px-8px text-right">
<div class="mb-20px text-14px text-gray-400">{{ t('workplace.access') }}</div>
<CountTo
class="text-20px"
:start-val="0"
:end-val="totalSate.access"
:duration="2600"
/>
</div>
</div>
</el-col>
</el-row>
</el-skeleton>
</el-card>
</div>
<el-row class="mt-5px" :gutter="20" justify="space-between">
<el-col :xl="16" :lg="16" :md="24" :sm="24" :xs="24" class="mb-10px">
<el-card shadow="never">
<template #header>
<div class="h-3 flex justify-between">
<span>{{ t('workplace.project') }}</span>
<el-link type="primary" :underline="false">{{ t('action.more') }}</el-link>
</div>
</template>
<el-skeleton :loading="loading" animated>
<el-row>
<el-col
v-for="(item, index) in projects"
:key="`card-${index}`"
:xl="8"
:lg="8"
:md="8"
:sm="24"
:xs="24"
>
<el-card shadow="hover">
<div class="flex items-center">
<Icon :icon="item.icon" :size="25" class="mr-10px" />
<span class="text-16px">{{ item.name }}</span>
</div>
<div class="mt-15px text-14px text-gray-400">{{ t(item.message) }}</div>
<div class="mt-20px flex justify-between text-12px text-gray-400">
<span>{{ item.personal }}</span>
<span>{{ formatTime(item.time, 'yyyy-MM-dd') }}</span>
</div>
</el-card>
</el-col>
</el-row>
</el-skeleton>
</el-card>
<el-card shadow="never" class="mt-5px">
<el-skeleton :loading="loading" animated>
<el-row :gutter="20" justify="space-between">
<el-col :xl="10" :lg="10" :md="24" :sm="24" :xs="24">
<el-card shadow="hover" class="mb-10px">
<el-skeleton :loading="loading" animated>
<Echart :options="pieOptionsData" :height="280" />
</el-skeleton>
</el-card>
</el-col>
<el-col :xl="14" :lg="14" :md="24" :sm="24" :xs="24">
<el-card shadow="hover" class="mb-10px">
<el-skeleton :loading="loading" animated>
<Echart :options="barOptionsData" :height="280" />
</el-skeleton>
</el-card>
</el-col>
</el-row>
</el-skeleton>
</el-card>
</el-col>
<el-col :xl="8" :lg="8" :md="24" :sm="24" :xs="24" class="mb-10px">
<el-card shadow="never">
<template #header>
<div class="h-3 flex justify-between">
<span>{{ t('workplace.shortcutOperation') }}</span>
</div>
</template>
<el-skeleton :loading="loading" animated>
<el-row>
<el-col v-for="item in shortcut" :key="`team-${item.name}`" :span="8" class="mb-10px">
<div class="flex items-center">
<Icon :icon="item.icon" class="mr-10px" />
<el-link type="default" :underline="false" @click="setWatermark(item.name)">
{{ item.name }}
</el-link>
</div>
</el-col>
</el-row>
</el-skeleton>
</el-card>
<el-card shadow="never" class="mt-10px">
<template #header>
<div class="h-3 flex justify-between">
<span>{{ t('workplace.notice') }}</span>
<el-link type="primary" :underline="false">{{ t('action.more') }}</el-link>
</div>
</template>
<el-skeleton :loading="loading" animated>
<div v-for="(item, index) in notice" :key="`dynamics-${index}`">
<div class="flex items-center">
<img :src="avatar" alt="" class="mr-20px h-35px w-35px rounded-[50%]" />
<div>
<div class="text-14px">
<Highlight :keys="item.keys.map((v) => t(v))">
{{ item.type }} : {{ item.title }}
</Highlight>
</div>
<div class="mt-15px text-12px text-gray-400">
{{ formatTime(item.date, 'yyyy-MM-dd') }}
</div>
</div>
</div>
<el-divider />
</div>
</el-skeleton>
</el-card>
</el-col>
</el-row>
</template>
<script lang="ts" setup>
import { set } from 'lodash-es'
import { EChartsOption } from 'echarts'
import { formatTime } from '@/utils'
import { useUserStore } from '@/store/modules/user'
import { useWatermark } from '@/hooks/web/useWatermark'
import avatarImg from '@/assets/imgs/avatar.gif'
import type { WorkplaceTotal, Project, Notice, Shortcut } from './types'
import { pieOptions, barOptions } from './echarts-data'
defineOptions({ name: 'Home' })
const { t } = useI18n()
const userStore = useUserStore()
const { setWatermark } = useWatermark()
const loading = ref(true)
const avatar = userStore.getUser.avatar ? userStore.getUser.avatar : avatarImg
const username = userStore.getUser.nickname
const pieOptionsData = reactive<EChartsOption>(pieOptions) as EChartsOption
// 获取统计数
let totalSate = reactive<WorkplaceTotal>({
project: 0,
access: 0,
todo: 0
})
const getCount = async () => {
const data = {
project: 40,
access: 2340,
todo: 10
}
totalSate = Object.assign(totalSate, data)
}
// 获取项目数
let projects = reactive<Project[]>([])
const getProject = async () => {
const data = [
{
name: 'Github',
icon: 'akar-icons:github-fill',
message: 'workplace.introduction',
personal: 'Archer',
time: new Date()
},
{
name: 'Vue',
icon: 'logos:vue',
message: 'workplace.introduction',
personal: 'Archer',
time: new Date()
},
{
name: 'Angular',
icon: 'logos:angular-icon',
message: 'workplace.introduction',
personal: 'Archer',
time: new Date()
},
{
name: 'React',
icon: 'logos:react',
message: 'workplace.introduction',
personal: 'Archer',
time: new Date()
},
{
name: 'Webpack',
icon: 'logos:webpack',
message: 'workplace.introduction',
personal: 'Archer',
time: new Date()
},
{
name: 'Vite',
icon: 'vscode-icons:file-type-vite',
message: 'workplace.introduction',
personal: 'Archer',
time: new Date()
}
]
projects = Object.assign(projects, data)
}
// 获取通知公告
let notice = reactive<Notice[]>([])
const getNotice = async () => {
const data = [
{
title: '系统升级版本',
type: '通知',
keys: ['通知', '升级'],
date: new Date()
},
{
title: '系统凌晨维护',
type: '公告',
keys: ['公告', '维护'],
date: new Date()
},
{
title: '系统升级版本',
type: '通知',
keys: ['通知', '升级'],
date: new Date()
},
{
title: '系统凌晨维护',
type: '公告',
keys: ['公告', '维护'],
date: new Date()
}
]
notice = Object.assign(notice, data)
}
// 获取快捷入口
let shortcut = reactive<Shortcut[]>([])
const getShortcut = async () => {
const data = [
{
name: 'Github',
icon: 'akar-icons:github-fill',
url: 'github.io'
},
{
name: 'Vue',
icon: 'logos:vue',
url: 'vuejs.org'
},
{
name: 'Vite',
icon: 'vscode-icons:file-type-vite',
url: 'https://vitejs.dev/'
},
{
name: 'Angular',
icon: 'logos:angular-icon',
url: 'github.io'
},
{
name: 'React',
icon: 'logos:react',
url: 'github.io'
},
{
name: 'Webpack',
icon: 'logos:webpack',
url: 'github.io'
}
]
shortcut = Object.assign(shortcut, data)
}
// 用户来源
const getUserAccessSource = 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' }
]
set(
pieOptionsData,
'legend.data',
data.map((v) => t(v.name))
)
pieOptionsData!.series![0].data = data.map((v) => {
return {
name: t(v.name),
value: v.value
}
})
}
const barOptionsData = reactive<EChartsOption>(barOptions) as EChartsOption
// 周活跃量
const getWeeklyUserActivity = async () => {
const data = [
{ value: 13253, name: 'analysis.monday' },
{ value: 34235, name: 'analysis.tuesday' },
{ value: 26321, name: 'analysis.wednesday' },
{ value: 12340, name: 'analysis.thursday' },
{ value: 24643, name: 'analysis.friday' },
{ value: 1322, name: 'analysis.saturday' },
{ value: 1324, name: 'analysis.sunday' }
]
set(
barOptionsData,
'xAxis.data',
data.map((v) => t(v.name))
)
set(barOptionsData, 'series', [
{
name: t('analysis.activeQuantity'),
data: data.map((v) => v.value),
type: 'bar'
}
])
}
const getAllApi = async () => {
await Promise.all([
getCount(),
getProject(),
getNotice(),
getShortcut(),
getUserAccessSource(),
getWeeklyUserActivity()
])
loading.value = false
}
getAllApi()
</script>

319
src/views/home/Index2.vue
View File

@ -0,0 +1,319 @@
<template>
<el-row :class="prefixCls" :gutter="20" justify="space-between">
<el-col :lg="6" :md="12" :sm="12" :xl="6" :xs="24">
<el-card class="mb-20px" shadow="hover">
<el-skeleton :loading="loading" :rows="2" animated>
<template #default>
<div :class="`${prefixCls}__item flex justify-between`">
<div>
<div
:class="`${prefixCls}__item--icon ${prefixCls}__item--peoples p-16px inline-block rounded-6px`"
>
<Icon :size="40" icon="svg-icon:peoples" />
</div>
</div>
<div class="flex flex-col justify-between">
<div :class="`${prefixCls}__item--text text-16px text-gray-500 text-right`"
>{{ t('analysis.newUser') }}
</div>
<CountTo
:duration="2600"
:end-val="102400"
:start-val="0"
class="text-right text-20px font-700"
/>
</div>
</div>
</template>
</el-skeleton>
</el-card>
</el-col>
<el-col :lg="6" :md="12" :sm="12" :xl="6" :xs="24">
<el-card class="mb-20px" shadow="hover">
<el-skeleton :loading="loading" :rows="2" animated>
<template #default>
<div :class="`${prefixCls}__item flex justify-between`">
<div>
<div
:class="`${prefixCls}__item--icon ${prefixCls}__item--message p-16px inline-block rounded-6px`"
>
<Icon :size="40" icon="svg-icon:message" />
</div>
</div>
<div class="flex flex-col justify-between">
<div :class="`${prefixCls}__item--text text-16px text-gray-500 text-right`"
>{{ t('analysis.unreadInformation') }}
</div>
<CountTo
:duration="2600"
:end-val="81212"
:start-val="0"
class="text-right text-20px font-700"
/>
</div>
</div>
</template>
</el-skeleton>
</el-card>
</el-col>
<el-col :lg="6" :md="12" :sm="12" :xl="6" :xs="24">
<el-card class="mb-20px" shadow="hover">
<el-skeleton :loading="loading" :rows="2" animated>
<template #default>
<div :class="`${prefixCls}__item flex justify-between`">
<div>
<div
:class="`${prefixCls}__item--icon ${prefixCls}__item--money p-16px inline-block rounded-6px`"
>
<Icon :size="40" icon="svg-icon:money" />
</div>
</div>
<div class="flex flex-col justify-between">
<div :class="`${prefixCls}__item--text text-16px text-gray-500 text-right`"
>{{ t('analysis.transactionAmount') }}
</div>
<CountTo
:duration="2600"
:end-val="9280"
:start-val="0"
class="text-right text-20px font-700"
/>
</div>
</div>
</template>
</el-skeleton>
</el-card>
</el-col>
<el-col :lg="6" :md="12" :sm="12" :xl="6" :xs="24">
<el-card class="mb-20px" shadow="hover">
<el-skeleton :loading="loading" :rows="2" animated>
<template #default>
<div :class="`${prefixCls}__item flex justify-between`">
<div>
<div
:class="`${prefixCls}__item--icon ${prefixCls}__item--shopping p-16px inline-block rounded-6px`"
>
<Icon :size="40" icon="svg-icon:shopping" />
</div>
</div>
<div class="flex flex-col justify-between">
<div :class="`${prefixCls}__item--text text-16px text-gray-500 text-right`"
>{{ t('analysis.totalShopping') }}
</div>
<CountTo
:duration="2600"
:end-val="13600"
:start-val="0"
class="text-right text-20px font-700"
/>
</div>
</div>
</template>
</el-skeleton>
</el-card>
</el-col>
</el-row>
<el-row :gutter="20" justify="space-between">
<el-col :lg="10" :md="24" :sm="24" :xl="10" :xs="24">
<el-card class="mb-20px" shadow="hover">
<el-skeleton :loading="loading" animated>
<Echart :height="300" :options="pieOptionsData" />
</el-skeleton>
</el-card>
</el-col>
<el-col :lg="14" :md="24" :sm="24" :xl="14" :xs="24">
<el-card class="mb-20px" shadow="hover">
<el-skeleton :loading="loading" animated>
<Echart :height="300" :options="barOptionsData" />
</el-skeleton>
</el-card>
</el-col>
<el-col :span="24">
<el-card class="mb-20px" shadow="hover">
<el-skeleton :loading="loading" :rows="4" animated>
<Echart :height="350" :options="lineOptionsData" />
</el-skeleton>
</el-card>
</el-col>
</el-row>
</template>
<script lang="ts" setup>
import { set } from 'lodash-es'
import { EChartsOption } from 'echarts'
import { useDesign } from '@/hooks/web/useDesign'
import type { AnalysisTotalTypes } from './types'
import { barOptions, lineOptions, pieOptions } from './echarts-data'
defineOptions({ name: 'Home2' })
const { t } = useI18n()
const loading = ref(true)
const { getPrefixCls } = useDesign()
const prefixCls = getPrefixCls('panel')
const pieOptionsData = reactive<EChartsOption>(pieOptions) as EChartsOption
let totalState = reactive<AnalysisTotalTypes>({
users: 0,
messages: 0,
moneys: 0,
shoppings: 0
})
const getCount = async () => {
const data = {
users: 102400,
messages: 81212,
moneys: 9280,
shoppings: 13600
}
totalState = Object.assign(totalState, data)
}
// 用户来源
const getUserAccessSource = 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' }
]
set(
pieOptionsData,
'legend.data',
data.map((v) => t(v.name))
)
set(pieOptionsData, 'series.data', data)
}
const barOptionsData = reactive<EChartsOption>(barOptions) as EChartsOption
// 周活跃量
const getWeeklyUserActivity = async () => {
const data = [
{ value: 13253, name: 'analysis.monday' },
{ value: 34235, name: 'analysis.tuesday' },
{ value: 26321, name: 'analysis.wednesday' },
{ value: 12340, name: 'analysis.thursday' },
{ value: 24643, name: 'analysis.friday' },
{ value: 1322, name: 'analysis.saturday' },
{ value: 1324, name: 'analysis.sunday' }
]
set(
barOptionsData,
'xAxis.data',
data.map((v) => t(v.name))
)
set(barOptionsData, 'series', [
{
name: t('analysis.activeQuantity'),
data: data.map((v) => v.value),
type: 'bar'
}
])
}
const lineOptionsData = reactive<EChartsOption>(lineOptions) as EChartsOption
// 每月销售总额
const getMonthlySales = async () => {
const data = [
{ estimate: 100, actual: 120, name: 'analysis.january' },
{ estimate: 120, actual: 82, name: 'analysis.february' },
{ estimate: 161, actual: 91, name: 'analysis.march' },
{ estimate: 134, actual: 154, name: 'analysis.april' },
{ estimate: 105, actual: 162, name: 'analysis.may' },
{ estimate: 160, actual: 140, name: 'analysis.june' },
{ estimate: 165, actual: 145, name: 'analysis.july' },
{ estimate: 114, actual: 250, name: 'analysis.august' },
{ estimate: 163, actual: 134, name: 'analysis.september' },
{ estimate: 185, actual: 56, name: 'analysis.october' },
{ estimate: 118, actual: 99, name: 'analysis.november' },
{ estimate: 123, actual: 123, name: 'analysis.december' }
]
set(
lineOptionsData,
'xAxis.data',
data.map((v) => t(v.name))
)
set(lineOptionsData, 'series', [
{
name: t('analysis.estimate'),
smooth: true,
type: 'line',
data: data.map((v) => v.estimate),
animationDuration: 2800,
animationEasing: 'cubicInOut'
},
{
name: t('analysis.actual'),
smooth: true,
type: 'line',
itemStyle: {},
data: data.map((v) => v.actual),
animationDuration: 2800,
animationEasing: 'quadraticOut'
}
])
}
const getAllApi = async () => {
await Promise.all([getCount(), getUserAccessSource(), getWeeklyUserActivity(), getMonthlySales()])
loading.value = false
}
getAllApi()
</script>
<style lang="scss" scoped>
$prefix-cls: #{$namespace}-panel;
.#{$prefix-cls} {
&__item {
&--peoples {
color: #40c9c6;
}
&--message {
color: #36a3f7;
}
&--money {
color: #f4516c;
}
&--shopping {
color: #34bfa3;
}
&:hover {
:deep(.#{$namespace}-icon) {
color: #fff !important;
}
.#{$prefix-cls}__item--icon {
transition: all 0.38s ease-out;
}
.#{$prefix-cls}__item--peoples {
background: #40c9c6;
}
.#{$prefix-cls}__item--message {
background: #36a3f7;
}
.#{$prefix-cls}__item--money {
background: #f4516c;
}
.#{$prefix-cls}__item--shopping {
background: #34bfa3;
}
}
}
}
</style>

336
src/views/home/components/material.vue
View File

@ -0,0 +1,336 @@
<!-- 原料管理员首页 -->
<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="materialData?.warningBalanceList"
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>
<Echart :options="barOptions" :height="280" :key="lineIndex" />
</div>
</div>
</div>
</template>
<script lang="ts" setup>
import * as IndexApi from '@/api/home'
import { formatDate } from '@/utils/formatTime'
import { DICT_TYPE, getStrDictOptions } from '@/utils/dict'
import { set } from 'lodash-es'
import { EChartsOption } from 'echarts'
import { barOptions } from '../echarts-data'
const lineIndex = ref(0)
const materialData = ref()
// 获取原料管理员数据
const getMaterialData = async () => {
await IndexApi.getMaterialData().then((res) => {
materialData.value = res
getJobCharts()
})
}
const formatter = (type, dict) => {
let str = getStrDictOptions(dict).filter((item) => type == item.value)[0]?.label
return str
}
const barOptionsData = reactive<EChartsOption>(barOptions) as EChartsOption
const getJobCharts = async () => {
set(
barOptionsData,
'xAxis.data',
Object.keys( materialData.value.jobCount)
)
set(barOptionsData, 'legend.data', ['待处理任务'])
set(barOptionsData, 'series', [
{
name:'待处理任务',
data: Object.values( materialData.value.jobCount),
type: 'bar',
barMaxWidth:30
}
])
lineIndex.value++
}
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>

286
src/views/home/components/produce.vue
View File

@ -0,0 +1,286 @@
<!-- 生产管理员首页 -->
<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>
<Echart :options="barOptions" :height="280" :key="lineIndex" />
</div>
</div>
</div>
</template>
<script lang="ts" setup>
import * as IndexApi from '@/api/home'
import { formatDate } from '@/utils/formatTime'
import { DICT_TYPE, getStrDictOptions } from '@/utils/dict'
import { set } from 'lodash-es'
import { EChartsOption } from 'echarts'
import { barOptions } from '../echarts-data'
const lineIndex = ref(0)
const produceData = ref()
// 获取生产管理员首页数据
const getProduceData = async () => {
IndexApi.getProduceData().then((res) => {
produceData.value = res
getJobCharts()
})
}
const formatter = (type, dict) => {
let str = getStrDictOptions(dict).filter((item) => type == item.value)[0]?.label
return str
}
const barOptionsData = reactive<EChartsOption>(barOptions) as EChartsOption
const getJobCharts = async () => {
set(
barOptionsData,
'xAxis.data',
Object.keys( produceData.value.jobCount)
)
set(barOptionsData, 'legend.data', ['待处理任务'])
set(barOptionsData, 'series', [
{
name:'待处理任务',
data: Object.values( produceData.value.jobCount),
type: 'bar',
barMaxWidth:30
}
])
lineIndex.value++
}
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>

313
src/views/home/components/product.vue
View File

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

452
src/views/home/components/supplierIndex.vue
View File

@ -0,0 +1,452 @@
<!-- 供应商首页 -->
<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>

286
src/views/home/echarts-data.ts
View File

@ -0,0 +1,286 @@
import { EChartsOption } from 'echarts'
const { t } = useI18n()
export const lineOptions: EChartsOption = {
xAxis: {
data: [ 1, 2, 3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30
],
boundaryGap: false,
axisTick: {
show: false
}
},
grid: {
left: 20,
right: 20,
bottom: 20,
top: 50,
containLabel: true
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross'
},
padding: [5, 10]
},
yAxis: {
axisTick: {
show: false
}
},
legend: {
data: ['销售','哈哈'],
top: 20
},
series: [
{
name: '销售',
smooth: true,
type: 'line',
data: [100, 120, 161, 134, 105, 160, 165, 114, 163, 185, 118, 123],
animationDuration: 2800,
animationEasing: 'cubicInOut'
},
{
name: '哈哈',
smooth: true,
type: 'line',
itemStyle: {},
data: [120, 82, 91, 154, 162, 140, 145, 250, 134, 56, 99, 123],
animationDuration: 2800,
animationEasing: 'quadraticOut'
}
]
}
export const pieOptions: EChartsOption = {
// title: {
// text: t('analysis.userAccessSource'),
// left: 'center'
// },
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b} : {c} ({d}%)'
},
legend: {
orient: 'vertical',
left: 'left',
top:20,
data: [
t('analysis.directAccess'),
t('analysis.mailMarketing'),
t('analysis.allianceAdvertising'),
t('analysis.videoAdvertising'),
t('analysis.searchEngines')
]
},
series: [
{
name: t('analysis.userAccessSource'),
type: 'pie',
radius: '55%',
center: ['50%', '60%'],
data: [
{ value: 335, name: t('analysis.directAccess') },
{ value: 310, name: t('analysis.mailMarketing') },
{ value: 234, name: t('analysis.allianceAdvertising') },
{ value: 135, name: t('analysis.videoAdvertising') },
{ value: 1548, name: t('analysis.searchEngines') }
]
}
]
}
export const barOptions: EChartsOption = {
title: {
text: '',
left: 'center'
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
grid: {
left: 50,
right: 20,
bottom: 20
},
xAxis: {
type: 'category',
data: [],
axisTick: {
alignWithLabel: true
}
},
yAxis: {
type: 'value'
},
series: [
{
name: t('analysis.activeQuantity'),
data: [],
type: 'bar'
}
]
}
export const radarOption: EChartsOption = {
legend: {
data: [t('workplace.personal'), t('workplace.team')]
},
radar: {
// shape: 'circle',
indicator: [
{ name: t('workplace.quote'), max: 65 },
{ name: t('workplace.contribution'), max: 160 },
{ name: t('workplace.hot'), max: 300 },
{ name: t('workplace.yield'), max: 130 },
{ name: t('workplace.follow'), max: 100 }
]
},
series: [
{
name: `xxx${t('workplace.index')}`,
type: 'radar',
data: [
{
value: [42, 30, 20, 35, 80],
name: t('workplace.personal')
},
{
value: [50, 140, 290, 100, 90],
name: t('workplace.team')
}
]
}
]
}
export const wordOptions = {
series: [
{
type: 'wordCloud',
gridSize: 2,
sizeRange: [12, 50],
rotationRange: [-90, 90],
shape: 'pentagon',
width: 600,
height: 400,
drawOutOfBound: true,
textStyle: {
color: function () {
return (
'rgb(' +
[
Math.round(Math.random() * 160),
Math.round(Math.random() * 160),
Math.round(Math.random() * 160)
].join(',') +
')'
)
}
},
emphasis: {
textStyle: {
shadowBlur: 10,
shadowColor: '#333'
}
},
data: [
{
name: 'Sam S Club',
value: 10000,
textStyle: {
color: 'black'
},
emphasis: {
textStyle: {
color: 'red'
}
}
},
{
name: 'Macys',
value: 6181
},
{
name: 'Amy Schumer',
value: 4386
},
{
name: 'Jurassic World',
value: 4055
},
{
name: 'Charter Communications',
value: 2467
},
{
name: 'Chick Fil A',
value: 2244
},
{
name: 'Planet Fitness',
value: 1898
},
{
name: 'Pitch Perfect',
value: 1484
},
{
name: 'Express',
value: 1112
},
{
name: 'Home',
value: 965
},
{
name: 'Johnny Depp',
value: 847
},
{
name: 'Lena Dunham',
value: 582
},
{
name: 'Lewis Hamilton',
value: 555
},
{
name: 'KXAN',
value: 550
},
{
name: 'Mary Ellen Mark',
value: 462
},
{
name: 'Farrah Abraham',
value: 366
},
{
name: 'Rita Ora',
value: 360
},
{
name: 'Serena Williams',
value: 282
},
{
name: 'NCAA baseball tournament',
value: 273
},
{
name: 'Point Break',
value: 265
}
]
}
]
}

14
src/views/home/index.vue
View File

@ -0,0 +1,14 @@
<template>
<div>
<supplierIndex v-hasRole="['super_admin','supplier']"/>
<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 material from './components/material.vue'
import product from './components/product.vue'
import produce from './components/produce.vue'
</script>

55
src/views/home/types.ts
View File

@ -0,0 +1,55 @@
export type WorkplaceTotal = {
project: number
access: number
todo: number
}
export type Project = {
name: string
icon: string
message: string
personal: string
time: Date | number | string
}
export type Notice = {
title: string
type: string
keys: string[]
date: Date | number | string
}
export type Shortcut = {
name: string
icon: string
url: string
}
export type RadarData = {
personal: number
team: number
max: number
name: string
}
export type AnalysisTotalTypes = {
users: number
messages: number
moneys: number
shoppings: number
}
export type UserAccessSource = {
value: number
name: string
}
export type WeeklyUserActivity = {
value: number
name: string
}
export type MonthlySales = {
name: string
estimate: number
actual: number
}
Write Preview
Loading…
Cancel
Save