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

首页

master
zhang_li 12 months ago
parent
e427e49f5d
commit
aed858b4c2
13 changed files with 1249 additions and 401 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. BIN
      src/assets/imgs/icon1.png
  2. BIN
      src/assets/imgs/icon2.png
  3. BIN
      src/assets/imgs/icon3.png
  4. BIN
      src/assets/imgs/icon4.png
  5. BIN
      src/assets/imgs/icon5.png
  6. BIN
      src/assets/imgs/icon6.png
  7. 381
      src/views/Home/Index copy.vue
  8. 383
      src/views/Home/Index.vue
  9. 172
      src/views/Home/components/productWarehouseKeeper.vue
  10. 162
      src/views/Home/components/productionManager.vue
  11. 322
      src/views/Home/components/supplierIndex.vue
  12. 192
      src/views/Home/components/warehouseKeeper.vue
  13. 38
      src/views/Home/echarts-data.ts

BIN
src/assets/imgs/icon1.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.0 KiB

BIN
src/assets/imgs/icon2.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.0 KiB

BIN
src/assets/imgs/icon3.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 10 KiB

BIN
src/assets/imgs/icon4.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 10 KiB

BIN
src/assets/imgs/icon5.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.2 KiB

BIN
src/assets/imgs/icon6.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.3 KiB

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>

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

@ -1,381 +1,14 @@
<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>
<supplierIndex/>
<warehouseKeeper v-hasRole="['role2']"/>
<productWarehouseKeeper v-hasRole="['role3']"/>
<productionManager v-hasRole="['role4']"/>
</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()
import supplierIndex from './components/supplierIndex.vue'
import warehouseKeeper from './components/warehouseKeeper.vue'
import productWarehouseKeeper from './components/productWarehouseKeeper.vue'
import productionManager from './components/productionManager.vue'
</script>

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

