bestlee/moc
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

车间主任首页

Browse Source
This commit is contained in:
bestlee
2026-09-28 11:50:58 +08:00
parent ccfd8cb260
commit c31924a8d8
24 changed files with 862 additions and 382 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/locales/langs/zh-cn.ts
+1
View File
@@ -253,6 +253,7 @@ const local: App.I18n.Schema = {
riskstatistics: '安全与风险统计',
report: '统计报表',
signstatistics: '质量会签统计',
professionalstatistics: '本专业变更统计',
factoryoverview: '全工厂统计概览',
systemmanage_setting: '系统配置',
},
src/router/elegant/imports.ts
+1
View File
@@ -39,6 +39,7 @@ export const views: Record<LastLevelRouteKey, RouteComponent | (() => Promise<Ro
my_mytask: () => import("@/views/my/myTask/index.vue"),
my_pendingchange: () => import("@/views/my/pendingChange/index.vue"),
my_pssr: () => import("@/views/my/pssr/index.vue"),
professionalstatistics: () => import("@/views/professionalStatistics/index.vue"),
report: () => import("@/views/report/index.vue"),
riskstatistics: () => import("@/views/riskStatistics/index.vue"),
signstatistics: () => import("@/views/signStatistics/index.vue"),
src/router/elegant/routes.ts
+11
View File
@@ -288,6 +288,17 @@ export const generatedRoutes: GeneratedRoute[] = [
}
]
},
{
name: 'professionalstatistics',
path: '/professionalstatistics',
component: 'layout.base$view.professionalstatistics',
meta: {
title: '本专业变更统计',
icon: 'ix:barchart',
order: 3,
i18nKey: 'route.professionalstatistics'
}
},
{
name: 'report',
path: '/report',
src/router/elegant/transform.ts
+1
View File
@@ -190,6 +190,7 @@ const routeMap: RouteMap = {
"my_mytask": "/my/mytask",
"my_pendingchange": "/my/pendingchange",
"my_pssr": "/my/pssr",
"professionalstatistics": "/professionalstatistics",
"report": "/report",
"riskstatistics": "/riskstatistics",
"signstatistics": "/signstatistics",
src/service/api/statistics.ts
+29 -1
View File
@@ -1,13 +1,41 @@
// 数据统计
import { request } from '../request';
// 首页
// 首页（申请人）
export function homeApi() {
return request({
url: `/api/workbench`,
method: 'get',
});
}
// 首页（专业会签）
export function homeProfessionalApi() {
return request({
url: `/api/workbench/specialty-sign`,
method: 'get',
});
}
// 首页（安全工程师）
export function homeSafeApi() {
return request({
url: `/api/workbench/safety`,
method: 'get',
});
}
// 首页（车间主任）
export function homeManagerApi() {
return request({
url: `/api/workbench/dept`,
method: 'get',
});
}
// 首页（分管领导）
export function homeLeaderApi() {
return request({
url: `/api/workbench/vp`,
method: 'get',
});
}
// 本部门变更统计
export function departmentStatisticsApi(params: {from: string | null, to: string | null}) {
src/typings/elegant-router.d.ts
Vendored
+3
View File
@@ -44,6 +44,7 @@ declare module "@elegant-router/types" {
"my_mytask": "/my/mytask";
"my_pendingchange": "/my/pendingchange";
"my_pssr": "/my/pssr";
"professionalstatistics": "/professionalstatistics";
"report": "/report";
"riskstatistics": "/riskstatistics";
"signstatistics": "/signstatistics";
@@ -95,6 +96,7 @@ declare module "@elegant-router/types" {
| "home"
| "login"
| "my"
| "professionalstatistics"
| "report"
| "riskstatistics"
| "signstatistics"
@@ -139,6 +141,7 @@ declare module "@elegant-router/types" {
| "my_mytask"
| "my_pendingchange"
| "my_pssr"
| "professionalstatistics"
| "report"
| "riskstatistics"
| "signstatistics"
src/views/changeLedger/modules/list.vue
+1 -1
View File
@@ -196,7 +196,7 @@ const sortChoose = (val:string) => {
// 跳转详情
const jumpTo = (r:any) => {
routerPushByKey("details_index",{ query: { id: r?.id?.toString(),status:r?.status?.toString() || '',key:props.keyValue } });
routerPushByKey("details_index",{ query: { id: r?.id?.toString(),key:props.keyValue } });
}
// 打开进度
const openProgress = (r: any) => {
src/views/details/index/index.vue
-5
View File
@@ -24,8 +24,6 @@ const typeAi = ref<{ type: string; confidence: number; conclusion: string; hit_r
const currentInfo = ref<any>(null);
// 当前变更id
const currentId = ref<number>(0);
// 当前变更状态
const currentStatus = ref<string>('');
// 是否开启 AI 辅助功能
const isAiOn = ref<boolean>(false);
// 变更等级选项
@@ -320,9 +318,6 @@ onMounted(() => {
currentId.value = Number(route.query.id);
getConfig();
}
if(route.query.status){
currentStatus.value = route.query.status.toString();
}
}
})
</script>
src/views/home/modules/ringChart.vue
+116
View File
@@ -0,0 +1,116 @@
<script setup lang="ts">
import { ref } from 'vue';
import { useEcharts } from '@/hooks/common/echarts';
defineOptions({
name: 'RingChart'
});
const props = defineProps<{ data?: { name: string; value: number; money: number; rate: number }[]; colors?: string[]; range?: string }>();
const { domRef, updateOptions } = useEcharts(() => ({
tooltip: {
trigger: 'item',
formatter: '{b}: {c} ({d}%)'
},
legend: {
icon: 'circle',
left: 'center',
bottom: 10,
itemWidth: 10,
itemHeight: 10,
itemStyle: {
borderWidth: 0
},
textStyle: {
rich: {
name: {
width: 50,
},
count: {
width: 80,
align: 'right',
fontWeight: 600,
},
rate: {
align: 'left',
},
money: {
width: 80,
align: 'right',
fontWeight: 600,
},
}
},
formatter: function (name: string) {
var info = props.data?.find((item: { name: string }) => item.name === name);
if(info){
return '{name|'+name+'} {count|'+(info.value)+' 起}{rate|'+(info.rate)+' %} {money|'+(info.money)+' 万元}';
}else{
return name;
}
}
},
title: {
text: `{a|19}\n{b|已验收}`,
textStyle: {
rich: {
a: {
fontSize: 24,
color: '#333',
fontWeight: 800,
align: 'center',
verticalAlign: 'middle',
},
b: {
fontSize: 12,
color: '#999',
align: 'center',
verticalAlign: 'middle',
fontWeight: 500,
padding: [5, 0, 0, 0]
}
}
},
left: '45%',
top: '21%',
},
series: [
{
type: 'pie',
color: ['#5da8ff', '#8e9dff', '#fedc69', '#26deca'],
radius: ['40%', '55%'],
center: ['50%', '32%'],
avoidLabelOverlap: false,
label: {
show: false,
position: 'outside',
formatter: '{b}\n{c} ({d}%)',
fontSize: 12,
},
labelLine: {
show: true,
length: 10,
length2: 10
},
data: [] as { name: string; value: number }[]
}
]
}));
function init() {
updateOptions(opts => {
opts.series[0].data = props.data || [];
opts.series[0].color = props.colors || [];
return opts;
});
}
init();
</script>
<template>
<div ref="domRef" class="w-full h-220px overflow-hidden"></div>
</template>
<style scoped></style>
src/views/home/modules/template1.vue
+1 -1
View File
@@ -44,7 +44,7 @@ const jumpTo = (key: string,qid:number = 0) => {
}
// 打开变更详情
const openDetail = (row: any) => {
routerPushByKey("details_index",{ query: { id: row?.change_id?.toString(),status:row?.status?.toString() || '',key:'home' } });
routerPushByKey("details_index",{ query: { id: row?.change_id?.toString(),key:'home' } });
};
// 获取当前时间字符串
src/views/home/modules/template10.vue
+1 -1
View File
@@ -44,7 +44,7 @@ const jumpTo = (key: string,qid:number = 0) => {
}
// 打开变更详情
const openDetail = (row: any) => {
routerPushByKey("details_index",{ query: { id: row?.change_id?.toString(),status:row?.status?.toString() || '',key:'home' } });
routerPushByKey("details_index",{ query: { id: row?.change_id?.toString(),key:'home' } });
};
// 获取当前时间字符串
src/views/home/modules/template3.vue
+1 -1
View File
@@ -44,7 +44,7 @@ const jumpTo = (key: string,qid:number = 0) => {
}
// 打开变更详情
const openDetail = (row: any) => {
routerPushByKey("details_index",{ query: { id: row?.change_id?.toString(),status:row?.status?.toString() || '',key:'home' } });
routerPushByKey("details_index",{ query: { id: row?.change_id?.toString(),key:'home' } });
};
// 获取当前时间字符串
src/views/home/modules/template4.vue
+94 -110
View File
@@ -5,7 +5,7 @@ import { useThemeStore } from '@/store/modules/theme';
import { useRouterPush } from '@/hooks/common/router';
import { getColorWithOpacity, tagTextColor, tagBgColor, tagBorderColor } from '@/utils/common';
import { systemConfigApi } from "@/service/api/system";
import { homeApi } from "@/service/api/statistics";
import { homeProfessionalApi } from "@/service/api/statistics";
const themeStore = useThemeStore();
const { routerPushByKey } = useRouterPush();
@@ -35,6 +35,8 @@ const jumpTo = (key: string,qid:number = 0) => {
routerPushByKey(key,{ query: { id: qid.toString() } });
}else if(key==='details_closedoc' && qid){
routerPushByKey(key,{ query: { id: qid.toString(),key:'home' } });
}else if(key==='details_index' && qid){
routerPushByKey("details_index",{ query: { id: qid.toString(),key:'home' } });
}else{
routerPushByKey(key as any);
}
@@ -73,10 +75,10 @@ const matchObj = (list:any,val:number) => {
// 获取数据
const getData = async () => {
loading.value = true;
const {data,error} = await homeApi();
const {data,error} = await homeProfessionalApi();
if(!error){
homeData.value = data;
console.log(data)
homeData.value = data;
}
loading.value = false;
}
@@ -176,12 +178,12 @@ onUnmounted(() => {
<div
class="flex-1 bg-[#fff] px-16px py-12px cursor-pointer flex items-center gap-3"
:style="{ borderRadius: themeStore.themeRadius + 'px' }"
@click="jumpTo('my_mytask')"
@click="jumpTo('professionalstatistics')"
>
<div class="flex justify-between">
<CountTo
:start-value="0"
:end-value="homeData?.dept_stats?.reject_count || 0"
:end-value="homeData?.sign_stats?.month_signed || 0"
class="text-26px font-600"
:style="{ color: themeStore.themeColor }"
/>
@@ -196,7 +198,7 @@ onUnmounted(() => {
<div
class="flex-1 bg-[#fff] px-16px py-12px cursor-pointer flex items-center gap-3"
:style="{ borderRadius: themeStore.themeRadius + 'px' }"
@click="jumpTo('my_mytask')"
@click="jumpTo('my_highrisk')"
>
<div class="flex justify-between">
<CountTo
@@ -221,7 +223,7 @@ onUnmounted(() => {
<div class="flex justify-between">
<CountTo
:start-value="0"
:end-value="homeData?.dept_stats?.reject_count || 0"
:end-value="homeData?.sign_stats?.risk_analysis_count || 0"
class="text-26px font-600"
:style="{ color: themeStore.themeColor }"
/>
@@ -239,83 +241,83 @@ onUnmounted(() => {
<NGi span="24 s:24 m:24 l:16">
<!-- 我的变更进度 -->
<NCard :bordered="false" size="small" :style="{ borderRadius: themeStore.themeRadius + 'px' }">
<div class="flex items-center justify-between mb-3">
<div class="flex items-center gap-2">
<Icon icon="lucide:clipboard-check" class="size-16px" :style="{ color: themeStore.themeColor }" />
<p class="text-13px font-700 text-#64749a">待我会签</p>
<p class="text-11px text-#94a3b8 mt-2px">超期项行内红色标记 · 审批时自动展示专业相关附件</p>
<div class="flex items-center justify-between mb-3">
<div class="flex items-center gap-2">
<Icon icon="lucide:clipboard-check" class="size-16px" :style="{ color: themeStore.themeColor }" />
<p class="text-13px font-700 text-#64749a">待我会签</p>
<p class="text-11px text-#94a3b8 mt-2px">超期项行内红色标记 · 审批时自动展示专业相关附件</p>
</div>
<NButton v-if="homeData?.my_changes_progress?.total > 0" ghost size="small" class="text-xs" @click="jumpTo('my_mytask')">
我的任务
<Icon icon="formkit:right" class="size-12px" />
</NButton>
</div>
<NButton v-if="homeData?.my_changes_progress?.total > 0" ghost size="small" class="text-xs" @click="jumpTo('my_mytask')">
我的任务
<Icon icon="formkit:right" class="size-12px" />
</NButton>
</div>
<div class="flex flex-col gap-3">
<template v-if="homeData?.my_changes_progress?.total > 0">
<div v-for="row in homeData?.my_changes_progress?.items?.slice(0, 3) || []" :key="row.change_id" @click="openDetail(row)"
class="cursor-pointer flex w-full items-center gap-3 border px-3.5 py-2.5 text-left transition hover:border-[var(--hover-border)] hover:bg-[var(--hover-bg)] hover:bg-[#EAF0F9]/40"
:style="{
borderRadius: themeStore.themeRadius + 'px',
'--hover-border': themeStore.themeColor,
'--hover-bg': getColorWithOpacity(themeStore.themeColor, 0.05)
}"
>
<div class="min-w-0 flex-1">
<div class="flex flex-wrap items-center gap-2">
<span class="font-mono text-[11px] text-slate-400">{{ row.change_no }}</span>
<NTag class="text-[11px]" v-if="row.urgent===1" type="error" size="small">紧急</NTag>
<!-- 变更等级 -->
<NTag
size="small"
:color="{
color: tagBgColor(matchObj(levelList,row.change_level)?.color),
textColor: tagTextColor(matchObj(levelList,row.change_level)?.color),
borderColor: tagBorderColor(matchObj(levelList,row.change_level)?.color),
<div class="flex flex-col gap-3">
<template v-if="homeData?.my_changes_progress?.total > 0">
<div v-for="row in homeData?.my_changes_progress?.items?.slice(0, 3) || []" :key="row.change_id" @click="openDetail(row)"
class="cursor-pointer flex w-full items-center gap-3 border px-3.5 py-2.5 text-left transition hover:border-[var(--hover-border)] hover:bg-[var(--hover-bg)] hover:bg-[#EAF0F9]/40"
:style="{
borderRadius: themeStore.themeRadius + 'px',
'--hover-border': themeStore.themeColor,
'--hover-bg': getColorWithOpacity(themeStore.themeColor, 0.05)
}"
>{{matchObj(levelList,row.change_level)?.label}}</NTag>
<!-- 变更类型 -->
<NTag
size="small"
:color="{
color: tagBgColor(matchObj(typeList,row.change_type)?.color),
textColor: tagTextColor(matchObj(typeList,row.change_type)?.color),
borderColor: tagBorderColor(matchObj(typeList,row.change_type)?.color),
}"
>{{matchObj(typeList,row.change_type)?.label}}</NTag>
>
<div class="min-w-0 flex-1">
<div class="flex flex-wrap items-center gap-2">
<span class="font-mono text-[11px] text-slate-400">{{ row.change_no }}</span>
<NTag class="text-[11px]" v-if="row.urgent===1" type="error" size="small">紧急</NTag>
<!-- 变更等级 -->
<NTag
size="small"
:color="{
color: tagBgColor(matchObj(levelList,row.change_level)?.color),
textColor: tagTextColor(matchObj(levelList,row.change_level)?.color),
borderColor: tagBorderColor(matchObj(levelList,row.change_level)?.color),
}"
>{{matchObj(levelList,row.change_level)?.label}}</NTag>
<!-- 变更类型 -->
<NTag
size="small"
:color="{
color: tagBgColor(matchObj(typeList,row.change_type)?.color),
textColor: tagTextColor(matchObj(typeList,row.change_type)?.color),
borderColor: tagBorderColor(matchObj(typeList,row.change_type)?.color),
}"
>{{matchObj(typeList,row.change_type)?.label}}</NTag>
<NTag class="text-[11px]" v-if="row.duration_type===2" type="warning" size="small">临时</NTag>
<NTag class="text-[11px]" v-else type="info" size="small">永久</NTag>
<span class="text-xs" :style="{ color: themeStore.otherColor.error }">已超期 3 天</span>
</div>
<div class="mt-1 flex items-center gap-2">
<span class="min-w-0 flex-1 truncate text-sm font-medium text-slate-800 dark:text-white">{{ row.title }}</span>
<!-- 状态标签 -->
<NTag v-if="row.status==='APPROVING'" size="small" type="warning">审批中</NTag>
<NTag v-if="row.status==='APPROVED'" size="small" type="success">已通过</NTag>
<NTag v-if="row.status==='IMPLEMENTED'" size="small" type="success">待验收</NTag>
<NTag v-if="row.status==='ACCEPTED'" size="small" type="error">待关闭</NTag>
<NTag v-if="row.status==='CLOSED'" size="small" type="success">已关闭</NTag>
<NTag v-if="row.status==='WITHDRAWN'" size="small" type="error">已撤回</NTag>
<NTag v-if="row.status==='REJECTED'" size="small" type="error">已驳回</NTag>
<NButton size="small" type="primary" class="text-xs">
去审批
<Icon icon="akar-icons:arrow-right" class="size-13px ml-1" />
</NButton>
</div>
<div class="mt-0.5 truncate text-[11px] text-slate-400 flex items-center gap-2">
<p>申请人：{{row.step_name}}</p>
<span v-if="row.apply_time" class="text-[11px] text-slate-400">{{ row.apply_time?.slice(0, 10) }}</span>
</div>
<NTag class="text-[11px]" v-if="row.duration_type===2" type="warning" size="small">临时</NTag>
<NTag class="text-[11px]" v-else type="info" size="small">永久</NTag>
<span class="text-xs" :style="{ color: themeStore.otherColor.error }">已超期 3 天</span>
</div>
<div class="mt-1 flex items-center gap-2">
<span class="min-w-0 flex-1 truncate text-sm font-medium text-slate-800 dark:text-white">{{ row.title }}</span>
<!-- 状态标签 -->
<NTag v-if="row.status==='APPROVING'" size="small" type="warning">审批中</NTag>
<NTag v-if="row.status==='APPROVED'" size="small" type="success">已通过</NTag>
<NTag v-if="row.status==='IMPLEMENTED'" size="small" type="success">待验收</NTag>
<NTag v-if="row.status==='ACCEPTED'" size="small" type="error">待关闭</NTag>
<NTag v-if="row.status==='CLOSED'" size="small" type="success">已关闭</NTag>
<NTag v-if="row.status==='WITHDRAWN'" size="small" type="error">已撤回</NTag>
<NTag v-if="row.status==='REJECTED'" size="small" type="error">已驳回</NTag>
<NButton size="small" type="primary" class="text-xs">
去审批
<Icon icon="akar-icons:arrow-right" class="size-13px ml-1" />
</NButton>
</div>
<div class="mt-0.5 truncate text-[11px] text-slate-400 flex items-center gap-2">
<p>申请人：{{row.step_name}}</p>
<span v-if="row.apply_time" class="text-[11px] text-slate-400">{{ row.apply_time?.slice(0, 10) }}</span>
</div>
</div>
</div>
<NButton dashed type="primary" size="small" class="text-xs" @click="jumpTo('my_mytask')">
还有{{(homeData?.my_changes_progress?.total - 3) > 0 ? (homeData?.my_changes_progress?.total - 3) : 0}}条，前往我的任务查看全部 →
</NButton>
</template>
<template v-else>
<p class="text-xs text-slate-400 text-center">暂无数据</p>
</template>
</div>
<NButton dashed type="primary" size="small" class="text-xs" @click="jumpTo('my_mytask')">
还有{{(homeData?.my_changes_progress?.total - 3) > 0 ? (homeData?.my_changes_progress?.total - 3) : 0}}条，前往我的任务查看全部 →
</NButton>
</template>
<template v-else>
<p class="text-xs text-slate-400 text-center">暂无数据</p>
</template>
</div>
</NCard>
<NGrid :x-gap="16" :y-gap="16" responsive="screen" item-responsive class="mt-[16px]">
@@ -327,39 +329,21 @@ onUnmounted(() => {
<p class="text-13px font-700 text-#64749a">最近已会签</p>
<p class="text-11px text-#94a3b8 mt-2px">本人签署记录 · 点击直达变更内容</p>
</div>
<div class="flex flex-col gap-3">
<div class="rounded-md border px-3 py-2 flex items-center justify-between gap-2 cursor-pointer">
<div v-if="homeData?.signed_recent?.items.length" class="flex flex-col gap-3">
<div v-for="item in homeData?.signed_recent?.items" :key="item.change_id" class="rounded-md border px-3 py-2 flex items-center justify-between gap-2 cursor-pointer" @click="jumpTo('details_index', item.change_id)">
<div>
<p class="min-w-0 flex-1 truncate text-sm font-medium text-slate-800 dark:text-white">R-102 安全阀校验周期调整</p>
<p class="font-mono text-[11px] text-slate-400">
<span>MOC-2026-R02-0037</span>
<span> · 07-30 10:24</span>
<p class="min-w-0 flex-1 truncate text-sm font-medium text-slate-800 dark:text-white">{{ item.title }}</p>
<p class="font-mono text-[11px] text-slate-400 flex items-center gap-3">
<span>{{ item.change_no }}</span>
<span>{{ item.finished_at?.slice(0, 16) }}</span>
</p>
</div>
<NTag size="small" type="success" class="text-xs">同意</NTag>
</div>
<div class="rounded-md border px-3 py-2 flex items-center justify-between gap-2 cursor-pointer">
<div>
<p class="min-w-0 flex-1 truncate text-sm font-medium text-slate-800 dark:text-white">R-102 安全阀校验周期调整</p>
<p class="font-mono text-[11px] text-slate-400">
<span>MOC-2026-R02-0037</span>
<span> · 07-30 10:24</span>
</p>
</div>
<NTag size="small" type="success" class="text-xs">同意</NTag>
</div>
<div class="rounded-md border px-3 py-2 flex items-center justify-between gap-2 cursor-pointer">
<div>
<p class="min-w-0 flex-1 truncate text-sm font-medium text-slate-800 dark:text-white">R-102 安全阀校验周期调整</p>
<p class="font-mono text-[11px] text-slate-400">
<span>MOC-2026-R02-0037</span>
<span> · 07-30 10:24</span>
</p>
</div>
<NTag size="small" type="success" class="text-xs">同意</NTag>
<NTag v-if="item.status==='PENDING'" size="small" type="warning" class="text-xs">待会签</NTag>
<NTag v-if="item.status==='PASSED'" size="small" type="success" class="text-xs">通过</NTag>
<NTag v-if="item.status==='REJECTED'" size="small" type="error" class="text-xs">驳回</NTag>
</div>
</div>
<!-- <p class="text-xs text-slate-400 text-center">暂无数据</p> -->
<p v-else class="text-xs text-slate-400 text-center">暂无数据</p>
</NCard>
</NGi>
</NGrid>
@@ -401,7 +385,7 @@ onUnmounted(() => {
<NProgress
type="line"
status="info"
:percentage="50"
:percentage="(1.8 / 3) * 100"
:height="10"
border-radius="6px"
>
@@ -409,11 +393,11 @@ onUnmounted(() => {
</NProgress>
</div>
<div class="flex items-center gap-2">
<span class="text-xs text-slate-500 w-16">平均耗时</span>
<span class="text-xs text-slate-500 w-16">最长耗时</span>
<NProgress
type="line"
status="error"
:percentage="50"
:percentage="(2.6 / 3) * 100"
:height="10"
border-radius="6px"
>
src/views/home/modules/template6.vue
+3 -3
View File
@@ -5,7 +5,7 @@ import { useThemeStore } from '@/store/modules/theme';
import { useRouterPush } from '@/hooks/common/router';
import { getColorWithOpacity, tagTextColor, tagBgColor, tagBorderColor, downloadFileFun } from '@/utils/common';
import { systemConfigApi } from "@/service/api/system";
import { homeApi } from "@/service/api/statistics";
import { homeSafeApi } from "@/service/api/statistics";
import previewComponent from '@/components/previewFile/index.vue'
const themeStore = useThemeStore();
@@ -96,10 +96,10 @@ const matchObj = (list:any,val:number) => {
// 获取数据
const getData = async () => {
loading.value = true;
const {data,error} = await homeApi();
const {data,error} = await homeSafeApi();
if(!error){
homeData.value = data;
console.log(data)
homeData.value = data;
}
loading.value = false;
}
src/views/home/modules/template7.vue
+315 -252
View File
@@ -4,13 +4,34 @@ import { Icon } from '@iconify/vue'
import { useThemeStore } from '@/store/modules/theme';
import { useRouterPush } from '@/hooks/common/router';
import { getColorWithOpacity, tagTextColor, tagBgColor, tagBorderColor } from '@/utils/common';
import RingChart from "./ringChart.vue";
import { systemConfigApi } from "@/service/api/system";
import { homeApi } from "@/service/api/statistics";
const themeStore = useThemeStore();
const { routerPushByKey } = useRouterPush();
const DEPT_ACCEPT2 = [
{ name: "完全达到", value: 13, money: 61.2, rate: 68 },
{ name: "基本达到", value: 4, money: 19.8, rate: 21 },
{ name: "未达到", value: 2, money: 5.4, rate: 11 },
];
const ACCEPT_COLORS2 = ["#52c41a", "#faad14", "#ff4d4f"];
const DATE_RANGE_OPTIONS = [
{ label: "近一年", value: 'year' },
{ label: "近半年", value: 'half_year' },
{ label: "近三个月", value: 'quarter' },
{ label: "近一个月", value: 'month' },
{ label: "自定义", value: 'custom' },
]
const loading = ref<boolean>(false);
// 日期范围
const dateRange = ref<string>('year');
// 自定义日期范围
const form = ref<number | null>(null);
const to = ref<number | null>(null);
// 变更临期天数
const remindDays = ref<number>(0);
// 变更类型列表
@@ -22,16 +43,17 @@ const clock = ref<string>('');
let timer: any = null;
// 首页数据
const homeData = ref<any>(null);
// 尚未关闭总数
const openTotal = computed(() => {
return homeData.value?.unclosed_status?.items?.reduce((sum:number, item:any) => sum + item.count, 0) || 0;
});
// 临时变更到期提醒情况
const tempTotal = computed(() => {
return (homeData.value?.dept_stats?.unclosed_total || 0) + (homeData.value?.dept_stats?.near_overdue_total || 0) + (homeData.value?.dept_stats?.overdue_total || 0);
});
// 时间范围改变
const timeChange = (type: string, value: number | null) => {
if(type === 'start'){
form.value = value;
}else if(type === 'end'){
to.value = value;
}
}
// 跳转变更申请页面、变更台账、我的任务、发起变更
const jumpTo = (key: string,qid:number = 0) => {
if(key==='my_initiatechange' && qid){
@@ -44,7 +66,7 @@ const jumpTo = (key: string,qid:number = 0) => {
}
// 打开变更详情
const openDetail = (row: any) => {
routerPushByKey("details_index",{ query: { id: row?.change_id?.toString(),status:row?.status?.toString() || '',key:'home' } });
routerPushByKey("details_index",{ query: { id: row?.change_id?.toString(),key:'home' } });
};
// 获取当前时间字符串
@@ -143,39 +165,25 @@ onUnmounted(() => {
</NGi>
<NGi span="24 s:24 m:8" class="flex items-center justify-end gap-12px">
<p class="text-#999 text-xs">{{clock}}</p>
<NButton type="primary" size="small" @click="jumpTo('my_initiatechange')">
<Icon icon="ic:round-plus" class="size-18px" />
发起变更
<NButton ghost size="small" @click="jumpTo('my_mytask')">
车间变更看板
</NButton>
<NButton type="primary" size="small" @click="jumpTo('my_mytask')">
<Icon icon="lucide:clipboard-check" class="size-14px" />
审批待办
</NButton>
</NGi>
</NGrid>
</NCard>
<!-- 卡片数据 -->
<NGrid cols="s:1 m:2 l:4" responsive="screen" :x-gap="16" :y-gap="16">
<NGi>
<div
class="flex-1 bg-[#fff2f0] px-16px py-12px text-[#e15555] cursor-pointer"
:style="{ borderRadius: themeStore.themeRadius + 'px' }"
@click="jumpTo('my_mytask')"
>
<p class="text-12px font-600">待修改驳回</p>
<div class="flex justify-between">
<CountTo
:start-value="0"
:end-value="homeData?.dept_stats?.reject_count || 0"
class="text-26px font-600"
/>
</div>
<p class="text-12px">修改后重新提交</p>
</div>
</NGi>
<NGi>
<div
class="flex-1 bg-white px-16px py-12px text-[#94a3b8] cursor-pointer"
:style="{ borderRadius: themeStore.themeRadius + 'px' }"
@click="jumpTo('my_mytask')"
>
<p class="text-12px font-600">待上传资料</p>
<p class="text-12px font-600">待我审批</p>
<div class="flex justify-between">
<CountTo
:start-value="0"
@@ -183,24 +191,7 @@ onUnmounted(() => {
class="text-26px font-600 text-[#333]"
/>
</div>
<p class="text-12px">培训 / PSSR / 验收材料补交</p>
</div>
</NGi>
<NGi>
<div
class="flex-1 bg-white px-16px py-12px text-[#94a3b8] cursor-pointer"
:style="{ borderRadius: themeStore.themeRadius + 'px' }"
@click="jumpTo('my_mytask')"
>
<p class="text-12px font-600">临时变更到期</p>
<div class="flex justify-between">
<CountTo
:start-value="0"
:end-value="homeData?.dept_stats?.near_overdue_total || 0"
class="text-26px font-600 text-[#333]"
/>
</div>
<p class="text-12px">到期 ≤ {{remindDays}} 天 · 及时处置</p>
<p class="text-12px">含超期未审 · 请优先处理</p>
</div>
</NGi>
<NGi>
@@ -209,7 +200,41 @@ onUnmounted(() => {
:style="{ borderRadius: themeStore.themeRadius + 'px' }"
@click="jumpTo('my_mytask')"
>
<p class="text-12px font-600">超期未处置</p>
<p class="text-12px font-600">重要变更未关闭</p>
<div class="flex justify-between">
<CountTo
:start-value="0"
:end-value="homeData?.dept_stats?.reject_count || 0"
class="text-26px font-600"
/>
</div>
<p class="text-12px">本车间 · 需重点跟踪</p>
</div>
</NGi>
<NGi>
<div
class="flex-1 bg-white px-16px py-12px text-[#94a3b8] cursor-pointer"
:style="{ borderRadius: themeStore.themeRadius + 'px' }"
@click="jumpTo('my_mytask')"
>
<p class="text-12px font-600">未通过审批</p>
<div class="flex justify-between">
<CountTo
:start-value="0"
:end-value="homeData?.dept_stats?.near_overdue_total || 0"
class="text-26px font-600 text-[#333]"
/>
</div>
<p class="text-12px">本车间 · 驳回待修改重报</p>
</div>
</NGi>
<NGi>
<div
class="flex-1 bg-[#fff2f0] px-16px py-12px text-[#e15555] cursor-pointer"
:style="{ borderRadius: themeStore.themeRadius + 'px' }"
@click="jumpTo('my_mytask')"
>
<p class="text-12px font-600">超期未关闭</p>
<div class="flex justify-between">
<CountTo
:start-value="0"
@@ -217,227 +242,265 @@ onUnmounted(() => {
class="text-26px font-600"
/>
</div>
<p class="text-12px">超期临时变更 · 需恢复 / 延期 / 转永久</p>
<p class="text-12px">本车间 · 红色预警</p>
</div>
</NGi>
</NGrid>
<NGrid :x-gap="16" :y-gap="16" responsive="screen" item-responsive>
<!-- 左侧 -->
<NGi span="24 s:24 m:24 l:16">
<!-- 我的变更进度 -->
<NCard :bordered="false" size="small" :style="{ borderRadius: themeStore.themeRadius + 'px' }">
<div class="flex items-center justify-between mb-3">
<div class="flex items-center gap-2">
<Icon icon="akar-icons:file" class="size-16px" :style="{ color: themeStore.themeColor }" />
<p class="text-13px font-700 text-#64749a">我的变更进度</p>
<p class="text-11px text-#94a3b8 mt-2px">阶段进度与台账实时联动</p>
</div>
<NButton v-if="homeData?.my_changes_progress?.total > 0" ghost size="small" class="text-xs" @click="jumpTo('changeledger')">
全部台账
<Icon icon="formkit:right" class="size-12px" />
</NButton>
</div>
<div class="flex flex-col gap-3">
<template v-if="homeData?.my_changes_progress?.total > 0">
<div v-for="row in homeData?.my_changes_progress?.items?.slice(0, 3) || []" :key="row.change_id" @click="openDetail(row)"
class="cursor-pointer flex w-full items-center gap-3 border px-3.5 py-2.5 text-left transition hover:border-[var(--hover-border)] hover:bg-[var(--hover-bg)] hover:bg-[#EAF0F9]/40"
:style="{
borderRadius: themeStore.themeRadius + 'px',
'--hover-border': themeStore.themeColor,
'--hover-bg': getColorWithOpacity(themeStore.themeColor, 0.05)
}"
>
<div class="min-w-0 flex-1">
<div class="flex flex-wrap items-center gap-2">
<span class="font-mono text-[11px] text-slate-400">{{ row.change_no }}</span>
<NTag class="text-[11px]" v-if="row.urgent===1" type="error" size="small">紧急</NTag>
<!-- 变更等级 -->
<NTag
size="small"
:color="{
color: tagBgColor(matchObj(levelList,row.change_level)?.color),
textColor: tagTextColor(matchObj(levelList,row.change_level)?.color),
borderColor: tagBorderColor(matchObj(levelList,row.change_level)?.color),
}"
>{{matchObj(levelList,row.change_level)?.label}}</NTag>
<!-- 变更类型 -->
<NTag
size="small"
:color="{
color: tagBgColor(matchObj(typeList,row.change_type)?.color),
textColor: tagTextColor(matchObj(typeList,row.change_type)?.color),
borderColor: tagBorderColor(matchObj(typeList,row.change_type)?.color),
}"
>{{matchObj(typeList,row.change_type)?.label}}</NTag>
<NTag class="text-[11px]" v-if="row.duration_type===2" type="warning" size="small">临时</NTag>
<NTag class="text-[11px]" v-else type="info" size="small">永久</NTag>
<span v-if="row.apply_time" class="ml-auto text-[11px] text-slate-400">申请时间 {{ row.apply_time?.slice(0, 10) }}</span>
</div>
<div class="mt-1 flex items-center gap-2">
<span class="min-w-0 flex-1 truncate text-sm font-medium text-slate-800 dark:text-white">{{ row.title }}</span>
<span class="shrink-0 text-[11px] text-slate-400">当前状态</span>
<!-- 状态标签 -->
<NTag v-if="row.status==='APPROVING'" size="small" type="warning">审批中</NTag>
<NTag v-if="row.status==='APPROVED'" size="small" type="success">已通过</NTag>
<NTag v-if="row.status==='IMPLEMENTED'" size="small" type="success">待验收</NTag>
<NTag v-if="row.status==='ACCEPTED'" size="small" type="error">待关闭</NTag>
<NTag v-if="row.status==='CLOSED'" size="small" type="success">已关闭</NTag>
<NTag v-if="row.status==='WITHDRAWN'" size="small" type="error">已撤回</NTag>
<NTag v-if="row.status==='REJECTED'" size="small" type="error">已驳回</NTag>
</div>
<div class="mt-0.5 truncate text-[11px] text-slate-400">
<p v-if="row.status === 'CLOSED'">阶段全部完成，流程闭环已归档</p>
<p v-else>当前节点：{{row.step_name}}</p>
</div>
</div>
</div>
<NButton dashed type="primary" size="small" class="text-xs" @click="jumpTo('changeledger')">
还有{{(homeData?.my_changes_progress?.total - 3) > 0 ? (homeData?.my_changes_progress?.total - 3) : 0}}条，前往台账查看全部 →
</NButton>
</template>
<template v-else>
<p class="text-xs text-slate-400 text-center">暂无数据</p>
</template>
</div>
</NCard>
<NGrid :x-gap="16" :y-gap="16" responsive="screen" item-responsive class="mt-[16px]">
<!-- 临时变更到期提醒情况 -->
<NGi span="12 s:12 m:12 l:12">
<!-- 左侧 -->
<NGi span="24 s:24 m:24 l:16">
<!-- 审批待办 -->
<NCard :bordered="false" size="small" :style="{ borderRadius: themeStore.themeRadius + 'px' }">
<div class="flex items-center mb-3 gap-2">
<Icon icon="lets-icons:clock" class="size-16px" :style="{ color: themeStore.themeColor }" />
<p class="text-13px font-700 text-#64749a">临时变更到期提醒情况</p>
<p class="text-11px text-#94a3b8">共 {{tempTotal}} 项</p>
</div>
<div class="flex flex-col gap-3">
<div class="rounded-lg border px-3 py-2">
<div class="flex items-center gap-2 text-xs">
<span class="h-2 w-2 rounded-full" :style="{ background: themeStore.otherColor.success }"></span>
<span class="font-medium text-slate-700">正常（到期 > {{remindDays}} 天）</span>
<span class="ml-auto font-semibold text-slate-600">{{homeData?.dept_stats?.unclosed_total || 0}} 项</span>
<div class="flex items-center justify-between mb-3">
<div class="flex items-center gap-2">
<Icon icon="lucide:clipboard-check" class="size-16px" :style="{ color: themeStore.themeColor }" />
<p class="text-13px font-700 text-#64749a">审批待办</p>
<p class="text-11px text-#94a3b8 mt-2px">属地变更审批</p>
</div>
<NButton v-if="homeData?.my_changes_progress?.total > 0" ghost size="small" class="text-xs" @click="jumpTo('my_mytask')">
我的任务
<Icon icon="formkit:right" class="size-12px" />
</NButton>
</div>
<div class="flex flex-col gap-3">
<template v-if="homeData?.my_changes_progress?.total > 0">
<div v-for="row in homeData?.my_changes_progress?.items?.slice(0, 3) || []" :key="row.change_id" @click="openDetail(row)"
class="cursor-pointer flex w-full items-center gap-3 border px-3.5 py-2.5 text-left transition hover:border-[var(--hover-border)] hover:bg-[var(--hover-bg)] hover:bg-[#EAF0F9]/40"
:style="{
borderRadius: themeStore.themeRadius + 'px',
'--hover-border': themeStore.themeColor,
'--hover-bg': getColorWithOpacity(themeStore.themeColor, 0.05)
}"
>
<div class="min-w-0 flex-1">
<div class="flex flex-wrap items-center gap-2">
<span class="font-mono text-[11px] text-slate-400">{{ row.change_no }}</span>
<NTag class="text-[11px]" v-if="row.urgent===1" type="error" size="small">紧急</NTag>
<!-- 变更等级 -->
<NTag
size="small"
:color="{
color: tagBgColor(matchObj(levelList,row.change_level)?.color),
textColor: tagTextColor(matchObj(levelList,row.change_level)?.color),
borderColor: tagBorderColor(matchObj(levelList,row.change_level)?.color),
}"
>{{matchObj(levelList,row.change_level)?.label}}</NTag>
<!-- 变更类型 -->
<NTag
size="small"
:color="{
color: tagBgColor(matchObj(typeList,row.change_type)?.color),
textColor: tagTextColor(matchObj(typeList,row.change_type)?.color),
borderColor: tagBorderColor(matchObj(typeList,row.change_type)?.color),
}"
>{{matchObj(typeList,row.change_type)?.label}}</NTag>
<NTag class="text-[11px]" v-if="row.duration_type===2" type="warning" size="small">临时</NTag>
<NTag class="text-[11px]" v-else type="info" size="small">永久</NTag>
<span class="text-xs" :style="{ color: themeStore.otherColor.error }">已超期 3 天</span>
</div>
<div class="mt-1 flex items-center gap-2">
<span class="min-w-0 flex-1 truncate text-sm font-medium text-slate-800 dark:text-white">{{ row.title }}</span>
<!-- 状态标签 -->
<NTag v-if="row.status==='APPROVING'" size="small" type="warning">审批中</NTag>
<NTag v-if="row.status==='APPROVED'" size="small" type="success">已通过</NTag>
<NTag v-if="row.status==='IMPLEMENTED'" size="small" type="success">待验收</NTag>
<NTag v-if="row.status==='ACCEPTED'" size="small" type="error">待关闭</NTag>
<NTag v-if="row.status==='CLOSED'" size="small" type="success">已关闭</NTag>
<NTag v-if="row.status==='WITHDRAWN'" size="small" type="error">已撤回</NTag>
<NTag v-if="row.status==='REJECTED'" size="small" type="error">已驳回</NTag>
<NButton size="small" type="primary" class="text-xs">
去审批
<Icon icon="akar-icons:arrow-right" class="size-13px ml-1" />
</NButton>
</div>
<div class="mt-0.5 truncate text-[11px] text-slate-400 flex items-center gap-2">
<p>申请人：{{row.step_name}}</p>
<span v-if="row.apply_time" class="text-[11px] text-slate-400">{{ row.apply_time?.slice(0, 10) }}</span>
</div>
</div>
</div>
</template>
<template v-else>
<p class="text-xs text-slate-400 text-center">暂无数据</p>
</template>
</div>
<div class="rounded-lg border px-3 py-2">
<div class="flex items-center gap-2 text-xs">
<span class="h-2 w-2 rounded-full" :style="{ background: themeStore.otherColor.warning }"></span>
<span class="font-medium text-slate-700">临期（到期 ≤ {{remindDays}} 天）</span>
<span class="ml-auto font-semibold text-slate-600">{{homeData?.dept_stats?.near_overdue_total || 0}} 项</span>
</NCard>
<!-- 未关闭变更进度一览 -->
<NCard :bordered="false" size="small" class="mt-16px" :style="{ borderRadius: themeStore.themeRadius + 'px' }">
<div class="flex items-center justify-between mb-3">
<div class="flex items-center gap-2">
<Icon icon="lets-icons:clock" class="size-16px" :style="{ color: themeStore.themeColor }" />
<p class="text-13px font-700 text-#64749a">未关闭变更进度一览</p>
<p class="text-11px text-#94a3b8 mt-2px">本车间 · 全部未关闭变更</p>
</div>
<NButton v-if="homeData?.my_changes_progress?.total > 0" ghost size="small" class="text-xs" @click="jumpTo('changeledger')">
变更台账
<Icon icon="formkit:right" class="size-12px" />
</NButton>
</div>
</div>
<div class="rounded-lg border px-3 py-2">
<div class="flex items-center gap-2 text-xs">
<span class="h-2 w-2 rounded-full" :style="{ background: themeStore.otherColor.error }"></span>
<span class="font-medium text-slate-700">已超期</span>
<span class="ml-auto font-semibold text-slate-600">{{homeData?.dept_stats?.overdue_total || 0}} 项</span>
<div class="flex flex-col gap-3">
<template v-if="homeData?.my_changes_progress?.total > 0">
<div v-for="row in homeData?.my_changes_progress?.items?.slice(0, 3) || []" :key="row.change_id" @click="openDetail(row)"
class="cursor-pointer flex w-full items-center gap-3 border px-3.5 py-2.5 text-left transition hover:border-[var(--hover-border)] hover:bg-[var(--hover-bg)] hover:bg-[#EAF0F9]/40"
:style="{
borderRadius: themeStore.themeRadius + 'px',
'--hover-border': themeStore.themeColor,
'--hover-bg': getColorWithOpacity(themeStore.themeColor, 0.05)
}"
>
<div class="min-w-0 flex-1">
<div class="flex flex-wrap items-center gap-2">
<!-- 状态标签 -->
<NTag v-if="row.status==='APPROVING'" size="small" type="warning">审批中</NTag>
<NTag v-if="row.status==='APPROVED'" size="small" type="success">已通过</NTag>
<NTag v-if="row.status==='IMPLEMENTED'" size="small" type="success">待验收</NTag>
<NTag v-if="row.status==='ACCEPTED'" size="small" type="error">待关闭</NTag>
<NTag v-if="row.status==='CLOSED'" size="small" type="success">已关闭</NTag>
<NTag v-if="row.status==='WITHDRAWN'" size="small" type="error">已撤回</NTag>
<NTag v-if="row.status==='REJECTED'" size="small" type="error">已驳回</NTag>
<span class="min-w-0 flex-1 truncate text-sm font-medium text-slate-800 dark:text-white">{{ row.title }}</span>
<!-- 变更等级 -->
<NTag
size="small"
:color="{
color: tagBgColor(matchObj(levelList,row.change_level)?.color),
textColor: tagTextColor(matchObj(levelList,row.change_level)?.color),
borderColor: tagBorderColor(matchObj(levelList,row.change_level)?.color),
}"
>{{matchObj(levelList,row.change_level)?.label}}</NTag>
</div>
<div class="mt-1 flex items-center gap-2 font-mono text-[11px] text-slate-400">
<span>{{ row.change_no }}</span>
<span>张工艺</span>
</div>
<!-- 审批流程 -->
<!-- <div class="mt-0.5 truncate text-[11px] text-slate-400 flex items-center gap-2">
<p>申请人：{{row.step_name}}</p>
<span v-if="row.apply_time">{{ row.apply_time?.slice(0, 10) }}</span>
</div> -->
</div>
</div>
</template>
<template v-else>
<p class="text-xs text-slate-400 text-center">暂无数据</p>
</template>
</div>
</NCard>
<!-- 临时变更投用后情况 -->
<NCard :bordered="false" size="small" class="mt-16px" :style="{ borderRadius: themeStore.themeRadius + 'px' }">
<div class="flex items-center justify-between mb-3">
<div class="flex items-center gap-2">
<Icon icon="lets-icons:clock" class="size-16px" :style="{ color: themeStore.themeColor }" />
<p class="text-13px font-700 text-#64749a">临时变更投用后情况</p>
<p class="text-11px text-#94a3b8 mt-2px">临期提醒 · 超期催办 · 延期 / 转永久跟踪</p>
</div>
</div>
<div class="flex flex-col gap-3">
<template v-if="homeData?.my_changes_progress?.total > 0">
<div v-for="row in homeData?.my_changes_progress?.items?.slice(0, 3) || []" :key="row.change_id"
class="flex w-full items-center gap-3 border px-3.5 py-2.5 text-left transition hover:border-[var(--hover-border)] hover:bg-[var(--hover-bg)] hover:bg-[#EAF0F9]/40"
:style="{
borderRadius: themeStore.themeRadius + 'px',
'--hover-border': themeStore.themeColor,
'--hover-bg': getColorWithOpacity(themeStore.themeColor, 0.05)
}"
>
<div class="min-w-0 flex-1">
<div class="flex flex-wrap items-center gap-2">
<span class="min-w-0 flex-1 truncate text-sm font-medium text-slate-800 dark:text-white">{{ row.title }}</span>
<NTag size="small" type="error">已超期4天</NTag>
<NButton size="tiny">去催办</NButton>
<NButton size="tiny">查看</NButton>
</div>
<div class="mt-1 flex items-center gap-2 font-mono text-[11px] text-slate-400">
<span>{{ row.change_no }}</span>
<span>审判中</span>
<!-- <span>尚未投用</span>
<span>原计划恢复 2026-08-01</span> -->
<span>2026-07-16 08:30 投用</span>
<span>计划恢复 2026-08-03（已延期 1 次）</span>
</div>
<div class="mt-0.5 truncate text-[11px]" :style="{ color: themeStore.otherColor.error }">
<p>每日 08:00 提醒申请人与属地负责人，已升级上报分管领导</p>
</div>
</div>
</div>
</template>
<template v-else>
<p class="text-xs text-slate-400 text-center">暂无数据</p>
</template>
</div>
</div>
<div class="text-[11px] text-slate-400">提醒规则：到期前 {{remindDays}} 天触发（可在「我的任务 · 我的申请」中调整）· 临期 / 超期项请按期办理延期、恢复或转永久</div>
<NButton dashed type="primary" size="small" class="text-xs" @click="jumpTo('my_mytask')">
前往「我的任务」办理延期 / 恢复 / 转永久 →
</NButton>
</div>
</NCard>
</NGi>
<!-- 尚未关闭的变更所处状态 -->
<NGi span="12 s:12 m:12 l:12">
<NCard :bordered="false" size="small" :style="{ borderRadius: themeStore.themeRadius + 'px',height:'100%' }">
<!-- 右侧 -->
<NGi span="24 s:24 m:24 l:8">
<!-- 本车间统计 -->
<NCard :bordered="false" size="small" :style="{ borderRadius: themeStore.themeRadius + 'px' }">
<div class="flex items-center flex-wrap gap-2">
<Icon icon="akar-icons:file" class="size-16px" :style="{ color: themeStore.themeColor }" />
<p class="text-13px font-700 text-#64749a">本车间统计</p>
<p class="text-11px text-#94a3b8">一车间 · 近一年</p>
<NSelect v-model:value="dateRange" size="small" :options="DATE_RANGE_OPTIONS" class="ml-auto w-120px"></NSelect>
</div>
<div v-if="dateRange==='custom'" class="flex items-center gap-2 mt-2">
<NDatePicker :value="form" type="date" size="small" class="w-full" :on-update:value="(v) => timeChange('start',v)" />
<span class="text-xs text-slate-400 flex-1">至</span>
<NDatePicker :value="to" type="date" size="small" class="w-full" :on-update:value="(v) => timeChange('end',v)" />
</div>
<div class="flex flex-col gap-3 mt-3">
<div class="flex items-end justify-between">
<div>
<span class="text-3xl font-extrabold text-slate-800">14</span>
<span class="ml-1.5 text-[11px] text-slate-500">变更总数</span>
</div>
<span class="text-[11px] text-slate-400">状态构成占比条</span>
</div>
<div class="flex h-3 w-full overflow-hidden rounded-full bg-slate-100">
<div title="已关闭 8 起" :style="{width: '57.1429%', background: themeStore.themeColor}"></div>
<div title="审批中 3 起" :style="{width: '21.4286%', background: themeStore.otherColor.warning}"></div>
<div title="实施中 2 起" :style="{width: '14.2857%', background: themeStore.otherColor.success}"></div>
<div title="超期未关闭 1 起" :style="{width: '7.14286%', background: themeStore.otherColor.error}"></div>
</div>
<div class="grid grid-cols-2 gap-1.5">
<div class="flex items-center gap-1.5 rounded-lg px-2 py-1.5 bg-slate-50">
<span class="h-2 w-2 shrink-0 rounded-full" :style="{ background: themeStore.themeColor }"></span>
<span class="text-[11px] text-slate-500">已关闭</span>
<span class="ml-auto text-sm font-bold text-slate-800">8</span>
</div>
<div class="flex items-center gap-1.5 rounded-lg px-2 py-1.5 bg-slate-50">
<span class="h-2 w-2 shrink-0 rounded-full" :style="{ background: themeStore.otherColor.warning }"></span>
<span class="text-[11px] text-slate-500">审批中</span>
<span class="ml-auto text-sm font-bold text-slate-800">3</span>
</div>
<div class="flex items-center gap-1.5 rounded-lg px-2 py-1.5 bg-slate-50">
<span class="h-2 w-2 shrink-0 rounded-full" :style="{ background: themeStore.otherColor.success }"></span>
<span class="text-[11px] text-slate-500">实施中</span>
<span class="ml-auto text-sm font-bold text-slate-800">2</span>
</div>
<div class="flex items-center gap-1.5 rounded-lg px-2 py-1.5 bg-red-50">
<span class="h-2 w-2 shrink-0 rounded-full" :style="{ background: themeStore.otherColor.error }"></span>
<span class="text-[11px] text-slate-500">超期未关闭</span>
<span class="ml-auto text-sm font-bold" :style="{ color: themeStore.otherColor.error }">1</span>
</div>
</div>
</div>
</NCard>
<!-- 近一年验收结论占比 -->
<NCard :bordered="false" size="small" :style="{ borderRadius: themeStore.themeRadius + 'px',marginTop:'16px' }">
<div class="flex items-center mb-3 gap-2">
<Icon icon="akar-icons:file" class="size-16px" :style="{ color: themeStore.themeColor }" />
<p class="text-13px font-700 text-#64749a">尚未关闭的变更所处状态</p>
<p class="text-11px text-#94a3b8">共 {{openTotal}} 项</p>
<p class="text-13px font-700 text-#64749a">近一年验收结论占比</p>
<p class="text-11px text-#94a3b8">本车间 · 已验收变更</p>
</div>
<div class="flex flex-col gap-3">
<div v-for="s in homeData?.unclosed_status?.items" :key="s.status">
<div class="flex items-center gap-2 text-xs">
<span class="min-w-0 flex-1 text-slate-700">{{ s.label }}</span>
<span class="shrink-0 font-semibold text-slate-600">{{ s.count }} 项</span>
</div>
<div class="mt-1 h-1.5 w-full overflow-hidden rounded-full bg-slate-100">
<!-- 审批中 -->
<div v-if="s.status === 'APPROVING'" class="h-full rounded-full" :style="{ width: `${openTotal ? (s.count / openTotal) * 100 : 0}%`, background: themeStore.otherColor.warning }"></div>
<!-- 已驳回 -->
<div v-if="s.status === 'REJECTED'" class="h-full rounded-full" :style="{ width: `${openTotal ? (s.count / openTotal) * 100 : 0}%`, background: themeStore.otherColor.error }"></div>
<!-- 已批准待投用 -->
<div v-if="s.status === 'APPROVED'" class="h-full rounded-full" :style="{ width: `${openTotal ? (s.count / openTotal) * 100 : 0}%`, background: themeStore.themeColor }"></div>
<!-- 待验收 -->
<div v-if="s.status === 'IMPLEMENTED'" class="h-full rounded-full" :style="{ width: `${openTotal ? (s.count / openTotal) * 100 : 0}%`, background: themeStore.otherColor.success }"></div>
<!-- 待关闭 -->
<div v-if="s.status === 'ACCEPTED'" class="h-full rounded-full" :style="{ width: `${openTotal ? (s.count / openTotal) * 100 : 0}%`, background: themeStore.otherColor.error }"></div>
</div>
</div>
<div class="text-[11px] text-slate-400">阶段口径：审批中（含会签）→ 已批准待投用 → 待验收 → 待关闭 · 培训 / PSSR 线下签字后拍照上传，并入资料归档</div>
<NButton dashed type="primary" size="small" class="text-xs" @click="jumpTo('changeledger')">
明细见变更台账 →
</NButton>
<RingChart :data="DEPT_ACCEPT2" :colors="ACCEPT_COLORS2" />
<div class="flex items-center justify-between border-slate-200 border-t pt-2 border-dashed">
<span class="text-[11px] text-slate-400">投入合计（变更材料和实施费）</span>
<span class="text-xs font-bold" :style="{ color: themeStore.themeColor }">86.4 万元</span>
</div>
</NCard>
</NGi>
</NGrid>
</NGi>
<!-- 右侧 -->
<NGi span="24 s:24 m:24 l:8">
<!-- 被驳回信息处理 -->
<NCard :bordered="false" size="small" :style="{ borderRadius: themeStore.themeRadius + 'px' }">
<div class="flex items-center mb-3 gap-2">
<Icon icon="system-uicons:reset" class="size-16px" :style="{ color: themeStore.themeColor }" />
<p class="text-13px font-700 text-#64749a">被驳回信息处理</p>
<p class="text-11px text-#94a3b8">修改后可重新提交</p>
</div>
<div class="flex flex-col gap-3">
<template v-if="homeData?.rejected_todo?.total > 0">
<div
v-for="r in homeData?.rejected_todo?.items?.slice(0, 1)"
:key="r.id"
class="border border-red-100 bg-red-50/50 px-3.5 py-2.5"
:style="{
borderRadius: themeStore.themeRadius + 'px',
}"
>
<div class="flex items-center gap-2">
<NTag type="error" size="small" class="text-11px">已驳回</NTag>
<span class="font-mono text-[11px] text-slate-400">{{ r.change_no }}</span>
<span class="ml-auto text-[11px] text-slate-400">{{ r.rejected_at?.slice(0, 10) }}</span>
</div>
<div class="mt-0.5 text-sm font-medium text-slate-800">{{ r.title }}</div>
<div class="mt-0.5 text-[11px] leading-4 text-red-600/80">驳回原因：{{ r.reject_comment }}</div>
<div class="mt-0.5 text-[11px] text-slate-400">驳回人：{{r.reject_user_name}}</div>
<NButton ghost type="error" size="small" class="text-xs mt-1.5" @click="jumpTo('my_initiatechange',r.change_id)">修改重报 →</NButton>
</div>
<NButton dashed type="error" size="small" class="text-xs" @click="jumpTo('my_mytask')">
还有 {{ (homeData?.rejected_todo?.total - 1) > 0 ? (homeData?.rejected_todo?.total - 1) : 0 }} 条驳回，前往我的任务处理 →
</NButton>
</template>
<template v-else>
<p class="text-xs text-slate-400 text-center">暂无数据</p>
</template>
</div>
</NCard>
<!-- 资料归档待办 -->
<NCard :bordered="false" size="small" :style="{ borderRadius: themeStore.themeRadius + 'px',marginTop:'16px' }">
<div class="flex items-center mb-3 gap-2">
<Icon icon="quill:folder-open" class="size-16px" :style="{ color: themeStore.themeColor }" />
<p class="text-13px font-700 text-#64749a">资料归档待办</p>
<p class="text-11px text-#94a3b8">{{homeData?.archive_todo?.total || 0}} 项待补交</p>
</div>
<div class="flex flex-col gap-3">
<div v-for="d in homeData?.archive_todo?.items" :key="d.change_id" class="rounded-lg border border-[#ACC6E5] bg-[#EAF0F9]/40 px-3.5 py-2.5">
<div class="flex items-center gap-2">
<NTag type="warning" size="small" class="text-11px">待归档</NTag>
<span class="font-mono text-[11px] text-slate-400">{{ d.change_no }}</span>
</div>
<div class="mt-0.5 text-sm font-medium text-slate-800">{{ d.title }}</div>
<div class="mt-0.5 line-clamp-1 text-[11px] leading-4 text-slate-400">缺项：{{ d.missing_names }}</div>
<NButton type="primary" size="small" class="text-xs mt-1.5" @click="jumpTo('details_closedoc',d.change_id)">
去补交（资料关闭页上传）→
</NButton>
</div>
<div class="text-[11px] leading-4 text-slate-400">上传纸质扫描件 / 照片即视为完成确认并联动归档清单；支持传错删除重传、阶段性保存</div>
</div>
</NCard>
</NGi>
</NGrid>
</div>
</NSpin>
src/views/home/modules/template8.vue
+1 -1
View File
@@ -44,7 +44,7 @@ const jumpTo = (key: string,qid:number = 0) => {
}
// 打开变更详情
const openDetail = (row: any) => {
routerPushByKey("details_index",{ query: { id: row?.change_id?.toString(),status:row?.status?.toString() || '',key:'home' } });
routerPushByKey("details_index",{ query: { id: row?.change_id?.toString(),key:'home' } });
};
// 获取当前时间字符串
src/views/home/modules/template9.vue
+1 -1
View File
@@ -44,7 +44,7 @@ const jumpTo = (key: string,qid:number = 0) => {
}
// 打开变更详情
const openDetail = (row: any) => {
routerPushByKey("details_index",{ query: { id: row?.change_id?.toString(),status:row?.status?.toString() || '',key:'home' } });
routerPushByKey("details_index",{ query: { id: row?.change_id?.toString(),key:'home' } });
};
// 获取当前时间字符串
src/views/my/effect/index.vue
+1 -1
View File
@@ -57,7 +57,7 @@ const exportFile = async () => {
}
// 查看
const openRow = (r: any) => {
routerPushByKey("details_index",{ query: { id: r?.change_id?.toString(),status:r?.status?.toString() || '',key:'my_effect' } });
routerPushByKey("details_index",{ query: { id: r?.change_id?.toString(),key:'my_effect' } });
};
// 分页改变
src/views/my/highRisk/modules/risk.vue
+1 -1
View File
@@ -35,7 +35,7 @@ const list = ref<any[]>([]);
// 查看变更
const jumpTo = (r: any) => {
routerPushByKey("details_index",{ query: { id: r?.change_id?.toString(),status:r?.status?.toString() || '',key:'my_highrisk' } });
routerPushByKey("details_index",{ query: { id: r?.change_id?.toString(),key:'my_highrisk' } });
};
// 查看分析记录
const viewAnalysis = (record: any) => {
src/views/my/myTask/index.vue
+1 -1
View File
@@ -82,7 +82,7 @@ const jumpTo = (act: string) => {
// 打开详情、修改重报
const openDetail = (c: any,type:string = '') => {
if(type==='detail'){
routerPushByKey("details_index",{ query: { id: c?.change_id?.toString(),status:c?.status?.toString() || '',key:'my_mytask' } });
routerPushByKey("details_index",{ query: { id: c?.change_id?.toString(),key:'my_mytask' } });
}
if(type==='edit'){
routerPushByKey("my_initiatechange",{ query: { id: c?.change_id?.toString() } });
src/views/my/pendingChange/index.vue
+1 -1
View File
@@ -44,7 +44,7 @@ const downloadFile = (file: any) => {
};
// 打开变更单
const openChange = (record: any) => {
routerPushByKey("details_index",{ query: { id: record?.id?.toString(),status:record?.status?.toString() || '',key:'my_pendingchange' } });
routerPushByKey("details_index",{ query: { id: record?.id?.toString(),key:'my_pendingchange' } });
};
// 分页改变
src/views/my/pssr/index.vue
+1 -1
View File
@@ -79,7 +79,7 @@ const downloadTemplate = (record: any) => {
};
// 打开变更单
const openChange = (r: any) => {
routerPushByKey("details_index",{ query: { id: r?.id?.toString(),status:r?.status?.toString() || '',key:'my_pssr' } });
routerPushByKey("details_index",{ query: { id: r?.id?.toString(),key:'my_pssr' } });
};
// 分页改变
src/views/professionalStatistics/index.vue
+189
View File
@@ -0,0 +1,189 @@
<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';
const appStore = useAppStore();
const themeStore = useThemeStore();
const gap = computed(() => (appStore.isMobile ? 0 : 16));
const profEff = ref<{d: string, days: number, me?: boolean, target?: boolean}[]>([
{ d: `陈质量（本人）`, days: 1.8, me: true },
{ d: "仪表专业均值", days: 2.1, me: false },
{ d: "设备专业均值", days: 2.2, me: false },
{ d: "工艺专业均值", days: 2.6, me: false },
{ d: "考核目标", days: 2.5, me: false, target: true },
]);
const DEPT_ACCEPT = [
{ name: "工艺", value: 52 },
{ name: "设备", value: 49 },
{ name: "管理", value: 25 },
];
const ACCEPT_COLORS = ["#2080f0", "#7CC242", "#F5A623"];
const profHighRisk = [
{ id: "MOC-2026-R01-0035", status: '审批中', title: 'R-201 反应釜搅拌器电机更换（55kW→75kW 防爆电机）' },
{ id: "MOC-2026-R01-0036", status: '审批中', title: '聚合反应温度控制上限调整（78℃→82℃）' },
{ id: "MOC-2026-R01-0037", status: '实施中', title: '原料环己烷供应商变更（新增 B 供应商）' },
];
</script>
<template>
<NSpace vertical :size="16">
<!-- 卡片数据 -->
<NGrid cols="s:1 m:5 l:5" responsive="screen" :x-gap="gap" :y-gap="16"
:style="{
'--theme-color': themeStore.themeColor,
'--success-color': themeStore.otherColor.success,
'--warning-color': themeStore.otherColor.warning,
}"
>
<NGi>
<div
class="flex-1 bg-white px-16px py-12px text-[#94a3b8]"
:style="{ borderRadius: themeStore.themeRadius + 'px', height: '100%' }"
>
<p class="text-12px font-600">本月会签 / 审批</p>
<div class="flex items-center">
<CountTo
:start-value="0"
:end-value="6"
class="text-24px font-600 text-[#333]"
/>
</div>
<p class="text-12px">口径：节点签出记录</p>
</div>
</NGi>
<NGi>
<div
class="flex-1 bg-white px-16px py-12px text-[#94a3b8]"
:style="{ borderRadius: themeStore.themeRadius + 'px', height: '100%' }"
>
<p class="text-12px font-600">我的会签平均耗时</p>
<div class="flex items-center">
<CountTo
:start-value="0"
:end-value="1.8"
:decimals="1"
class="text-26px font-600 text-[var(--success-color)]"
/><p class="text-26px font-600 text-[var(--success-color)]">天</p>
</div>
<p class="text-12px">口径：签收→签出时长 · 目标 ≤2.5 天</p>
</div>
</NGi>
<NGi>
<div
class="flex-1 bg-white px-16px py-12px text-[#94a3b8]"
:style="{ borderRadius: themeStore.themeRadius + 'px', height: '100%' }"
>
<p class="text-12px font-600">按时完成率</p>
<div class="flex items-center">
<CountTo
:start-value="0"
:end-value="95"
class="text-26px font-600 text-[var(--success-color)]"
/><p class="text-26px font-600 text-[var(--success-color)]">%</p>
</div>
<p class="text-12px">考核：目标 ≥90%</p>
</div>
</NGi>
<NGi>
<div
class="flex-1 bg-white px-16px py-12px text-[#94a3b8]"
:style="{ borderRadius: themeStore.themeRadius + 'px', height: '100%' }"
>
<p class="text-12px font-600">参与风险分析</p>
<div class="flex items-center">
<CountTo
:start-value="0"
:end-value="2"
class="text-26px font-600 text-[var(--theme-color)]"
/><p class="text-26px font-600 text-[var(--theme-color)]">次</p>
</div>
<p class="text-12px">口径：HAZOP / JSA 分析组成员（选择式）记录</p>
</div>
</NGi>
<NGi>
<div
class="flex-1 bg-white px-16px py-12px text-[#94a3b8]"
:style="{ borderRadius: themeStore.themeRadius + 'px', height: '100%' }"
>
<p class="text-12px font-600">当前待我审批</p>
<div class="flex items-center">
<CountTo
:start-value="0"
:end-value="1"
class="text-26px font-600 text-[var(--warning-color)]"
/>
</div>
<p class="text-12px">实时 · 与工作台同源</p>
</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%',
'--theme-color': themeStore.themeColor,
'--error-color': themeStore.otherColor.error,
'--warning-color': themeStore.otherColor.warning,
'--success-color': themeStore.otherColor.success,
'--error-bg': getColorWithOpacity(themeStore.otherColor.error,0.1),
'--warning-bg': getColorWithOpacity(themeStore.otherColor.warning,0.1),
'--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="space-y-3">
<div v-for="e in profEff" :key="e.d">
<div class="mb-1 flex items-center justify-between text-xs">
<span :class="e.me ? 'font-semibold text-[var(--theme-color)]' : 'text-slate-600'">{{ e.d }}</span>
<span :class="e.target ? 'text-slate-400' : e.days > 2.5 ? 'font-medium text-[var(--error-color)]' : 'text-slate-500'">{{ e.days }} 天{{ e.target ? "（标线）" : "" }}</span>
</div>
<div class="h-2 overflow-hidden rounded-full bg-slate-100">
<div class="h-full rounded-full" :class="e.target ? 'bg-slate-300' : e.me ? 'bg-[var(--theme-color)]' : e.days > 2.5 ? 'bg-[var(--error-color)]' : 'bg-[#6E93C6]'" :style="{ width: `${Math.min(100, (e.days / 4) * 100)}%` }" />
</div>
</div>
<p class="text-[11px] text-slate-400">考核数据来源：节点签收 → 签出时长自动统计；连续两月超标将纳入绩效面谈</p>
</div>
</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%' }">
<p class=" text-base font-semibold border-b border-slate-100 p-3">本专业高风险在办（直达风险分析）</p>
<div class="py-3 px-4">
<div class="space-y-2 pt-1">
<div v-for="c in profHighRisk" :key="c.id" @click="emit('go', 'risk')" class="cursor-pointer flex w-full items-center gap-2 rounded-lg border px-3 py-2 text-left hover:border-red-300 hover:bg-red-50/30">
<span class="min-w-0 flex-1">
<span class="block truncate text-sm font-medium text-slate-800">{{ c.title }}</span>
<span class="text-[11px] text-slate-400">{{ c.id }} · {{ c.status }}</span>
</span>
<ChevronRight class="h-3.5 w-3.5 shrink-0 text-slate-300" />
</div>
<p class="text-[11px] text-slate-400">更多高风险场景与分析记录见「本专业高风险」页</p>
</div>
</div>
</NCard>
</NGi>
</NGrid>
</NSpace>
</template>
<style scoped></style>
src/views/professionalStatistics/modules/ringChart.vue
+88
View File
@@ -0,0 +1,88 @@
<script setup lang="ts">
import { ref } from 'vue';
import { useEcharts } from '@/hooks/common/echarts';
defineOptions({
name: 'RingChart'
});
const props = defineProps<{ data?: { name: string; value: number }[]; colors?: string[] }>();
const { domRef, updateOptions } = useEcharts(() => ({
tooltip: {
trigger: 'item',
formatter: '{b}: {c} ({d}%)'
},
legend: {
bottom: 0,
left: 'center',
icon: 'circle',
itemWidth: 10,
itemHeight: 10,
itemStyle: {
borderWidth: 0
},
},
title: {
text: `{a|39}\n{b|本专业变更}`,
textStyle: {
rich: {
a: {
fontSize: 24,
color: '#333',
fontWeight: 800,
align: 'center',
verticalAlign: 'middle',
},
b: {
fontSize: 12,
color: '#999',
align: 'center',
verticalAlign: 'middle',
fontWeight: 500,
padding: [5, 0, 0, 0]
}
}
},
left: 'center',
top: '35%',
},
series: [
{
type: 'pie',
color: ['#5da8ff', '#8e9dff', '#fedc69', '#26deca'],
radius: ['45%', '65%'],
center: ['50%', '45%'],
avoidLabelOverlap: false,
label: {
show: false,
position: 'outside',
formatter: '{b}\n{c} ({d}%)',
fontSize: 12,
},
labelLine: {
show: true,
length: 10,
length2: 10
},
data: [] as { name: string; value: number }[]
}
]
}));
function init() {
updateOptions(opts => {
opts.series[0].data = props.data || [];
opts.series[0].color = props.colors || [];
return opts;
});
}
init();
</script>
<template>
<div ref="domRef" class="w-full h-220px overflow-hidden"></div>
</template>
<style scoped></style>