全工厂统计概览静态页面完成
This commit is contained in:
@@ -0,0 +1,213 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, computed } from 'vue';
|
||||
import { useAppStore } from '@/store/modules/app';
|
||||
import { Icon } from '@iconify/vue'
|
||||
import { useThemeStore } from '@/store/modules/theme';
|
||||
import { getColorWithOpacity } from '@/utils/common';
|
||||
import RingChart from './modules/ringChart.vue';
|
||||
import ColumnChart from './modules/columnChart.vue';
|
||||
|
||||
const appStore = useAppStore();
|
||||
const themeStore = useThemeStore();
|
||||
const gap = computed(() => (appStore.isMobile ? 0 : 16));
|
||||
|
||||
const DEPT_ACCEPT = [
|
||||
{ name: "工艺", value: 52 },
|
||||
{ name: "设备", value: 49 },
|
||||
{ name: "管理", value: 25 },
|
||||
];
|
||||
const ACCEPT_COLORS = ["#2080f0", "#7CC242", "#F5A623"];
|
||||
|
||||
const changeData = ref([
|
||||
{
|
||||
name: '2月',
|
||||
value: 42,
|
||||
},
|
||||
{
|
||||
name: '3月',
|
||||
value: 35,
|
||||
},
|
||||
{
|
||||
name: '4月',
|
||||
value: 28,
|
||||
},
|
||||
{
|
||||
name: '5月',
|
||||
value: 12,
|
||||
},
|
||||
{
|
||||
name: '6月',
|
||||
value: 9,
|
||||
},
|
||||
{
|
||||
name: '7月',
|
||||
value: 33,
|
||||
},
|
||||
]);
|
||||
|
||||
const DEFAULT_EFF = [
|
||||
{ pct: 85, label: "按期投用率", c: "#1D4E9C" },
|
||||
{ pct: 64, label: "培训按期完成率", c: "#F5A623" },
|
||||
{ pct: 25, label: "超期变更占比", c: "#E15555" },
|
||||
];
|
||||
const DEFAULT_EXPORTS = ["变更数量统计", "变更周期分析", "超期预警报表", "风险分析执行", "PSSR 与验收", "关闭及时率"];
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<NSpace vertical :size="16">
|
||||
<!-- 卡片数据 -->
|
||||
<NGrid cols="s:1 m:4 l:4" responsive="screen" :x-gap="gap" :y-gap="16" :style="{'--theme-color': themeStore.themeColor,'--theme-bg': getColorWithOpacity(themeStore.themeColor, 0.1)}">
|
||||
<NGi>
|
||||
<div
|
||||
class="bg-white px-16px py-12px text-[#94a3b8]"
|
||||
:style="{ borderRadius: themeStore.themeRadius + 'px', height: '100%' }"
|
||||
>
|
||||
<p class="text-12px font-600 text-center">按期关闭率</p>
|
||||
<div class="flex justify-center py-2.5">
|
||||
<NProgress type="circle" :percentage="93.8" :offset-degree="180">
|
||||
<div class="flex flex-col items-center mt-2">
|
||||
<p class="flex items-end text-2xl font-bold leading-none text-[#1D2129]">
|
||||
93.8<span class="text-sm font-semibold">%</span>
|
||||
</p>
|
||||
<p class="mt-1 text-[11px] text-slate-400">Good</p>
|
||||
</div>
|
||||
</NProgress>
|
||||
</div>
|
||||
<p class="text-12px text-center">近一年 · 全厂</p>
|
||||
</div>
|
||||
</NGi>
|
||||
<NGi>
|
||||
<div
|
||||
class="bg-white px-16px py-12px text-[#94a3b8]"
|
||||
:style="{ borderRadius: themeStore.themeRadius + 'px', height: '100%' }"
|
||||
>
|
||||
<p class="text-12px font-600 text-center">PSSR 完成率</p>
|
||||
<div class="flex justify-center py-2.5">
|
||||
<NProgress type="circle" :percentage="96" :offset-degree="180" status="success">
|
||||
<div class="flex flex-col items-center mt-2">
|
||||
<p class="flex items-end text-2xl font-bold leading-none text-[#1D2129]">
|
||||
96<span class="text-sm font-semibold">%</span>
|
||||
</p>
|
||||
<p class="mt-1 text-[11px] text-slate-400">Excellent</p>
|
||||
</div>
|
||||
</NProgress>
|
||||
</div>
|
||||
<p class="text-12px text-center">近一年 · 全厂</p>
|
||||
</div>
|
||||
</NGi>
|
||||
<NGi>
|
||||
<div
|
||||
class="bg-white px-16px py-12px text-[#94a3b8]"
|
||||
:style="{ borderRadius: themeStore.themeRadius + 'px', height: '100%' }"
|
||||
>
|
||||
<p class="text-12px font-600 text-center">验收一次通过率</p>
|
||||
<div class="flex justify-center py-2.5">
|
||||
<NProgress type="circle" :percentage="88" :offset-degree="180" status="warning">
|
||||
<div class="flex flex-col items-center mt-2">
|
||||
<p class="flex items-end text-2xl font-bold leading-none text-[#1D2129]">
|
||||
88<span class="text-sm font-semibold">%</span>
|
||||
</p>
|
||||
<p class="mt-1 text-[11px] text-slate-400">Fair</p>
|
||||
</div>
|
||||
</NProgress>
|
||||
</div>
|
||||
<p class="text-12px text-center">近一年 · 全厂</p>
|
||||
</div>
|
||||
</NGi>
|
||||
<NGi>
|
||||
<div
|
||||
class="bg-white px-16px py-12px text-[#94a3b8] flex flex-col justify-center items-center"
|
||||
:style="{ borderRadius: themeStore.themeRadius + 'px', height: '100%' }"
|
||||
>
|
||||
<p class="text-12px font-600 text-center">平均关闭时长</p>
|
||||
<p class="mt-2 text-[40px] font-bold leading-none text-[#1D2129] text-center">8.2</p>
|
||||
<p class="text-12px text-center mt-1">天 · 优于行业均值</p>
|
||||
<span class="mt-2 rounded-full bg-[var(--theme-bg)] px-2 py-0.5 text-[11px] font-medium text-[var(--theme-color)]">环比 ↓ 0.6 天</span>
|
||||
</div>
|
||||
</NGi>
|
||||
</NGrid>
|
||||
|
||||
<NGrid :x-gap="gap" :y-gap="16" responsive="screen" item-responsive>
|
||||
<NGi span="24 s:24 m:24 l:8">
|
||||
<NCard :bordered="true" size="small" :content-style="{padding: 0}" :style="{ borderRadius: themeStore.themeRadius + 'px', height: '100%' }">
|
||||
<p class=" text-base font-semibold border-b border-slate-100 p-3">月度变更数量</p>
|
||||
<div class="py-3 px-4">
|
||||
<ColumnChart :data="changeData" style="height: 220px" />
|
||||
</div>
|
||||
</NCard>
|
||||
</NGi>
|
||||
<NGi span="24 s:24 m:24 l:8">
|
||||
<NCard :bordered="true" size="small" :content-style="{padding: 0}" :style="{ borderRadius: themeStore.themeRadius + 'px', height: '100%' }">
|
||||
<p class=" text-base font-semibold border-b border-slate-100 p-3">变更类型分布</p>
|
||||
<div class="py-3 px-4">
|
||||
<RingChart :data="DEPT_ACCEPT" :colors="ACCEPT_COLORS" />
|
||||
</div>
|
||||
</NCard>
|
||||
</NGi>
|
||||
<NGi span="24 s:24 m:24 l:8">
|
||||
<NCard :bordered="true" size="small" :content-style="{padding: 0}"
|
||||
:style="{
|
||||
borderRadius: themeStore.themeRadius + 'px',
|
||||
height: '100%',
|
||||
'--theme-color': themeStore.themeColor,
|
||||
'--warning-color': themeStore.otherColor.warning,
|
||||
'--error-color': themeStore.otherColor.error,
|
||||
}"
|
||||
>
|
||||
<p class=" text-base font-semibold border-b border-slate-100 p-3">变更效率指标</p>
|
||||
<div class="py-3 px-4">
|
||||
<div class="space-y-5">
|
||||
<div v-for="r in DEFAULT_EFF" :key="r.label">
|
||||
<div class="flex items-baseline gap-2">
|
||||
<span class="text-2xl font-bold text-[#1D2129]">{{ r.pct }}<span class="text-sm font-semibold">%</span></span>
|
||||
<span class="text-xs text-slate-400">{{ r.label }}</span>
|
||||
</div>
|
||||
<div class="mt-1.5 h-1 w-full overflow-hidden rounded-full bg-slate-100">
|
||||
<div v-if="r.label==='按期投用率'" class="h-full rounded-full bg-[var(--theme-color)]" :style="{ width: `${r.pct}%` }"></div>
|
||||
<div v-if="r.label==='培训按期完成率'" class="h-full rounded-full bg-[var(--warning-color)]" :style="{ width: `${r.pct}%` }"></div>
|
||||
<div v-if="r.label==='超期变更占比'" class="h-full rounded-full bg-[var(--error-color)]" :style="{ width: `${r.pct}%` }"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-[11px] text-slate-400">近一年 · 全厂口径 · 超期占比越低越好</div>
|
||||
</div>
|
||||
</div>
|
||||
</NCard>
|
||||
</NGi>
|
||||
</NGrid>
|
||||
|
||||
<NGrid :x-gap="gap" :y-gap="16" responsive="screen" item-responsive>
|
||||
<NGi span="24 s:24 m:24 l:16">
|
||||
<NCard :bordered="true" size="small" :content-style="{padding: 0}" :style="{ borderRadius: themeStore.themeRadius + 'px', height: '100%' }">
|
||||
<p class=" text-base font-semibold border-b border-slate-100 p-3">平均审批周期趋势（天）</p>
|
||||
<div class="py-3 px-4">
|
||||
<ColumnChart :data="changeData" style="height: 220px" />
|
||||
</div>
|
||||
</NCard>
|
||||
</NGi>
|
||||
<NGi span="24 s:24 m:24 l:8">
|
||||
<NCard :bordered="true" size="small" :content-style="{padding: 0}"
|
||||
:style="{
|
||||
borderRadius: themeStore.themeRadius + 'px',
|
||||
height: '100%',
|
||||
'--theme-color': themeStore.themeColor,
|
||||
'--theme-bg': getColorWithOpacity(themeStore.themeColor, 0.1),
|
||||
}"
|
||||
>
|
||||
<p class=" text-base font-semibold border-b border-slate-100 p-3">报表导出</p>
|
||||
<div class="py-3 px-4">
|
||||
<div class="grid grid-cols-2 gap-2">
|
||||
<div v-for="r in DEFAULT_EXPORTS" :key="r" @click="message.success(`演示：${r}已导出 Excel`)"
|
||||
class="cursor-pointer flex items-center gap-2 rounded-lg border px-3 py-2.5 text-sm hover:border-[var(--theme-color)] hover:bg-[var(--theme-bg)]">
|
||||
<Icon icon="akar-icons:file" class="size-16px text-slate-400" />
|
||||
{{ r }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</NCard>
|
||||
</NGi>
|
||||
</NGrid>
|
||||
</NSpace>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
Reference in New Issue
Block a user