@ -0,0 +1,172 @@
<template>
<div class="row">
<div class="data">
<div class="small-data-item small-data-item1">
<div class="small-data-item-txt">
<div>今日到货计划(已发货)</div>
<div>22<span>单</span></div>
</div>
<img src="../../../assets/imgs/icon1.png" alt="" class="img" />
</div>
</div>
<div class="two-row mt-14px">
<div class="data1 w-[50%]">
<div class="title">呆滞库存预警</div>
<el-table :data="tableData" style="width: 100%" stripe height="240px">
<el-table-column prop="title" label="标题" />
<el-table-column prop="name" label="发布人" />
<el-table-column prop="date" label="发布日期" />
</el-table>
</div>
<div class="data1 w-[50%] ml-14px">
<div class="title">超期库存预警</div>
<el-table :data="tableData" style="width: 100%" stripe height="240px">
<el-table-column prop="title" label="标题" />
<el-table-column prop="name" label="发布人" />
<el-table-column prop="date" label="发布日期" />
</el-table>
</div>
</div>
<div class="two-row mt-14px">
<div class="data1 w-[50%]">
<div class="title">高低储预警</div>
<el-table :data="tableData" style="width: 100%" stripe height="240px">
<el-table-column prop="title" label="标题" />
<el-table-column prop="name" label="发布人" />
<el-table-column prop="date" label="发布日期" />
</el-table>
</div>
<div class="data1 w-[50%] ml-14px">
<div class="title">待处理任务</div>
<el-table :data="tableData" style="width: 100%" stripe height="240px">
<el-table-column prop="title" label="标题" />
<el-table-column prop="name" label="发布人" />
<el-table-column prop="date" label="发布日期" />
</el-table>
</div>
</div>
</div>
</template>
<script lang="ts" setup>
const tableData = [
{
date: '2016-05-03',
name: 'Tom',
title: 'Tom',
text: 'No. 189, Grove St, Los Angeles'
},
{
date: '2016-05-02',
title: 'Tom',
name: 'Tom',
text: 'No. 189, Grove St, Los Angeles'
},
{
date: '2016-05-04',
title: 'Tom',
name: 'Tom',
text: 'No. 189, Grove St, Los Angeles'
},
{
date: '2016-05-01',
title: 'Tom',
name: 'Tom',
text: 'No. 189, Grove St, Los Angeles'
},
{
date: '2016-05-01',
title: 'Tom',
name: 'Tom',
text: 'No. 189, Grove St, Los Angeles'
},
{
date: '2016-05-01',
title: 'Tom',
name: 'Tom',
text: 'No. 189, Grove St, Los Angeles'
}
]
</script>
<style scoped lang="scss">
.title {
padding-bottom: 10px;
border-bottom: 1px solid #dedede;
position: relative;
padding-left: 10px;
&::after {
content: '';
position: absolute;
width: 4px;
height: 16px;
background: #3c7adf;
left: 0px;
top: 3px;
border-radius: 8px;
}
}
.data {
display: flex;
align-items: center;
justify-content: space-between;
.small-data-item {
width:25%;
height: 90px;
display: flex;
align-items: center;
border-radius: 6px;
color: white;
padding: 0px 20px;
.small-data-item-txt {
flex: 1;
div {
&:nth-child(1) {
font-size: 14px;
}
&:nth-child(2) {
font-size: 26px;
margin-top: 4px;
font-weight: bold;
span {
font-size: 14px;
padding-left: 6px;
font-weight: normal;
}
}
}
}
.img {
width: 40px;
opacity: 0.5;
}
}
.small-data-item1 {
background: linear-gradient(to left, #fd817d, #fcad80);
}
.small-data-item2 {
background: linear-gradient(to left, #46c6fa, #336bfe);
}
.small-data-item3 {
background: linear-gradient(to left, #96a6cc, #595f82);
}
.small-data-item4 {
background: linear-gradient(to left, #08dcd5, #46e2bb);
}
.small-data-item5 {
background: linear-gradient(to left, #f4c46b, #ffb313);
}
.small-data-item6 {
background: linear-gradient(to left, #6eccf8, #02acfd);
}
}
.two-row {
display: flex;
align-content: center;
.data1 {
background: white;
padding: 14px;
}
}
</style>

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

@ -0,0 +1,162 @@
<template>
<div class="row">
<div class="two-row">
<div class="data1 w-[50%]">
<div class="title">今日生产计划</div>
<el-table :data="tableData" style="width: 100%" stripe height="240px">
<el-table-column prop="title" label="标题" />
<el-table-column prop="name" label="发布人" />
<el-table-column prop="date" label="发布日期" />
</el-table>
</div>
<div class="data1 w-[50%] ml-14px">
<div class="title">线边安全库存</div>
<el-table :data="tableData" style="width: 100%" stripe height="240px">
<el-table-column prop="title" label="标题" />
<el-table-column prop="name" label="发布人" />
<el-table-column prop="date" label="发布日期" />
</el-table>
</div>
</div>
<div class="two-row mt-14px">
<div class="data1 w-[50%]">
<div class="title">待上架成品库存</div>
<el-table :data="tableData" style="width: 100%" stripe height="240px">
<el-table-column prop="title" label="标题" />
<el-table-column prop="name" label="发布人" />
<el-table-column prop="date" label="发布日期" />
</el-table>
</div>
<div class="data1 w-[50%] ml-14px">
<div class="title">待处理任务</div>
<el-table :data="tableData" style="width: 100%" stripe height="240px">
<el-table-column prop="title" label="标题" />
<el-table-column prop="name" label="发布人" />
<el-table-column prop="date" label="发布日期" />
</el-table>
</div>
</div>
</div>
</template>
<script lang="ts" setup>
const tableData = [
{
date: '2016-05-03',
name: 'Tom',
title: 'Tom',
text: 'No. 189, Grove St, Los Angeles'
},
{
date: '2016-05-02',
title: 'Tom',
name: 'Tom',
text: 'No. 189, Grove St, Los Angeles'
},
{
date: '2016-05-04',
title: 'Tom',
name: 'Tom',
text: 'No. 189, Grove St, Los Angeles'
},
{
date: '2016-05-01',
title: 'Tom',
name: 'Tom',
text: 'No. 189, Grove St, Los Angeles'
},
{
date: '2016-05-01',
title: 'Tom',
name: 'Tom',
text: 'No. 189, Grove St, Los Angeles'
},
{
date: '2016-05-01',
title: 'Tom',
name: 'Tom',
text: 'No. 189, Grove St, Los Angeles'
}
]
</script>
<style scoped lang="scss">
.title {
padding-bottom: 10px;
border-bottom: 1px solid #dedede;
position: relative;
padding-left: 10px;
&::after {
content: '';
position: absolute;
width: 4px;
height: 16px;
background: #3c7adf;
left: 0px;
top: 3px;
border-radius: 8px;
}
}
.data {
display: flex;
align-items: center;
justify-content: space-between;
.small-data-item {
width:25%;
height: 90px;
display: flex;
align-items: center;
border-radius: 6px;
color: white;
padding: 0px 20px;
.small-data-item-txt {
flex: 1;
div {
&:nth-child(1) {
font-size: 14px;
}
&:nth-child(2) {
font-size: 26px;
margin-top: 4px;
font-weight: bold;
span {
font-size: 14px;
padding-left: 6px;
font-weight: normal;
}
}
}
}
.img {
width: 40px;
opacity: 0.5;
}
}
.small-data-item1 {
background: linear-gradient(to left, #fd817d, #fcad80);
}
.small-data-item2 {
background: linear-gradient(to left, #46c6fa, #336bfe);
}
.small-data-item3 {
background: linear-gradient(to left, #96a6cc, #595f82);
}
.small-data-item4 {
background: linear-gradient(to left, #08dcd5, #46e2bb);
}
.small-data-item5 {
background: linear-gradient(to left, #f4c46b, #ffb313);
}
.small-data-item6 {
background: linear-gradient(to left, #6eccf8, #02acfd);
}
}
.two-row {
display: flex;
align-content: center;
.data1 {
background: white;
padding: 14px;
}
}
</style>

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

@ -0,0 +1,322 @@
<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>22<span>单</span></div>
<div>开发订单数</div>
</div>
<img src="../../../assets/imgs/icon1.png" alt="" class="img" />
</div>
<div class="small-data-item small-data-item2 ml-14px">
<div class="small-data-item-txt">
<div>2456<span>单</span></div>
<div>全部订单数</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>255<span>单</span></div>
<div>开放计划数</div>
</div>
<img src="../../../assets/imgs/icon6.png" alt="" class="img" />
</div>
<div class="small-data-item small-data-item4 ml-14px">
<div class="small-data-item-txt">
<div>2555<span>单</span></div>
<div>全部计划数</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>255<span>单</span></div>
<div>未收货订单数</div>
</div>
<img src="../../../assets/imgs/icon4.png" alt="" class="img" />
</div>
<div class="small-data-item small-data-item6 ml-14px">
<div class="small-data-item-txt">
<div>2555<span>单</span></div>
<div>已收货订单数</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" />
</div>
<div class="data1 w-[35%] ml-14px">
<div class="title">本月发货零件TOP10</div>
<Echart :options="pieOptions" :height="280" />
</div>
</div>
<div class="two-row mt-14px">
<div class="data1 w-[50%]">
<div class="title">最新消息</div>
<el-table :data="tableData" style="width: 100%" stripe height="240px">
<el-table-column prop="title" label="标题" />
<el-table-column prop="name" label="发布人" />
<el-table-column prop="date" label="发布日期" />
</el-table>
</div>
<div class="data1 w-[50%] ml-14px">
<div class="title">最新扣分明细</div>
<el-table :data="tableData" style="width: 100%" stripe height="240px">
<el-table-column prop="title" label="标题" />
<el-table-column prop="name" label="发布人" />
<el-table-column prop="date" label="发布日期" />
</el-table>
</div>
</div>
<div class="two-row mt-14px">
<div class="data1 w-[50%]">
<div class="title">本月退货明细</div>
<el-table :data="tableData" style="width: 100%" stripe height="240px">
<el-table-column prop="title" label="标题" />
<el-table-column prop="name" label="发布人" />
<el-table-column prop="date" label="发布日期" />
</el-table>
</div>
<div class="data1 w-[50%] ml-14px">
<div class="title">本月索赔明细</div>
<el-table :data="tableData" style="width: 100%" stripe height="240px">
<el-table-column prop="title" label="标题" />
<el-table-column prop="name" label="发布人" />
<el-table-column prop="date" label="发布日期" />
</el-table>
</div>
</div>
</div>
</template>
<script lang="ts" setup>
import { set } from 'lodash-es'
import { EChartsOption } from 'echarts'
import { lineOptions, pieOptions } from '../echarts-data'
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 lineOptionsData = reactive<EChartsOption>(lineOptions) as EChartsOption
const getInvoiceCharts = async () => {
const data = [
{ value: 20, name: '1日' },
{ value: 50, name: '2日' },
{ value: 250, name: '3日' },
{ value: 220, name: '4日' },
{ value: 230, name: '5日' },
{ value: 160, name: '6日' },
{ value: 120, name: '7日' },
{ value: 160, name: '8日' },
{ value: 130, name: '9日' },
{ value: 240, name: '10日' },
{ value: 230, name: '11日' },
{ value: 100, name: '12日' },
{ value: 40, name: '13日' },
{ value: 80, name: '14日' },
{ value: 30, name: '15日' },
{ value: 88, name: '16日' },
{ value: 134, name: '17日' },
{ value: 156, name: '18日' },
{ value: 143, name: '19日' },
{ value: 240, name: '20日' },
{ value: 160, name: '21日' },
{ value: 160, name: '22日' },
{ value: 160, name: '23日' },
{ value: 160, name: '24日' },
{ value: 160, name: '25日' },
{ value: 160, name: '26日' },
{ value: 160, name: '27日' },
{ value: 160, name: '28日' },
{ value: 160, name: '29日' },
{ value: 160, name: '30日' }
]
set(
lineOptionsData,
'xAxis.data',
data.map((v) => t(v.name))
)
set(lineOptionsData, 'series', [
{
name: '哈哈',
smooth: true,
type: 'line',
itemStyle: {},
animationDuration: 2800,
animationEasing: 'quadraticOut',
data: data.map((v) => v.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' }
]
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
}
})
}
getInvoiceCharts()
getPartTOPCharts()
</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;
.data1 {
background: white;
padding: 14px;
}
}
</style>

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

@ -0,0 +1,192 @@
<template>
<div class="row">
<div class="data">
<div class="small-data-item small-data-item1">
<div class="small-data-item-txt">
<div>今日到货计划(已发货)</div>
<div>22<span>单</span></div>
</div>
<img src="../../../assets/imgs/icon1.png" alt="" class="img" />
</div>
<div class="small-data-item small-data-item2 ml-14px">
<div class="small-data-item-txt">
<div>今日备料计划(已发料)</div>
<div>2456<span>单</span></div>
</div>
<img src="../../../assets/imgs/icon5.png" alt="" class="img" />
</div>
<div class="small-data-item small-data-item3 ml-14px">
<div class="small-data-item-txt">
<div>今日叫料请求(已发料)</div>
<div>255<span>单</span></div>
</div>
<img src="../../../assets/imgs/icon6.png" alt="" class="img" />
</div>
<div class="small-data-item small-data-item4 ml-14px">
<div class="small-data-item-txt">
<div>空闲库位数/总库位数</div>
<div style="font-size: 20px;">2555<span>个</span>/65555<span>个</span></div>
</div>
<img src="../../../assets/imgs/icon3.png" alt="" class="img" />
</div>
</div>
<div class="two-row mt-14px">
<div class="data1 w-[50%]">
<div class="title">呆滞库存预警</div>
<el-table :data="tableData" style="width: 100%" stripe height="240px">
<el-table-column prop="title" label="标题" />
<el-table-column prop="name" label="发布人" />
<el-table-column prop="date" label="发布日期" />
</el-table>
</div>
<div class="data1 w-[50%] ml-14px">
<div class="title">超期库存预警</div>
<el-table :data="tableData" style="width: 100%" stripe height="240px">
<el-table-column prop="title" label="标题" />
<el-table-column prop="name" label="发布人" />
<el-table-column prop="date" label="发布日期" />
</el-table>
</div>
</div>
<div class="two-row mt-14px">
<div class="data1 w-[50%]">
<div class="title">高低储预警</div>
<el-table :data="tableData" style="width: 100%" stripe height="240px">
<el-table-column prop="title" label="标题" />
<el-table-column prop="name" label="发布人" />
<el-table-column prop="date" label="发布日期" />
</el-table>
</div>
<div class="data1 w-[50%] ml-14px">
<div class="title">待处理任务</div>
<el-table :data="tableData" style="width: 100%" stripe height="240px">
<el-table-column prop="title" label="标题" />
<el-table-column prop="name" label="发布人" />
<el-table-column prop="date" label="发布日期" />
</el-table>
</div>
</div>
</div>
</template>
<script lang="ts" setup>
const tableData = [
{
date: '2016-05-03',
name: 'Tom',
title: 'Tom',
text: 'No. 189, Grove St, Los Angeles'
},
{
date: '2016-05-02',
title: 'Tom',
name: 'Tom',
text: 'No. 189, Grove St, Los Angeles'
},
{
date: '2016-05-04',
title: 'Tom',
name: 'Tom',
text: 'No. 189, Grove St, Los Angeles'
},
{
date: '2016-05-01',
title: 'Tom',
name: 'Tom',
text: 'No. 189, Grove St, Los Angeles'
},
{
date: '2016-05-01',
title: 'Tom',
name: 'Tom',
text: 'No. 189, Grove St, Los Angeles'
},
{
date: '2016-05-01',
title: 'Tom',
name: 'Tom',
text: 'No. 189, Grove St, Los Angeles'
}
]
</script>
<style scoped lang="scss">
.title {
padding-bottom: 10px;
border-bottom: 1px solid #dedede;
position: relative;
padding-left: 10px;
&::after {
content: '';
position: absolute;
width: 4px;
height: 16px;
background: #3c7adf;
left: 0px;
top: 3px;
border-radius: 8px;
}
}
.data {
display: flex;
align-items: center;
justify-content: space-between;
.small-data-item {
width:25%;
height: 90px;
display: flex;
align-items: center;
border-radius: 6px;
color: white;
padding: 0px 20px;
.small-data-item-txt {
flex: 1;
div {
&:nth-child(1) {
font-size: 14px;
}
&:nth-child(2) {
font-size: 26px;
margin-top: 4px;
font-weight: bold;
span {
font-size: 14px;
padding-left: 6px;
font-weight: normal;
}
}
}
}
.img {
width: 40px;
opacity: 0.5;
}
}
.small-data-item1 {
background: linear-gradient(to left, #fd817d, #fcad80);
}
.small-data-item2 {
background: linear-gradient(to left, #46c6fa, #336bfe);
}
.small-data-item3 {
background: linear-gradient(to left, #96a6cc, #595f82);
}
.small-data-item4 {
background: linear-gradient(to left, #08dcd5, #46e2bb);
}
.small-data-item5 {
background: linear-gradient(to left, #f4c46b, #ffb313);
}
.small-data-item6 {
background: linear-gradient(to left, #6eccf8, #02acfd);
}
}
.two-row {
display: flex;
align-content: center;
.data1 {
background: white;
padding: 14px;
}
}
</style>

38
src/views/Home/echarts-data.ts
View File

@ -3,24 +3,9 @@ import { EChartsOption } from 'echarts'
const { t } = useI18n()
export const lineOptions: EChartsOption = {
title: {
text: t('analysis.monthlySales'),
left: 'center'
},
xAxis: {
data: [
t('analysis.january'),
t('analysis.february'),
t('analysis.march'),
t('analysis.april'),
t('analysis.may'),
t('analysis.june'),
t('analysis.july'),
t('analysis.august'),
t('analysis.september'),
t('analysis.october'),
t('analysis.november'),
t('analysis.december')
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: {
@ -31,7 +16,7 @@ export const lineOptions: EChartsOption = {
left: 20,
right: 20,
bottom: 20,
top: 80,
top: 50,
containLabel: true
},
tooltip: {
@ -47,12 +32,12 @@ export const lineOptions: EChartsOption = {
}
},
legend: {
data: [t('analysis.estimate'), t('analysis.actual')],
top: 50
data: ['销售','哈哈'],
top: 20
},
series: [
{
name: t('analysis.estimate'),
name: '销售',
smooth: true,
type: 'line',
data: [100, 120, 161, 134, 105, 160, 165, 114, 163, 185, 118, 123],
@ -60,7 +45,7 @@ export const lineOptions: EChartsOption = {
animationEasing: 'cubicInOut'
},
{
name: t('analysis.actual'),
name: '哈哈',
smooth: true,
type: 'line',
itemStyle: {},
@ -72,10 +57,10 @@ export const lineOptions: EChartsOption = {
}
export const pieOptions: EChartsOption = {
title: {
text: t('analysis.userAccessSource'),
left: 'center'
},
// title: {
// text: t('analysis.userAccessSource'),
// left: 'center'
// },
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b} : {c} ({d}%)'
@ -83,6 +68,7 @@ export const pieOptions: EChartsOption = {
legend: {
orient: 'vertical',
left: 'left',
top:20,
data: [
t('analysis.directAccess'),
t('analysis.mailMarketing'),

Write Preview
Loading…
Cancel
Save