7 changed files with 1052 additions and 1093 deletions
@ -1,381 +0,0 @@ |
|||||
<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,653 +1,381 @@ |
|||||
<template> |
<template> |
||||
<div> |
<div> |
||||
<ContentWrap class="search"> |
<el-card shadow="never"> |
||||
<el-form |
<el-skeleton :loading="loading" animated> |
||||
:inline="true" |
<el-row :gutter="20" justify="space-between"> |
||||
:model="queryParams" |
<el-col :xl="12" :lg="12" :md="12" :sm="24" :xs="24"> |
||||
class="demo-form-inline" |
<div class="flex items-center"> |
||||
style="margin-bottom: -17px" |
<img :src="avatar" alt="" class="mr-20px h-70px w-70px rounded-[50%]" /> |
||||
> |
<div> |
||||
<el-form-item label="" label-width="0px" style="width: calc(20% - 32px)"> |
<div class="text-20px"> |
||||
<el-select |
{{ t('workplace.welcome') }} {{ username }} {{ t('workplace.happyDay') }} |
||||
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> |
||||
<div class="cpk-item-1"> |
<div class="mt-10px text-14px text-gray-500"> |
||||
<div class="cpk-item-label">CPK</div> |
{{ t('workplace.toady') }}，20℃ - 32℃！ |
||||
<div class="cpk-item-value">0.11</div> |
|
||||
</div> |
</div> |
||||
</div> |
</div> |
||||
<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> |
||||
<div class="cpk-item-1"> |
</el-col> |
||||
<div class="cpk-item-label">CPK</div> |
<el-col :xl="12" :lg="12" :md="12" :sm="24" :xs="24"> |
||||
<div class="cpk-item-value">0.11</div> |
<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> |
</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> |
</div> |
||||
<div class="cpk-item1"> |
<el-divider direction="vertical" border-style="dashed" /> |
||||
<div class="cpk-item-2"> |
<div class="px-8px text-right"> |
||||
<div class="cpk-item-label"><span>零件号</span> <span>1662525525</span></div> |
<div class="mb-20px text-14px text-gray-400">{{ t('workplace.access') }}</div> |
||||
<div class="cpk-item-label"><span>检测内容</span> <span>25+0.6 G10</span></div> |
<CountTo |
||||
|
class="text-20px" |
||||
|
:start-val="0" |
||||
|
:end-val="totalSate.access" |
||||
|
:duration="2600" |
||||
|
/> |
||||
</div> |
</div> |
||||
<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> |
</div> |
||||
<div class="cpk-item-2"> |
</el-col> |
||||
<div class="cpk-item-label"><span>X中值</span> <span>24.4</span></div> |
</el-row> |
||||
<div class="cpk-item-label"><span>R中值</span> <span>1.88</span></div> |
</el-skeleton> |
||||
|
</el-card> |
||||
</div> |
</div> |
||||
<div class="cpk-item-2"> |
|
||||
<div class="cpk-item-label"><span>UCLx</span> <span>25.66666</span></div> |
<el-row class="mt-5px" :gutter="20" justify="space-between"> |
||||
<div class="cpk-item-label"><span>UCLx</span> <span>23.55555</span></div> |
<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> |
||||
<div class="cpk-item-2"> |
<div class="mt-15px text-14px text-gray-400">{{ t(item.message) }}</div> |
||||
<div class="cpk-item-label"><span>LCLrc</span> <span>25.66666</span></div> |
<div class="mt-20px flex justify-between text-12px text-gray-400"> |
||||
<div class="cpk-item-label"><span>LCLrc</span> <span>0</span></div> |
<span>{{ item.personal }}</span> |
||||
|
<span>{{ formatTime(item.time, 'yyyy-MM-dd') }}</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> |
</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> |
</div> |
||||
<table border="1" width="100%" align="center" border-collapse="collapse"> |
</el-col> |
||||
<tr class="td-bg"> |
</el-row> |
||||
<td colspan="2">样本</td> |
</el-skeleton> |
||||
<td>1</td> |
</el-card> |
||||
<td>2</td> |
<el-card shadow="never" class="mt-10px"> |
||||
<td>3</td> |
<template #header> |
||||
<td>4</td> |
<div class="h-3 flex justify-between"> |
||||
<td>5</td> |
<span>{{ t('workplace.notice') }}</span> |
||||
<td>6</td> |
<el-link type="primary" :underline="false">{{ t('action.more') }}</el-link> |
||||
<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> |
||||
<div class="charts" v-show="tabIndex == 0"> |
</template> |
||||
<div id="myEcharts1" :style="{ width: '50%', height: '300px' }"></div> |
<el-skeleton :loading="loading" animated> |
||||
<div id="myEcharts2" :style="{ width: '50%', height: '300px' }"></div> |
<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> |
||||
<div class="charts" v-show="tabIndex == 1"> |
<div class="mt-15px text-12px text-gray-400"> |
||||
<div id="myEcharts3" :style="{ width: '80vw', height: '300px' }"></div> |
{{ formatTime(item.date, 'yyyy-MM-dd') }} |
||||
</div> |
</div> |
||||
<div class="charts" v-show="tabIndex == 2"> |
|
||||
<div id="myEcharts4" :style="{ width: '80vw', height: '300px' }"></div> |
|
||||
</div> |
</div> |
||||
<div class="charts" v-show="tabIndex == 3"> |
|
||||
<div id="myEcharts5" :style="{ width: '80vw', height: '300px' }"></div> |
|
||||
</div> |
</div> |
||||
</ContentWrap> |
<el-divider /> |
||||
</div> |
</div> |
||||
|
</el-skeleton> |
||||
|
</el-card> |
||||
|
</el-col> |
||||
|
</el-row> |
||||
</template> |
</template> |
||||
<script lang="ts" setup> |
<script lang="ts" setup> |
||||
import * as echarts from 'echarts' |
import { set } from 'lodash-es' |
||||
let echart = echarts |
import { EChartsOption } from 'echarts' |
||||
const queryParams = reactive({ |
import { formatTime } from '@/utils' |
||||
project: '', |
|
||||
code: '', |
import { useUserStore } from '@/store/modules/user' |
||||
type: '', |
import { useWatermark } from '@/hooks/web/useWatermark' |
||||
content: '', |
import avatarImg from '@/assets/imgs/avatar.gif' |
||||
date: '' |
import type { WorkplaceTotal, Project, Notice, Shortcut } from './types' |
||||
}) |
import { pieOptions, barOptions } from './echarts-data' |
||||
const tabIndex = ref(0) |
|
||||
// 设置延期未交付数据 |
defineOptions({ name: 'Home' }) |
||||
function setChart1() { |
|
||||
let chart = echart.init(document.getElementById('myEcharts1'), 'light') |
const { t } = useI18n() |
||||
// 把配置和数据放这里 |
const userStore = useUserStore() |
||||
chart.setOption({ |
const { setWatermark } = useWatermark() |
||||
title: { |
const loading = ref(true) |
||||
text: 'RANGE CHART' |
const avatar = userStore.getUser.avatar ? userStore.getUser.avatar : avatarImg |
||||
}, |
const username = userStore.getUser.nickname |
||||
tooltip: { |
const pieOptionsData = reactive<EChartsOption>(pieOptions) as EChartsOption |
||||
trigger: 'axis' |
// 获取统计数 |
||||
}, |
let totalSate = reactive<WorkplaceTotal>({ |
||||
legend: { |
project: 0, |
||||
data: ['Highest', 'Lowest'], |
access: 0, |
||||
top: '0', |
todo: 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' |
|
||||
} |
|
||||
] |
|
||||
}) |
}) |
||||
|
|
||||
window.onresize = function () { |
const getCount = async () => { |
||||
//自适应大小 |
const data = { |
||||
chart.resize() |
project: 40, |
||||
|
access: 2340, |
||||
|
todo: 10 |
||||
} |
} |
||||
|
totalSate = Object.assign(totalSate, data) |
||||
} |
} |
||||
function setChart2() { |
|
||||
let chart = echart.init(document.getElementById('myEcharts2'), 'light') |
// 获取项目数 |
||||
// 把配置和数据放这里 |
let projects = reactive<Project[]>([]) |
||||
chart.setOption({ |
const getProject = async () => { |
||||
title: { |
const data = [ |
||||
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', |
name: 'Github', |
||||
data: [150, 230, 224, 218, 135, 147, 260], |
icon: 'akar-icons:github-fill', |
||||
type: 'line' |
message: 'workplace.introduction', |
||||
|
personal: 'Archer', |
||||
|
time: new Date() |
||||
}, |
}, |
||||
{ |
{ |
||||
name: 'Lowest', |
name: 'Vue', |
||||
data: [344, 23, 56, 88, 95, 54, 45], |
icon: 'logos:vue', |
||||
type: 'line' |
message: 'workplace.introduction', |
||||
} |
personal: 'Archer', |
||||
] |
time: new Date() |
||||
}) |
|
||||
window.onresize = function () { |
|
||||
//自适应大小 |
|
||||
chart.resize() |
|
||||
} |
|
||||
} |
|
||||
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', |
name: 'Angular', |
||||
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'], |
icon: 'logos:angular-icon', |
||||
axisPointer: { |
message: 'workplace.introduction', |
||||
type: 'shadow' |
personal: 'Archer', |
||||
} |
time: new Date() |
||||
} |
|
||||
], |
|
||||
yAxis: [ |
|
||||
{ |
|
||||
type: 'value', |
|
||||
name: 'Precipitation', |
|
||||
min: 0, |
|
||||
max: 250, |
|
||||
interval: 50, |
|
||||
axisLabel: { |
|
||||
formatter: '{value} ml' |
|
||||
} |
|
||||
}, |
}, |
||||
{ |
{ |
||||
type: 'value', |
name: 'React', |
||||
name: 'Temperature', |
icon: 'logos:react', |
||||
min: 0, |
message: 'workplace.introduction', |
||||
max: 25, |
personal: 'Archer', |
||||
interval: 5, |
time: new Date() |
||||
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: '正态分布', |
name: 'Webpack', |
||||
type: 'line', |
icon: 'logos:webpack', |
||||
yAxisIndex: 1, |
message: 'workplace.introduction', |
||||
tooltip: { |
personal: 'Archer', |
||||
valueFormatter: function (value) { |
time: new Date() |
||||
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] |
{ |
||||
|
name: 'Vite', |
||||
|
icon: 'vscode-icons:file-type-vite', |
||||
|
message: 'workplace.introduction', |
||||
|
personal: 'Archer', |
||||
|
time: new Date() |
||||
} |
} |
||||
] |
] |
||||
}) |
projects = Object.assign(projects, data) |
||||
window.onresize = function () { |
|
||||
//自适应大小 |
|
||||
chart.resize() |
|
||||
} |
|
||||
} |
} |
||||
function setChart4() { |
|
||||
let chart = echart.init(document.getElementById('myEcharts4'), 'light') |
// 获取通知公告 |
||||
// 把配置和数据放这里 |
let notice = reactive<Notice[]>([]) |
||||
chart.setOption({ |
const getNotice = async () => { |
||||
title: { |
const data = [ |
||||
text: '样本运行图' |
{ |
||||
}, |
title: '系统升级版本', |
||||
tooltip: { |
type: '通知', |
||||
trigger: 'axis' |
keys: ['通知', '升级'], |
||||
}, |
date: new Date() |
||||
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' |
title: '系统凌晨维护', |
||||
|
type: '公告', |
||||
|
keys: ['公告', '维护'], |
||||
|
date: new Date() |
||||
}, |
}, |
||||
series: [ |
|
||||
{ |
{ |
||||
name: 'Highest', |
title: '系统升级版本', |
||||
data: [150, 230, 224, 218, 135, 147, 260], |
type: '通知', |
||||
type: 'line' |
keys: ['通知', '升级'], |
||||
|
date: new Date() |
||||
}, |
}, |
||||
{ |
{ |
||||
name: 'Lowest', |
title: '系统凌晨维护', |
||||
data: [344, 23, 56, 88, 95, 54, 45], |
type: '公告', |
||||
type: 'line' |
keys: ['公告', '维护'], |
||||
|
date: new Date() |
||||
} |
} |
||||
] |
] |
||||
}) |
notice = Object.assign(notice, data) |
||||
window.onresize = function () { |
|
||||
//自适应大小 |
|
||||
chart.resize() |
|
||||
} |
|
||||
} |
} |
||||
function setChart5() { |
|
||||
let chart = echart.init(document.getElementById('myEcharts5'), 'light') |
// 获取快捷入口 |
||||
// 把配置和数据放这里 |
let shortcut = reactive<Shortcut[]>([]) |
||||
chart.setOption({ |
|
||||
title: { |
const getShortcut = async () => { |
||||
text: '均值运行图' |
const data = [ |
||||
}, |
{ |
||||
tooltip: { |
name: 'Github', |
||||
trigger: 'axis' |
icon: 'akar-icons:github-fill', |
||||
}, |
url: 'github.io' |
||||
legend: { |
|
||||
data: ['Highest', 'Lowest'], |
|
||||
top: '0', |
|
||||
right: '3%' |
|
||||
}, |
}, |
||||
grid: { |
{ |
||||
left: '3%', |
name: 'Vue', |
||||
right: '4%', |
icon: 'logos:vue', |
||||
top: '15%', |
url: 'vuejs.org' |
||||
bottom: '10%', |
|
||||
containLabel: true |
|
||||
}, |
}, |
||||
xAxis: { |
{ |
||||
type: 'category', |
name: 'Vite', |
||||
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] |
icon: 'vscode-icons:file-type-vite', |
||||
|
url: 'https://vitejs.dev/' |
||||
}, |
}, |
||||
yAxis: { |
{ |
||||
type: 'value' |
name: 'Angular', |
||||
|
icon: 'logos:angular-icon', |
||||
|
url: 'github.io' |
||||
}, |
}, |
||||
series: [ |
|
||||
{ |
{ |
||||
name: 'Highest', |
name: 'React', |
||||
data: [150, 230, 224, 218, 135, 147, 260], |
icon: 'logos:react', |
||||
type: 'line' |
url: 'github.io' |
||||
}, |
}, |
||||
{ |
{ |
||||
name: 'Lowest', |
name: 'Webpack', |
||||
data: [344, 23, 56, 88, 95, 54, 45], |
icon: 'logos:webpack', |
||||
type: 'line' |
url: 'github.io' |
||||
} |
} |
||||
] |
] |
||||
}) |
shortcut = Object.assign(shortcut, data) |
||||
window.onresize = function () { |
|
||||
//自适应大小 |
|
||||
chart.resize() |
|
||||
} |
} |
||||
|
|
||||
|
// 用户来源 |
||||
|
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 |
||||
} |
} |
||||
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 { |
const barOptionsData = reactive<EChartsOption>(barOptions) as EChartsOption |
||||
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; |
// 周活跃量 |
||||
align-items: center; |
const getWeeklyUserActivity = async () => { |
||||
justify-content: space-around; |
const data = [ |
||||
height: 60px; |
{ value: 13253, name: 'analysis.monday' }, |
||||
.cpk-item-2 { |
{ value: 34235, name: 'analysis.tuesday' }, |
||||
.cpk-item-label { |
{ value: 26321, name: 'analysis.wednesday' }, |
||||
color: #a8a8a8; |
{ value: 12340, name: 'analysis.thursday' }, |
||||
font-size: 12px; |
{ value: 24643, name: 'analysis.friday' }, |
||||
span { |
{ value: 1322, name: 'analysis.saturday' }, |
||||
&:nth-child(1) { |
{ value: 1324, name: 'analysis.sunday' } |
||||
width: 60px; |
] |
||||
display: inline-block; |
set( |
||||
text-align: right; |
barOptionsData, |
||||
margin-right: 6px; |
'xAxis.data', |
||||
} |
data.map((v) => t(v.name)) |
||||
&:nth-child(2) { |
) |
||||
margin-right: 6px; |
set(barOptionsData, 'series', [ |
||||
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; */ |
|
||||
|
|
||||
border-collapse: collapse; |
|
||||
/*设置背景颜色*/ |
|
||||
/* background-color: #bfa; */ |
|
||||
} |
} |
||||
|
|
||||
/* |
const getAllApi = async () => { |
||||
* 设置边框 |
await Promise.all([ |
||||
*/ |
getCount(), |
||||
td, |
getProject(), |
||||
th { |
getNotice(), |
||||
border: 1px solid rgb(200, 200, 200); |
getShortcut(), |
||||
text-align: center; |
getUserAccessSource(), |
||||
font-size: 14px; |
getWeeklyUserActivity() |
||||
|
]) |
||||
|
loading.value = false |
||||
} |
} |
||||
|
|
||||
/* |
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> |
|
||||
|
|||||
@ -0,0 +1,653 @@ |
|||||
|
<template> |
||||
|
<div> |
||||
|
<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> |
||||
|
<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> |
||||
|
<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> |
||||
|
<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> |
||||
|
<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> |
||||
|
<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="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> |
||||
|
</div> |
||||
|
</div> |
||||
|
<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> |
||||
|
<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> |
||||
|
<script lang="ts" setup> |
||||
|
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' |
||||
|
} |
||||
|
] |
||||
|
}) |
||||
|
|
||||
|
window.onresize = function () { |
||||
|
//自适应大小 |
||||
|
chart.resize() |
||||
|
} |
||||
|
} |
||||
|
function setChart2() { |
||||
|
let chart = echart.init(document.getElementById('myEcharts2'), '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' |
||||
|
}, |
||||
|
{ |
||||
|
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') |
||||
|
// 把配置和数据放这里 |
||||
|
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: [ |
||||
|
{ |
||||
|
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') |
||||
|
// 把配置和数据放这里 |
||||
|
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: '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() |
||||
|
} |
||||
|
} |
||||
|
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: '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; |
||||
|
} |
||||
|
.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; |
||||
|
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; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
table { |
||||
|
width: 100%; |
||||
|
/*居中*/ |
||||
|
margin: 20px auto 0px; |
||||
|
/*边框*/ |
||||
|
/* border: 1px solid black; */ |
||||
|
|
||||
|
border-collapse: collapse; |
||||
|
/*设置背景颜色*/ |
||||
|
/* background-color: #bfa; */ |
||||
|
} |
||||
|
|
||||
|
/* |
||||
|
* 设置边框 |
||||
|
*/ |
||||
|
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> |
||||
File diff suppressed because one or more lines are too long
@ -0,0 +1,31 @@ |
|||||
|
import { forEach } from './../../../../utils/tree' |
||||
|
|
||||
|
|
||||
|
// 计算平均值
|
||||
|
export const mean = (datas: Array<String>) => { |
||||
|
let sum = 0.00 |
||||
|
if (datas == null || datas.length == 0) return 0.00; |
||||
|
|
||||
|
datas.forEach((item)=>{ |
||||
|
sum = sum + parseFloat(item.toString()) |
||||
|
}) |
||||
|
|
||||
|
return sum / datas.length |
||||
|
} |
||||
|
|
||||
|
// 计算方差
|
||||
|
export const std = (datas: Array<String>) => { |
||||
|
let xSum = 0.00 |
||||
|
let xAvg = 0.00 |
||||
|
let avgX = 0.00 |
||||
|
const arrNum = datas.length |
||||
|
|
||||
|
for (let i = 0; i < arrNum; i++){ |
||||
|
xSum += parseFloat(datas[i].toString()); |
||||
|
} |
||||
|
xAvg = xSum / arrNum;//平均值
|
||||
|
//平均差求绝对值
|
||||
|
avgX = Math.abs(0 - xAvg); |
||||
|
|
||||
|
return Math.pow(avgX, 2) |
||||
|
} |
||||
Loading…
Reference in new issue