2 changed files with 998 additions and 345 deletions
@ -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> |
|||
@ -1,381 +1,653 @@ |
|||
<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℃！ |
|||
<ContentWrap class="search"> |
|||
<el-form |
|||
:inline="true" |
|||
:model="queryParams" |
|||
class="demo-form-inline" |
|||
style="margin-bottom: -17px" |
|||
> |
|||
<el-form-item label="" label-width="0px" style="width: calc(20% - 32px)"> |
|||
<el-select |
|||
v-model="queryParams.project" |
|||
placeholder="请选择项目" |
|||
clearable |
|||
style="width: 100%" |
|||
> |
|||
<el-option label="Zone one" value="shanghai" /> |
|||
<el-option label="Zone two" value="beijing" /> |
|||
</el-select> |
|||
</el-form-item> |
|||
<el-form-item label="" label-width="0px" style="width: calc(20% - 32px)"> |
|||
<el-input |
|||
v-model="queryParams.code" |
|||
placeholder="请输入物料编号" |
|||
clearable |
|||
style="width: 100%" |
|||
/> |
|||
</el-form-item> |
|||
<el-form-item label="" label-width="0px" style="width: calc(20% - 32px)"> |
|||
<el-select |
|||
v-model="queryParams.type" |
|||
placeholder="请选择检测类型" |
|||
clearable |
|||
style="width: 100%" |
|||
> |
|||
<el-option label="Zone one" value="shanghai" /> |
|||
<el-option label="Zone two" value="beijing" /> |
|||
</el-select> |
|||
</el-form-item> |
|||
<el-form-item label="" label-width="0px" style="width: calc(20% - 32px)"> |
|||
<el-input |
|||
v-model="queryParams.content" |
|||
placeholder="请输入检测内容" |
|||
clearable |
|||
style="width: 100%" |
|||
/> |
|||
</el-form-item> |
|||
<el-form-item label="" label-width="0px" style="width: calc(20% - 32px)"> |
|||
<el-date-picker |
|||
v-model="queryParams.date" |
|||
type="date" |
|||
placeholder="请选择日期" |
|||
clearable |
|||
/> |
|||
</el-form-item> |
|||
</el-form> |
|||
</ContentWrap> |
|||
<ContentWrap class="search"> |
|||
<div class="title">制程能力指数（CPK）</div> |
|||
<div class="cpk"> |
|||
<div class="cpk-item"> |
|||
<div class="cpk-item-1"> |
|||
<div class="cpk-item-label">CP</div> |
|||
<div class="cpk-item-value">0.25</div> |
|||
</div> |
|||
<div class="cpk-item-1"> |
|||
<div class="cpk-item-label">CPK</div> |
|||
<div class="cpk-item-value">0.11</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 class="cpk-item"> |
|||
<div class="cpk-item-1"> |
|||
<div class="cpk-item-label">CP</div> |
|||
<div class="cpk-item-value">0.25</div> |
|||
</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 class="cpk-item-1"> |
|||
<div class="cpk-item-label">CPK</div> |
|||
<div class="cpk-item-value">0.11</div> |
|||
</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 class="cpk-item1"> |
|||
<div class="cpk-item-2"> |
|||
<div class="cpk-item-label"><span>零件号</span> <span>1662525525</span></div> |
|||
<div class="cpk-item-label"><span>检测内容</span> <span>25+0.6 G10</span></div> |
|||
</div> |
|||
</el-col> |
|||
</el-row> |
|||
</el-skeleton> |
|||
</el-card> |
|||
<div class="cpk-item-2"> |
|||
<div class="cpk-item-label"><span>公差下限</span> <span>24.4</span></div> |
|||
<div class="cpk-item-label"><span>公差上限</span> <span>25.6</span></div> |
|||
</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 class="cpk-item-2"> |
|||
<div class="cpk-item-label"><span>X中值</span> <span>24.4</span></div> |
|||
<div class="cpk-item-label"><span>R中值</span> <span>1.88</span></div> |
|||
</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 class="cpk-item-2"> |
|||
<div class="cpk-item-label"><span>UCLx</span> <span>25.66666</span></div> |
|||
<div class="cpk-item-label"><span>UCLx</span> <span>23.55555</span></div> |
|||
</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 class="cpk-item-2"> |
|||
<div class="cpk-item-label"><span>LCLrc</span> <span>25.66666</span></div> |
|||
<div class="cpk-item-label"><span>LCLrc</span> <span>0</span></div> |
|||
</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> |
|||
<table border="1" width="100%" align="center" border-collapse="collapse"> |
|||
<tr class="td-bg"> |
|||
<td colspan="2">样本</td> |
|||
<td>1</td> |
|||
<td>2</td> |
|||
<td>3</td> |
|||
<td>4</td> |
|||
<td>5</td> |
|||
<td>6</td> |
|||
<td>7</td> |
|||
<td>8</td> |
|||
<td>9</td> |
|||
<td>10</td> |
|||
<td>12</td> |
|||
<td>13</td> |
|||
<td>14</td> |
|||
<td>15</td> |
|||
<td>16</td> |
|||
<td>17</td> |
|||
<td>18</td> |
|||
<td>19</td> |
|||
<td>20</td> |
|||
<td>21</td> |
|||
<td>22</td> |
|||
<td>23</td> |
|||
<td>24</td> |
|||
<td>25</td> |
|||
</tr> |
|||
<tr> |
|||
<td rowspan="8" class="td-bg">检测记录</td> |
|||
<td class="td-bg">1</td> |
|||
<td>24</td> |
|||
<td>25</td> |
|||
<td>24</td> |
|||
<td>24</td> |
|||
<td>24</td> |
|||
<td>24</td> |
|||
</tr> |
|||
<tr> |
|||
<td class="td-bg">2</td> |
|||
<td>24</td> |
|||
<td>25</td> |
|||
<td>24</td> |
|||
<td>24</td> |
|||
<td>24</td> |
|||
<td>24</td> |
|||
</tr> |
|||
<tr> |
|||
<td class="td-bg">3</td> |
|||
<td>24</td> |
|||
<td>25</td> |
|||
<td>24</td> |
|||
<td>24</td> |
|||
<td>24</td> |
|||
<td>24</td> |
|||
</tr> |
|||
<tr> |
|||
<td class="td-bg">4</td> |
|||
<td>24</td> |
|||
<td>25</td> |
|||
<td>24</td> |
|||
<td>24</td> |
|||
<td>24</td> |
|||
<td>24</td> |
|||
</tr> |
|||
<tr> |
|||
<td class="td-bg">5</td> |
|||
<td>24</td> |
|||
<td>25</td> |
|||
<td>24</td> |
|||
<td>24</td> |
|||
<td>24</td> |
|||
<td>24</td> |
|||
</tr> |
|||
<tr> |
|||
<td class="td-bg">合计值</td> |
|||
<td>24</td> |
|||
<td>25</td> |
|||
<td>24</td> |
|||
<td>24</td> |
|||
<td>24</td> |
|||
<td>24</td> |
|||
</tr> |
|||
<tr> |
|||
<td class="td-bg">平均值</td> |
|||
<td>24</td> |
|||
<td>25</td> |
|||
<td>24</td> |
|||
<td>24</td> |
|||
<td>24</td> |
|||
<td>24</td> |
|||
</tr> |
|||
<tr> |
|||
<td class="td-bg">极差值</td> |
|||
<td>24</td> |
|||
<td>25</td> |
|||
<td>24</td> |
|||
<td>24</td> |
|||
<td>24</td> |
|||
<td>24</td> |
|||
</tr> |
|||
</table> |
|||
</ContentWrap> |
|||
<ContentWrap class="search"> |
|||
<div class="tabs"> |
|||
<div class="title" :class="tabIndex == 0 ? 'active' : ''" @click="tabIndex = 0">控制图</div> |
|||
<div class="title" :class="tabIndex == 1 ? 'active' : ''" @click="tabIndex = 1" |
|||
>CPK分析图</div |
|||
> |
|||
<div class="title" :class="tabIndex == 2 ? 'active' : ''" @click="tabIndex = 2" |
|||
>样本运行图</div |
|||
> |
|||
<div class="title" :class="tabIndex == 3 ? 'active' : ''" @click="tabIndex = 3" |
|||
>均值运行图</div |
|||
> |
|||
</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 class="charts" v-show="tabIndex == 0"> |
|||
<div id="myEcharts1" :style="{ width: '50%', height: '300px' }"></div> |
|||
<div id="myEcharts2" :style="{ width: '50%', height: '300px' }"></div> |
|||
</div> |
|||
<div class="mt-15px text-12px text-gray-400"> |
|||
{{ formatTime(item.date, 'yyyy-MM-dd') }} |
|||
<div class="charts" v-show="tabIndex == 1"> |
|||
<div id="myEcharts3" :style="{ width: '80vw', height: '300px' }"></div> |
|||
</div> |
|||
<div class="charts" v-show="tabIndex == 2"> |
|||
<div id="myEcharts4" :style="{ width: '80vw', height: '300px' }"></div> |
|||
</div> |
|||
<div class="charts" v-show="tabIndex == 3"> |
|||
<div id="myEcharts5" :style="{ width: '80vw', height: '300px' }"></div> |
|||
</div> |
|||
<el-divider /> |
|||
</ContentWrap> |
|||
</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 |
|||
import * as echarts from 'echarts' |
|||
let echart = echarts |
|||
const queryParams = reactive({ |
|||
project: '', |
|||
code: '', |
|||
type: '', |
|||
content: '', |
|||
date: '' |
|||
}) |
|||
const tabIndex = ref(0) |
|||
// 设置延期未交付数据 |
|||
function setChart1() { |
|||
let chart = echart.init(document.getElementById('myEcharts1'), 'light') |
|||
// 把配置和数据放这里 |
|||
chart.setOption({ |
|||
title: { |
|||
text: 'RANGE CHART' |
|||
}, |
|||
tooltip: { |
|||
trigger: 'axis' |
|||
}, |
|||
legend: { |
|||
data: ['Highest', 'Lowest'], |
|||
top: '0', |
|||
right: '3%' |
|||
}, |
|||
grid: { |
|||
left: '3%', |
|||
right: '4%', |
|||
top: '15%', |
|||
bottom: '10%', |
|||
containLabel: true |
|||
}, |
|||
xAxis: { |
|||
type: 'category', |
|||
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] |
|||
}, |
|||
yAxis: { |
|||
type: 'value' |
|||
}, |
|||
series: [ |
|||
{ |
|||
name: 'Highest', |
|||
data: [150, 230, 224, 218, 135, 147, 260], |
|||
type: 'line', |
|||
markLine: { |
|||
data: [{ type: 'average', name: 'Avg' }] |
|||
} |
|||
}, |
|||
{ |
|||
name: 'Lowest', |
|||
data: [344, 23, 56, 88, 95, 54, 45], |
|||
type: 'line' |
|||
} |
|||
] |
|||
}) |
|||
|
|||
const getCount = async () => { |
|||
const data = { |
|||
project: 40, |
|||
access: 2340, |
|||
todo: 10 |
|||
window.onresize = function () { |
|||
//自适应大小 |
|||
chart.resize() |
|||
} |
|||
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() |
|||
function setChart2() { |
|||
let chart = echart.init(document.getElementById('myEcharts2'), 'light') |
|||
// 把配置和数据放这里 |
|||
chart.setOption({ |
|||
title: { |
|||
text: 'RANGE CHART' |
|||
}, |
|||
{ |
|||
name: 'Vue', |
|||
icon: 'logos:vue', |
|||
message: 'workplace.introduction', |
|||
personal: 'Archer', |
|||
time: new Date() |
|||
tooltip: { |
|||
trigger: 'axis' |
|||
}, |
|||
{ |
|||
name: 'Angular', |
|||
icon: 'logos:angular-icon', |
|||
message: 'workplace.introduction', |
|||
personal: 'Archer', |
|||
time: new Date() |
|||
legend: { |
|||
data: ['Highest', 'Lowest'], |
|||
top: '0', |
|||
right: '3%' |
|||
}, |
|||
{ |
|||
name: 'React', |
|||
icon: 'logos:react', |
|||
message: 'workplace.introduction', |
|||
personal: 'Archer', |
|||
time: new Date() |
|||
grid: { |
|||
left: '3%', |
|||
right: '4%', |
|||
top: '15%', |
|||
bottom: '10%', |
|||
containLabel: true |
|||
}, |
|||
xAxis: { |
|||
type: 'category', |
|||
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] |
|||
}, |
|||
yAxis: { |
|||
type: 'value' |
|||
}, |
|||
series: [ |
|||
{ |
|||
name: 'Webpack', |
|||
icon: 'logos:webpack', |
|||
message: 'workplace.introduction', |
|||
personal: 'Archer', |
|||
time: new Date() |
|||
name: 'Highest', |
|||
data: [150, 230, 224, 218, 135, 147, 260], |
|||
type: 'line' |
|||
}, |
|||
{ |
|||
name: 'Vite', |
|||
icon: 'vscode-icons:file-type-vite', |
|||
message: 'workplace.introduction', |
|||
personal: 'Archer', |
|||
time: new Date() |
|||
name: 'Lowest', |
|||
data: [344, 23, 56, 88, 95, 54, 45], |
|||
type: 'line' |
|||
} |
|||
] |
|||
projects = Object.assign(projects, data) |
|||
}) |
|||
window.onresize = function () { |
|||
//自适应大小 |
|||
chart.resize() |
|||
} |
|||
} |
|||
|
|||
// 获取通知公告 |
|||
let notice = reactive<Notice[]>([]) |
|||
const getNotice = async () => { |
|||
const data = [ |
|||
{ |
|||
title: '系统升级版本', |
|||
type: '通知', |
|||
keys: ['通知', '升级'], |
|||
date: new Date() |
|||
function setChart3() { |
|||
let chart = echart.init(document.getElementById('myEcharts3'), 'light') |
|||
// 把配置和数据放这里 |
|||
chart.setOption({ |
|||
tooltip: { |
|||
trigger: 'axis', |
|||
axisPointer: { |
|||
type: 'cross', |
|||
crossStyle: { |
|||
color: '#999' |
|||
} |
|||
} |
|||
}, |
|||
legend: { |
|||
data: ['Evaporation', 'Precipitation', 'Temperature'] |
|||
}, |
|||
grid: { |
|||
left: '3%', |
|||
right: '4%', |
|||
top: '15%', |
|||
bottom: '10%', |
|||
containLabel: true |
|||
}, |
|||
xAxis: [ |
|||
{ |
|||
type: 'category', |
|||
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'], |
|||
axisPointer: { |
|||
type: 'shadow' |
|||
} |
|||
} |
|||
], |
|||
yAxis: [ |
|||
{ |
|||
title: '系统凌晨维护', |
|||
type: '公告', |
|||
keys: ['公告', '维护'], |
|||
date: new Date() |
|||
type: 'value', |
|||
name: 'Precipitation', |
|||
min: 0, |
|||
max: 250, |
|||
interval: 50, |
|||
axisLabel: { |
|||
formatter: '{value} ml' |
|||
} |
|||
}, |
|||
{ |
|||
title: '系统升级版本', |
|||
type: '通知', |
|||
keys: ['通知', '升级'], |
|||
date: new Date() |
|||
type: 'value', |
|||
name: 'Temperature', |
|||
min: 0, |
|||
max: 25, |
|||
interval: 5, |
|||
axisLabel: { |
|||
formatter: '{value} °C' |
|||
} |
|||
} |
|||
], |
|||
series: [ |
|||
{ |
|||
name: '原数据频率', |
|||
type: 'bar', |
|||
tooltip: { |
|||
valueFormatter: function (value) { |
|||
return value + ' ml' |
|||
} |
|||
}, |
|||
data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3] |
|||
}, |
|||
{ |
|||
title: '系统凌晨维护', |
|||
type: '公告', |
|||
keys: ['公告', '维护'], |
|||
date: new Date() |
|||
name: '正态分布', |
|||
type: 'line', |
|||
yAxisIndex: 1, |
|||
tooltip: { |
|||
valueFormatter: function (value) { |
|||
return value + ' °C' |
|||
} |
|||
}, |
|||
data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2] |
|||
} |
|||
] |
|||
notice = Object.assign(notice, data) |
|||
}) |
|||
window.onresize = function () { |
|||
//自适应大小 |
|||
chart.resize() |
|||
} |
|||
} |
|||
|
|||
// 获取快捷入口 |
|||
let shortcut = reactive<Shortcut[]>([]) |
|||
|
|||
const getShortcut = async () => { |
|||
const data = [ |
|||
{ |
|||
name: 'Github', |
|||
icon: 'akar-icons:github-fill', |
|||
url: 'github.io' |
|||
function setChart4() { |
|||
let chart = echart.init(document.getElementById('myEcharts4'), 'light') |
|||
// 把配置和数据放这里 |
|||
chart.setOption({ |
|||
title: { |
|||
text: '样本运行图' |
|||
}, |
|||
{ |
|||
name: 'Vue', |
|||
icon: 'logos:vue', |
|||
url: 'vuejs.org' |
|||
tooltip: { |
|||
trigger: 'axis' |
|||
}, |
|||
legend: { |
|||
data: ['Highest', 'Lowest'], |
|||
top: '0', |
|||
right: '3%' |
|||
}, |
|||
grid: { |
|||
left: '3%', |
|||
right: '4%', |
|||
top: '15%', |
|||
bottom: '10%', |
|||
containLabel: true |
|||
}, |
|||
xAxis: { |
|||
type: 'category', |
|||
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] |
|||
}, |
|||
yAxis: { |
|||
type: 'value' |
|||
}, |
|||
series: [ |
|||
{ |
|||
name: 'Vite', |
|||
icon: 'vscode-icons:file-type-vite', |
|||
url: 'https://vitejs.dev/' |
|||
name: 'Highest', |
|||
data: [150, 230, 224, 218, 135, 147, 260], |
|||
type: 'line' |
|||
}, |
|||
{ |
|||
name: 'Angular', |
|||
icon: 'logos:angular-icon', |
|||
url: 'github.io' |
|||
name: 'Lowest', |
|||
data: [344, 23, 56, 88, 95, 54, 45], |
|||
type: 'line' |
|||
} |
|||
] |
|||
}) |
|||
window.onresize = function () { |
|||
//自适应大小 |
|||
chart.resize() |
|||
} |
|||
} |
|||
function setChart5() { |
|||
let chart = echart.init(document.getElementById('myEcharts5'), 'light') |
|||
// 把配置和数据放这里 |
|||
chart.setOption({ |
|||
title: { |
|||
text: '均值运行图' |
|||
}, |
|||
tooltip: { |
|||
trigger: 'axis' |
|||
}, |
|||
legend: { |
|||
data: ['Highest', 'Lowest'], |
|||
top: '0', |
|||
right: '3%' |
|||
}, |
|||
grid: { |
|||
left: '3%', |
|||
right: '4%', |
|||
top: '15%', |
|||
bottom: '10%', |
|||
containLabel: true |
|||
}, |
|||
xAxis: { |
|||
type: 'category', |
|||
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] |
|||
}, |
|||
yAxis: { |
|||
type: 'value' |
|||
}, |
|||
series: [ |
|||
{ |
|||
name: 'React', |
|||
icon: 'logos:react', |
|||
url: 'github.io' |
|||
name: 'Highest', |
|||
data: [150, 230, 224, 218, 135, 147, 260], |
|||
type: 'line' |
|||
}, |
|||
{ |
|||
name: 'Webpack', |
|||
icon: 'logos:webpack', |
|||
url: 'github.io' |
|||
name: 'Lowest', |
|||
data: [344, 23, 56, 88, 95, 54, 45], |
|||
type: 'line' |
|||
} |
|||
] |
|||
shortcut = Object.assign(shortcut, data) |
|||
}) |
|||
window.onresize = function () { |
|||
//自适应大小 |
|||
chart.resize() |
|||
} |
|||
} |
|||
onMounted(async () => { |
|||
setChart1() |
|||
setChart2() |
|||
setChart3() |
|||
setChart4() |
|||
setChart5() |
|||
}) |
|||
</script> |
|||
<style lang="scss" scoped> |
|||
.search { |
|||
background: white; |
|||
} |
|||
::v-deep.el-form-item--default .el-form-item__label { |
|||
padding: 0px 20px !important; |
|||
background: rgb(53, 158, 256) !important; |
|||
color: white !important; |
|||
} |
|||
.title { |
|||
margin-bottom: 20px; |
|||
margin-right: 20px; |
|||
} |
|||
.cpk { |
|||
display: flex; |
|||
align-items: center; |
|||
.cpk-item { |
|||
display: flex; |
|||
align-items: center; |
|||
width: 10%; |
|||
margin-right: 10px; |
|||
background: rgb(235, 243, 255); |
|||
border: 1px solid rgb(44, 135, 255); |
|||
height: 60px; |
|||
justify-content: center; |
|||
.cpk-item-1 { |
|||
text-align: center; |
|||
margin: 0px 10px; |
|||
.cpk-item-label { |
|||
color: #a8a8a8; |
|||
font-size: 12px; |
|||
} |
|||
.cpk-item-value { |
|||
color: #000000; |
|||
font-size: 16px; |
|||
} |
|||
} |
|||
} |
|||
.cpk-item1 { |
|||
background: rgb(245, 245, 245); |
|||
flex: 1; |
|||
|
|||
// 用户来源 |
|||
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 |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-around; |
|||
height: 60px; |
|||
.cpk-item-2 { |
|||
.cpk-item-label { |
|||
color: #a8a8a8; |
|||
font-size: 12px; |
|||
span { |
|||
&:nth-child(1) { |
|||
width: 60px; |
|||
display: inline-block; |
|||
text-align: right; |
|||
margin-right: 6px; |
|||
} |
|||
&:nth-child(2) { |
|||
margin-right: 6px; |
|||
color: #000; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
}) |
|||
} |
|||
const barOptionsData = reactive<EChartsOption>(barOptions) as EChartsOption |
|||
table { |
|||
width: 100%; |
|||
/*居中*/ |
|||
margin: 20px auto 0px; |
|||
/*边框*/ |
|||
/* border: 1px solid black; */ |
|||
|
|||
// 周活跃量 |
|||
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' |
|||
} |
|||
]) |
|||
border-collapse: collapse; |
|||
/*设置背景颜色*/ |
|||
/* background-color: #bfa; */ |
|||
} |
|||
|
|||
const getAllApi = async () => { |
|||
await Promise.all([ |
|||
getCount(), |
|||
getProject(), |
|||
getNotice(), |
|||
getShortcut(), |
|||
getUserAccessSource(), |
|||
getWeeklyUserActivity() |
|||
]) |
|||
loading.value = false |
|||
/* |
|||
* 设置边框 |
|||
*/ |
|||
td, |
|||
th { |
|||
border: 1px solid rgb(200, 200, 200); |
|||
text-align: center; |
|||
font-size: 14px; |
|||
} |
|||
|
|||
getAllApi() |
|||
</script> |
|||
/* |
|||
* 设置隔行变色 |
|||
*/ |
|||
// tbody > tr:nth-child(even) { |
|||
// background-color: #bfa; |
|||
// } |
|||
|
|||
/* |
|||
* 鼠标移入到tr以后，改变颜色 |
|||
*/ |
|||
// tr:hover { |
|||
// background-color: #ff0; |
|||
// } |
|||
.td-bg { |
|||
background: rgb(231, 244, 248); |
|||
} |
|||
.tabs { |
|||
display: flex; |
|||
align-items: center; |
|||
> div { |
|||
height: 30px; |
|||
cursor: pointer; |
|||
} |
|||
.active { |
|||
color: rgb(44, 135, 255); |
|||
font-weight: bold; |
|||
border-bottom: 2px solid rgb(44, 135, 255); |
|||
} |
|||
} |
|||
.charts { |
|||
display: flex; |
|||
align-content: center; |
|||
justify-content: center; |
|||
} |
|||
</style> |
|||
Loading…
Reference in new issue