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> |
<template> |
||||
<div> |
<div> |
||||
<el-card shadow="never"> |
<ContentWrap class="search"> |
||||
<el-skeleton :loading="loading" animated> |
<el-form |
||||
<el-row :gutter="20" justify="space-between"> |
:inline="true" |
||||
<el-col :xl="12" :lg="12" :md="12" :sm="24" :xs="24"> |
:model="queryParams" |
||||
<div class="flex items-center"> |
class="demo-form-inline" |
||||
<img :src="avatar" alt="" class="mr-20px h-70px w-70px rounded-[50%]" /> |
style="margin-bottom: -17px" |
||||
<div> |
> |
||||
<div class="text-20px"> |
<el-form-item label="" label-width="0px" style="width: calc(20% - 32px)"> |
||||
{{ t('workplace.welcome') }} {{ username }} {{ t('workplace.happyDay') }} |
<el-select |
||||
</div> |
v-model="queryParams.project" |
||||
<div class="mt-10px text-14px text-gray-500"> |
placeholder="请选择项目" |
||||
{{ t('workplace.toady') }}，20℃ - 32℃！ |
clearable |
||||
</div> |
style="width: 100%" |
||||
</div> |
> |
||||
</div> |
<el-option label="Zone one" value="shanghai" /> |
||||
</el-col> |
<el-option label="Zone two" value="beijing" /> |
||||
<el-col :xl="12" :lg="12" :md="12" :sm="24" :xs="24"> |
</el-select> |
||||
<div class="h-70px flex items-center justify-end lt-sm:mt-10px"> |
</el-form-item> |
||||
<div class="px-8px text-right"> |
<el-form-item label="" label-width="0px" style="width: calc(20% - 32px)"> |
||||
<div class="mb-20px text-14px text-gray-400">{{ t('workplace.project') }}</div> |
<el-input |
||||
<CountTo |
v-model="queryParams.code" |
||||
class="text-20px" |
placeholder="请输入物料编号" |
||||
:start-val="0" |
clearable |
||||
:end-val="totalSate.project" |
style="width: 100%" |
||||
:duration="2600" |
/> |
||||
/> |
</el-form-item> |
||||
</div> |
<el-form-item label="" label-width="0px" style="width: calc(20% - 32px)"> |
||||
<el-divider direction="vertical" /> |
<el-select |
||||
<div class="px-8px text-right"> |
v-model="queryParams.type" |
||||
<div class="mb-20px text-14px text-gray-400">{{ t('workplace.toDo') }}</div> |
placeholder="请选择检测类型" |
||||
<CountTo |
clearable |
||||
class="text-20px" |
style="width: 100%" |
||||
:start-val="0" |
> |
||||
:end-val="totalSate.todo" |
<el-option label="Zone one" value="shanghai" /> |
||||
:duration="2600" |
<el-option label="Zone two" value="beijing" /> |
||||
/> |
</el-select> |
||||
</div> |
</el-form-item> |
||||
<el-divider direction="vertical" border-style="dashed" /> |
<el-form-item label="" label-width="0px" style="width: calc(20% - 32px)"> |
||||
<div class="px-8px text-right"> |
<el-input |
||||
<div class="mb-20px text-14px text-gray-400">{{ t('workplace.access') }}</div> |
v-model="queryParams.content" |
||||
<CountTo |
placeholder="请输入检测内容" |
||||
class="text-20px" |
clearable |
||||
:start-val="0" |
style="width: 100%" |
||||
:end-val="totalSate.access" |
/> |
||||
:duration="2600" |
</el-form-item> |
||||
/> |
<el-form-item label="" label-width="0px" style="width: calc(20% - 32px)"> |
||||
</div> |
<el-date-picker |
||||
</div> |
v-model="queryParams.date" |
||||
</el-col> |
type="date" |
||||
</el-row> |
placeholder="请选择日期" |
||||
</el-skeleton> |
clearable |
||||
</el-card> |
/> |
||||
</div> |
</el-form-item> |
||||
|
</el-form> |
||||
<el-row class="mt-5px" :gutter="20" justify="space-between"> |
</ContentWrap> |
||||
<el-col :xl="16" :lg="16" :md="24" :sm="24" :xs="24" class="mb-10px"> |
<ContentWrap class="search"> |
||||
<el-card shadow="never"> |
<div class="title">制程能力指数（CPK）</div> |
||||
<template #header> |
<div class="cpk"> |
||||
<div class="h-3 flex justify-between"> |
<div class="cpk-item"> |
||||
<span>{{ t('workplace.project') }}</span> |
<div class="cpk-item-1"> |
||||
<el-link type="primary" :underline="false">{{ t('action.more') }}</el-link> |
<div class="cpk-item-label">CP</div> |
||||
|
<div class="cpk-item-value">0.25</div> |
||||
</div> |
</div> |
||||
</template> |
<div class="cpk-item-1"> |
||||
<el-skeleton :loading="loading" animated> |
<div class="cpk-item-label">CPK</div> |
||||
<el-row> |
<div class="cpk-item-value">0.11</div> |
||||
<el-col |
</div> |
||||
v-for="(item, index) in projects" |
</div> |
||||
:key="`card-${index}`" |
<div class="cpk-item"> |
||||
:xl="8" |
<div class="cpk-item-1"> |
||||
:lg="8" |
<div class="cpk-item-label">CP</div> |
||||
:md="8" |
<div class="cpk-item-value">0.25</div> |
||||
:sm="24" |
</div> |
||||
:xs="24" |
<div class="cpk-item-1"> |
||||
> |
<div class="cpk-item-label">CPK</div> |
||||
<el-card shadow="hover"> |
<div class="cpk-item-value">0.11</div> |
||||
<div class="flex items-center"> |
</div> |
||||
<Icon :icon="item.icon" :size="25" class="mr-10px" /> |
</div> |
||||
<span class="text-16px">{{ item.name }}</span> |
<div class="cpk-item1"> |
||||
</div> |
<div class="cpk-item-2"> |
||||
<div class="mt-15px text-14px text-gray-400">{{ t(item.message) }}</div> |
<div class="cpk-item-label"><span>零件号</span> <span>1662525525</span></div> |
||||
<div class="mt-20px flex justify-between text-12px text-gray-400"> |
<div class="cpk-item-label"><span>检测内容</span> <span>25+0.6 G10</span></div> |
||||
<span>{{ item.personal }}</span> |
</div> |
||||
<span>{{ formatTime(item.time, 'yyyy-MM-dd') }}</span> |
<div class="cpk-item-2"> |
||||
</div> |
<div class="cpk-item-label"><span>公差下限</span> <span>24.4</span></div> |
||||
</el-card> |
<div class="cpk-item-label"><span>公差上限</span> <span>25.6</span></div> |
||||
</el-col> |
</div> |
||||
</el-row> |
<div class="cpk-item-2"> |
||||
</el-skeleton> |
<div class="cpk-item-label"><span>X中值</span> <span>24.4</span></div> |
||||
</el-card> |
<div class="cpk-item-label"><span>R中值</span> <span>1.88</span></div> |
||||
|
|
||||
<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> |
</div> |
||||
</template> |
<div class="cpk-item-2"> |
||||
<el-skeleton :loading="loading" animated> |
<div class="cpk-item-label"><span>UCLx</span> <span>25.66666</span></div> |
||||
<el-row> |
<div class="cpk-item-label"><span>UCLx</span> <span>23.55555</span></div> |
||||
<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> |
</div> |
||||
</template> |
<div class="cpk-item-2"> |
||||
<el-skeleton :loading="loading" animated> |
<div class="cpk-item-label"><span>LCLrc</span> <span>25.66666</span></div> |
||||
<div v-for="(item, index) in notice" :key="`dynamics-${index}`"> |
<div class="cpk-item-label"><span>LCLrc</span> <span>0</span></div> |
||||
<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> |
</div> |
||||
</el-skeleton> |
</div> |
||||
</el-card> |
</div> |
||||
</el-col> |
<table border="1" width="100%" align="center" border-collapse="collapse"> |
||||
</el-row> |
<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> |
||||
|
<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="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> |
||||
|
</ContentWrap> |
||||
|
</div> |
||||
</template> |
</template> |
||||
<script lang="ts" setup> |
<script lang="ts" setup> |
||||
import { set } from 'lodash-es' |
import * as echarts from 'echarts' |
||||
import { EChartsOption } from 'echarts' |
let echart = echarts |
||||
import { formatTime } from '@/utils' |
const queryParams = reactive({ |
||||
|
project: '', |
||||
import { useUserStore } from '@/store/modules/user' |
code: '', |
||||
import { useWatermark } from '@/hooks/web/useWatermark' |
type: '', |
||||
import avatarImg from '@/assets/imgs/avatar.gif' |
content: '', |
||||
import type { WorkplaceTotal, Project, Notice, Shortcut } from './types' |
date: '' |
||||
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 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 () => { |
window.onresize = function () { |
||||
const data = { |
//自适应大小 |
||||
project: 40, |
chart.resize() |
||||
access: 2340, |
|
||||
todo: 10 |
|
||||
} |
} |
||||
totalSate = Object.assign(totalSate, data) |
|
||||
} |
} |
||||
|
function setChart2() { |
||||
// 获取项目数 |
let chart = echart.init(document.getElementById('myEcharts2'), 'light') |
||||
let projects = reactive<Project[]>([]) |
// 把配置和数据放这里 |
||||
const getProject = async () => { |
chart.setOption({ |
||||
const data = [ |
title: { |
||||
{ |
text: 'RANGE CHART' |
||||
name: 'Github', |
|
||||
icon: 'akar-icons:github-fill', |
|
||||
message: 'workplace.introduction', |
|
||||
personal: 'Archer', |
|
||||
time: new Date() |
|
||||
}, |
}, |
||||
{ |
tooltip: { |
||||
name: 'Vue', |
trigger: 'axis' |
||||
icon: 'logos:vue', |
|
||||
message: 'workplace.introduction', |
|
||||
personal: 'Archer', |
|
||||
time: new Date() |
|
||||
}, |
}, |
||||
{ |
legend: { |
||||
name: 'Angular', |
data: ['Highest', 'Lowest'], |
||||
icon: 'logos:angular-icon', |
top: '0', |
||||
message: 'workplace.introduction', |
right: '3%' |
||||
personal: 'Archer', |
|
||||
time: new Date() |
|
||||
}, |
}, |
||||
{ |
grid: { |
||||
name: 'React', |
left: '3%', |
||||
icon: 'logos:react', |
right: '4%', |
||||
message: 'workplace.introduction', |
top: '15%', |
||||
personal: 'Archer', |
bottom: '10%', |
||||
time: new Date() |
containLabel: true |
||||
}, |
}, |
||||
{ |
xAxis: { |
||||
name: 'Webpack', |
type: 'category', |
||||
icon: 'logos:webpack', |
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] |
||||
message: 'workplace.introduction', |
|
||||
personal: 'Archer', |
|
||||
time: new Date() |
|
||||
}, |
}, |
||||
{ |
yAxis: { |
||||
name: 'Vite', |
type: 'value' |
||||
icon: 'vscode-icons:file-type-vite', |
}, |
||||
message: 'workplace.introduction', |
series: [ |
||||
personal: 'Archer', |
{ |
||||
time: new Date() |
name: 'Highest', |
||||
} |
data: [150, 230, 224, 218, 135, 147, 260], |
||||
] |
type: 'line' |
||||
projects = Object.assign(projects, data) |
}, |
||||
|
{ |
||||
|
name: 'Lowest', |
||||
|
data: [344, 23, 56, 88, 95, 54, 45], |
||||
|
type: 'line' |
||||
|
} |
||||
|
] |
||||
|
}) |
||||
|
window.onresize = function () { |
||||
|
//自适应大小 |
||||
|
chart.resize() |
||||
|
} |
||||
} |
} |
||||
|
function setChart3() { |
||||
// 获取通知公告 |
let chart = echart.init(document.getElementById('myEcharts3'), 'light') |
||||
let notice = reactive<Notice[]>([]) |
// 把配置和数据放这里 |
||||
const getNotice = async () => { |
chart.setOption({ |
||||
const data = [ |
tooltip: { |
||||
{ |
trigger: 'axis', |
||||
title: '系统升级版本', |
axisPointer: { |
||||
type: '通知', |
type: 'cross', |
||||
keys: ['通知', '升级'], |
crossStyle: { |
||||
date: new Date() |
color: '#999' |
||||
|
} |
||||
|
} |
||||
}, |
}, |
||||
{ |
legend: { |
||||
title: '系统凌晨维护', |
data: ['Evaporation', 'Precipitation', 'Temperature'] |
||||
type: '公告', |
|
||||
keys: ['公告', '维护'], |
|
||||
date: new Date() |
|
||||
}, |
}, |
||||
{ |
grid: { |
||||
title: '系统升级版本', |
left: '3%', |
||||
type: '通知', |
right: '4%', |
||||
keys: ['通知', '升级'], |
top: '15%', |
||||
date: new Date() |
bottom: '10%', |
||||
|
containLabel: true |
||||
}, |
}, |
||||
{ |
xAxis: [ |
||||
title: '系统凌晨维护', |
{ |
||||
type: '公告', |
type: 'category', |
||||
keys: ['公告', '维护'], |
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'], |
||||
date: new Date() |
axisPointer: { |
||||
} |
type: 'shadow' |
||||
] |
} |
||||
notice = Object.assign(notice, data) |
} |
||||
|
], |
||||
|
yAxis: [ |
||||
|
{ |
||||
|
type: 'value', |
||||
|
name: 'Precipitation', |
||||
|
min: 0, |
||||
|
max: 250, |
||||
|
interval: 50, |
||||
|
axisLabel: { |
||||
|
formatter: '{value} ml' |
||||
|
} |
||||
|
}, |
||||
|
{ |
||||
|
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] |
||||
|
}, |
||||
|
{ |
||||
|
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] |
||||
|
} |
||||
|
] |
||||
|
}) |
||||
|
window.onresize = function () { |
||||
|
//自适应大小 |
||||
|
chart.resize() |
||||
|
} |
||||
} |
} |
||||
|
function setChart4() { |
||||
// 获取快捷入口 |
let chart = echart.init(document.getElementById('myEcharts4'), 'light') |
||||
let shortcut = reactive<Shortcut[]>([]) |
// 把配置和数据放这里 |
||||
|
chart.setOption({ |
||||
const getShortcut = async () => { |
title: { |
||||
const data = [ |
text: '样本运行图' |
||||
{ |
|
||||
name: 'Github', |
|
||||
icon: 'akar-icons:github-fill', |
|
||||
url: 'github.io' |
|
||||
}, |
}, |
||||
{ |
tooltip: { |
||||
name: 'Vue', |
trigger: 'axis' |
||||
icon: 'logos:vue', |
|
||||
url: 'vuejs.org' |
|
||||
}, |
}, |
||||
{ |
legend: { |
||||
name: 'Vite', |
data: ['Highest', 'Lowest'], |
||||
icon: 'vscode-icons:file-type-vite', |
top: '0', |
||||
url: 'https://vitejs.dev/' |
right: '3%' |
||||
}, |
}, |
||||
{ |
grid: { |
||||
name: 'Angular', |
left: '3%', |
||||
icon: 'logos:angular-icon', |
right: '4%', |
||||
url: 'github.io' |
top: '15%', |
||||
|
bottom: '10%', |
||||
|
containLabel: true |
||||
}, |
}, |
||||
{ |
xAxis: { |
||||
name: 'React', |
type: 'category', |
||||
icon: 'logos:react', |
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] |
||||
url: 'github.io' |
|
||||
}, |
}, |
||||
{ |
yAxis: { |
||||
name: 'Webpack', |
type: 'value' |
||||
icon: 'logos:webpack', |
}, |
||||
url: 'github.io' |
series: [ |
||||
} |
{ |
||||
] |
name: 'Highest', |
||||
shortcut = Object.assign(shortcut, data) |
data: [150, 230, 224, 218, 135, 147, 260], |
||||
|
type: 'line' |
||||
|
}, |
||||
|
{ |
||||
|
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') |
||||
const getUserAccessSource = async () => { |
// 把配置和数据放这里 |
||||
const data = [ |
chart.setOption({ |
||||
{ value: 335, name: 'analysis.directAccess' }, |
title: { |
||||
{ value: 310, name: 'analysis.mailMarketing' }, |
text: '均值运行图' |
||||
{ value: 234, name: 'analysis.allianceAdvertising' }, |
}, |
||||
{ value: 135, name: 'analysis.videoAdvertising' }, |
tooltip: { |
||||
{ value: 1548, name: 'analysis.searchEngines' } |
trigger: 'axis' |
||||
] |
}, |
||||
set( |
legend: { |
||||
pieOptionsData, |
data: ['Highest', 'Lowest'], |
||||
'legend.data', |
top: '0', |
||||
data.map((v) => t(v.name)) |
right: '3%' |
||||
) |
}, |
||||
pieOptionsData!.series![0].data = data.map((v) => { |
grid: { |
||||
return { |
left: '3%', |
||||
name: t(v.name), |
right: '4%', |
||||
value: v.value |
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' |
||||
|
}, |
||||
|
{ |
||||
|
name: 'Lowest', |
||||
|
data: [344, 23, 56, 88, 95, 54, 45], |
||||
|
type: 'line' |
||||
|
} |
||||
|
] |
||||
}) |
}) |
||||
|
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; |
||||
} |
} |
||||
const barOptionsData = reactive<EChartsOption>(barOptions) as EChartsOption |
.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; |
||||
|
|
||||
// 周活跃量 |
display: flex; |
||||
const getWeeklyUserActivity = async () => { |
align-items: center; |
||||
const data = [ |
justify-content: space-around; |
||||
{ value: 13253, name: 'analysis.monday' }, |
height: 60px; |
||||
{ value: 34235, name: 'analysis.tuesday' }, |
.cpk-item-2 { |
||||
{ value: 26321, name: 'analysis.wednesday' }, |
.cpk-item-label { |
||||
{ value: 12340, name: 'analysis.thursday' }, |
color: #a8a8a8; |
||||
{ value: 24643, name: 'analysis.friday' }, |
font-size: 12px; |
||||
{ value: 1322, name: 'analysis.saturday' }, |
span { |
||||
{ value: 1324, name: 'analysis.sunday' } |
&:nth-child(1) { |
||||
] |
width: 60px; |
||||
set( |
display: inline-block; |
||||
barOptionsData, |
text-align: right; |
||||
'xAxis.data', |
margin-right: 6px; |
||||
data.map((v) => t(v.name)) |
} |
||||
) |
&:nth-child(2) { |
||||
set(barOptionsData, 'series', [ |
margin-right: 6px; |
||||
{ |
color: #000; |
||||
name: t('analysis.activeQuantity'), |
} |
||||
data: data.map((v) => v.value), |
} |
||||
type: 'bar' |
} |
||||
} |
} |
||||
]) |
} |
||||
} |
} |
||||
|
table { |
||||
|
width: 100%; |
||||
|
/*居中*/ |
||||
|
margin: 20px auto 0px; |
||||
|
/*边框*/ |
||||
|
/* border: 1px solid black; */ |
||||
|
|
||||
const getAllApi = async () => { |
border-collapse: collapse; |
||||
await Promise.all([ |
/*设置背景颜色*/ |
||||
getCount(), |
/* background-color: #bfa; */ |
||||
getProject(), |
|
||||
getNotice(), |
|
||||
getShortcut(), |
|
||||
getUserAccessSource(), |
|
||||
getWeeklyUserActivity() |
|
||||
]) |
|
||||
loading.value = false |
|
||||
} |
} |
||||
|
|
||||
getAllApi() |
/* |
||||
</script> |
* 设置边框 |
||||
|
*/ |
||||
|
td, |
||||
|
th { |
||||
|
border: 1px solid rgb(200, 200, 200); |
||||
|
text-align: center; |
||||
|
font-size: 14px; |
||||
|
} |
||||
|
|
||||
|
/* |
||||
|
* 设置隔行变色 |
||||
|
*/ |
||||
|
// 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