style: 统一行尾符为LF（gitattributes renormalize，无代码变更）
This commit is contained in:
@@ -1,332 +1,332 @@
|
||||
<script setup lang="ts">
|
||||
import { onMounted, onUnmounted, ref } from 'vue';
|
||||
import { Icon } from '@iconify/vue'
|
||||
import { useThemeStore } from '@/store/modules/theme';
|
||||
import { useRouterPush } from '@/hooks/common/router';
|
||||
import { getColorWithOpacity } from '@/utils/common';
|
||||
import { homeAdminApi } from "@/service/api/statistics";
|
||||
|
||||
const themeStore = useThemeStore();
|
||||
const { routerPushByKey } = useRouterPush();
|
||||
|
||||
const loading = ref<boolean>(false);
|
||||
// 时间显示
|
||||
const clock = ref<string>('');
|
||||
let timer: any = null;
|
||||
// 首页数据
|
||||
const homeData = ref<any>(null);
|
||||
|
||||
// 跳转变更申请页面、变更台账、我的任务、发起变更
|
||||
const jumpTo = (key: string,qid:number = 0) => {
|
||||
if(key==='details_approval' && qid){
|
||||
routerPushByKey(key,{ query: { id: qid.toString(),key:'home' } });
|
||||
}else if(key==='details_index' && qid){
|
||||
routerPushByKey(key,{ query: { id: qid.toString(),key:'home' } });
|
||||
}else{
|
||||
routerPushByKey(key as any);
|
||||
}
|
||||
}
|
||||
|
||||
// 获取当前时间字符串
|
||||
const getCurrentTimeStr = () => {
|
||||
const now = new Date();
|
||||
const year = now.getFullYear();
|
||||
const month = now.getMonth() + 1;
|
||||
const date = now.getDate();
|
||||
const week = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'][now.getDay()];
|
||||
const hours = String(now.getHours()).padStart(2, '0');
|
||||
const minutes = String(now.getMinutes()).padStart(2, '0');
|
||||
return `${year}年${month}月${date}日 ${week} ${hours}:${minutes}`;
|
||||
}
|
||||
// 更新时间显示
|
||||
const tick = () => {
|
||||
clock.value = getCurrentTimeStr();
|
||||
// 计算距离下一分钟还有多少毫秒（+50ms 容错，防止定时器提前触发）
|
||||
const now = new Date();
|
||||
const delay = (60 - now.getSeconds()) * 1000 - now.getMilliseconds() + 50;
|
||||
timer = setTimeout(tick, delay);
|
||||
}
|
||||
|
||||
// 获取数据
|
||||
const getData = async () => {
|
||||
loading.value = true;
|
||||
const {data,error} = await homeAdminApi();
|
||||
if(!error){
|
||||
homeData.value = data;
|
||||
}
|
||||
loading.value = false;
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
tick();
|
||||
getData();
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
if(timer){
|
||||
clearTimeout(timer);
|
||||
timer = null;
|
||||
}
|
||||
})
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<NSpin :show="loading" size="small">
|
||||
<div class="space-y-3.5">
|
||||
<NCard :bordered="false" size="small" :style="{ borderRadius: themeStore.themeRadius + 'px' }">
|
||||
<NGrid :x-gap="16" :y-gap="16" responsive="screen" item-responsive>
|
||||
<NGi span="24 s:24 m:16">
|
||||
<div class="flex-y-center">
|
||||
<p
|
||||
class="py-1.5 px-1.5 flex items-center justify-center bg-[rgb(var(--primary-color))] text-white text-xs font-bold"
|
||||
:style="{ borderRadius: themeStore.themeRadius + 'px' }"
|
||||
>
|
||||
MOC
|
||||
</p>
|
||||
<p class="pl-12px text-14px font-semibold">我的工作台</p>
|
||||
</div>
|
||||
</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 ghost size="small" @click="jumpTo('systemmanage_setting')">
|
||||
系统设置
|
||||
</NButton>
|
||||
</NGi>
|
||||
</NGrid>
|
||||
</NCard>
|
||||
<!-- 卡片数据 -->
|
||||
<NGrid cols="s:1 m:2 l:2" responsive="screen" :x-gap="16" :y-gap="16">
|
||||
<NGi>
|
||||
<div
|
||||
class="flex-1 bg-[#fff2f0] px-16px py-12px text-[#e15555]"
|
||||
:style="{ borderRadius: themeStore.themeRadius + 'px' }"
|
||||
>
|
||||
<p class="text-12px font-600">待关闭确认</p>
|
||||
<div class="flex justify-between">
|
||||
<CountTo
|
||||
:start-value="0"
|
||||
:end-value="homeData?.close_pending?.total || 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('changeledger')"
|
||||
>
|
||||
<p class="text-12px font-600">在途变更</p>
|
||||
<div class="flex justify-between">
|
||||
<CountTo
|
||||
:start-value="0"
|
||||
:end-value="homeData?.open_changes?.total || 0"
|
||||
class="text-26px font-600 text-[#333]"
|
||||
/>
|
||||
</div>
|
||||
<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="ix:success" 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?.close_pending?.total > 0">
|
||||
<div v-for="row in homeData?.close_pending?.items || []" :key="row.change_id"
|
||||
class="flex w-full items-center gap-3 border px-3.5 py-2.5 text-left transition"
|
||||
:style="{borderRadius: themeStore.themeRadius + 'px'}"
|
||||
>
|
||||
<div class="min-w-0 flex-1">
|
||||
<div class="flex flex-wrap items-center gap-2">
|
||||
<!-- 状态标签 -->
|
||||
<NTag size="small" type="error">待关闭</NTag>
|
||||
<p class="flex-1 truncate text-sm font-medium text-slate-800 dark:text-white">{{ row.title }}</p>
|
||||
<span v-if="row.status==='CLOSED'" class="text-[11px]" :style="{color: themeStore.otherColor.success}">关闭时间 2026/9/28 14:29:57</span>
|
||||
<NButton size="small" type="success" class="text-xs" @click="jumpTo('details_approval', row.change_id)">确认关闭</NButton>
|
||||
<NButton size="small" ghost class="text-xs" @click="jumpTo('details_index', row.change_id)">打开变更单</NButton>
|
||||
</div>
|
||||
<div class="mt-0.5 truncate text-[11px] text-slate-400 flex items-center gap-2">
|
||||
<span>{{ row.change_no }}</span>
|
||||
<span>{{row.org_name}}</span>
|
||||
<span>{{row.applicant_name}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else>
|
||||
<div class="h-100% flex items-center justify-center py-3">
|
||||
<NEmpty description="暂无数据" class="!text-xs"></NEmpty>
|
||||
</div>
|
||||
</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="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?.open_changes?.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">
|
||||
<div class="flex items-center gap-2">
|
||||
<NTag v-for="item in homeData?.open_changes?.items || []" :key="item.status" size="small" type="primary">{{item.label}}{{item.count}}</NTag>
|
||||
</div>
|
||||
<template v-if="homeData?.open_changes?.total > 0">
|
||||
<div v-for="row in homeData?.open_changes?.rows || []" :key="row.change_id" @click="jumpTo('details_index', row.change_id)"
|
||||
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 v-if="row.overdue_days" size="small" type="error">超期{{row.overdue_days}}天</NTag>
|
||||
<NButton text><Icon icon="formkit:right" class="size-14px text-slate-400" /></NButton>
|
||||
</div>
|
||||
<div class="mt-1 truncate flex items-center gap-2 text-[11px] text-slate-400">
|
||||
<span>{{ row.change_no }}</span>
|
||||
<span>{{row.org_name}}</span>
|
||||
<span>{{row.applicant_name}}</span>
|
||||
<span v-if="row.pending_handlers">当前待办：{{row.pending_handlers}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else>
|
||||
<div class="h-100% flex items-center justify-center py-3">
|
||||
<NEmpty description="暂无数据" class="!text-xs"></NEmpty>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</NCard>
|
||||
</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 flex-wrap gap-2">
|
||||
<Icon icon="keyline-icons:sliders-horizontal" 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="space-y-2.5 mt-3">
|
||||
<div class="rounded-md border px-3.5 py-2.5 flex items-center cursor-pointer" @click="jumpTo('systemmanage_template')">
|
||||
<div class="flex-1">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="min-w-0 flex-1 truncate text-sm font-medium text-slate-800">审批流程设置</span>
|
||||
</div>
|
||||
<div class="mt-1 text-[11px] text-slate-400">按等级路由 · 会签 · 最终批准</div>
|
||||
</div>
|
||||
<NButton text><Icon icon="formkit:right" class="size-14px text-slate-400" /></NButton>
|
||||
</div>
|
||||
<div class="rounded-md border px-3.5 py-2.5 flex items-center cursor-pointer" @click="jumpTo('systemmanage_setting')">
|
||||
<div class="flex-1">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="min-w-0 flex-1 truncate text-sm font-medium text-slate-800">变更类型管理</span>
|
||||
</div>
|
||||
<div class="mt-1 text-[11px] text-slate-400">工艺 / 设备 / 管理 · 支持自定义</div>
|
||||
</div>
|
||||
<NButton text><Icon icon="formkit:right" class="size-14px text-slate-400" /></NButton>
|
||||
</div>
|
||||
<div class="rounded-md border px-3.5 py-2.5 flex items-center cursor-pointer" @click="jumpTo('systemmanage_setting')">
|
||||
<div class="flex-1">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="min-w-0 flex-1 truncate text-sm font-medium text-slate-800">变更等级规则</span>
|
||||
</div>
|
||||
<div class="mt-1 text-[11px] text-slate-400">等级评分表 · 重要 / 一般判定</div>
|
||||
</div>
|
||||
<NButton text><Icon icon="formkit:right" class="size-14px text-slate-400" /></NButton>
|
||||
</div>
|
||||
<div class="rounded-md border px-3.5 py-2.5 flex items-center cursor-pointer" @click="jumpTo('systemmanage_user')">
|
||||
<div class="flex-1">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="min-w-0 flex-1 truncate text-sm font-medium text-slate-800">账号设定</span>
|
||||
</div>
|
||||
<div class="mt-1 text-[11px] text-slate-400">用户账号 · 组织 · 启停用</div>
|
||||
</div>
|
||||
<NButton text><Icon icon="formkit:right" class="size-14px text-slate-400" /></NButton>
|
||||
</div>
|
||||
<div class="rounded-md border px-3.5 py-2.5 flex items-center cursor-pointer" @click="jumpTo('systemmanage_role')">
|
||||
<div class="flex-1">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="min-w-0 flex-1 truncate text-sm font-medium text-slate-800">角色和权限分配</span>
|
||||
</div>
|
||||
<div class="mt-1 text-[11px] text-slate-400">角色 · 菜单 · 数据权限</div>
|
||||
</div>
|
||||
<NButton text><Icon icon="formkit:right" class="size-14px text-slate-400" /></NButton>
|
||||
</div>
|
||||
<div class="rounded-md border px-3.5 py-2.5 flex items-center cursor-pointer" @click="jumpTo('systemmanage_setting')">
|
||||
<div class="flex-1">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="min-w-0 flex-1 truncate text-sm font-medium text-slate-800">通知提醒设置</span>
|
||||
</div>
|
||||
<div class="mt-1 text-[11px] text-slate-400">超期 · 临期 · 关闭提醒</div>
|
||||
</div>
|
||||
<NButton text><Icon icon="formkit:right" class="size-14px text-slate-400" /></NButton>
|
||||
</div>
|
||||
<div class="rounded-md border px-3.5 py-2.5 flex items-center cursor-pointer" @click="jumpTo('systemmanage_setting')">
|
||||
<div class="flex-1">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="min-w-0 flex-1 truncate text-sm font-medium text-slate-800">AI 开关与维护</span>
|
||||
</div>
|
||||
<div class="mt-1 text-[11px] text-slate-400">AI 辅助开关 · 模型与提示词</div>
|
||||
</div>
|
||||
<NButton text><Icon icon="formkit:right" class="size-14px text-slate-400" /></NButton>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
:style="{
|
||||
'--warning-bg': getColorWithOpacity(themeStore.otherColor.warning, 0.1),
|
||||
'--warning-color': themeStore.otherColor.warning,
|
||||
'--success-color': themeStore.otherColor.success,
|
||||
'--success-bg': getColorWithOpacity(themeStore.otherColor.success, 0.1),
|
||||
}"
|
||||
>
|
||||
<div v-if="homeData?.ai_assist_enabled" class="mt-3 flex items-center gap-2 rounded-lg bg-[var(--success-bg)] px-3 py-2 text-[11px] text-[var(--success-color)]">
|
||||
<Icon icon="lucide:sparkles" class="size-12px" />
|
||||
AI 辅助当前已启用 · 可在「AI 开关与维护」调整
|
||||
</div>
|
||||
<div v-else class="mt-3 flex items-center gap-2 rounded-lg bg-[var(--warning-bg)] px-3 py-2 text-[11px] text-[var(--warning-color)]">
|
||||
<Icon icon="lucide:sparkles" class="size-12px" />
|
||||
AI 辅助当前未启用 · 可在「AI 开关与维护」调整
|
||||
</div>
|
||||
</div>
|
||||
</NCard>
|
||||
</NGi>
|
||||
</NGrid>
|
||||
</div>
|
||||
</NSpin>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
<script setup lang="ts">
|
||||
import { onMounted, onUnmounted, ref } from 'vue';
|
||||
import { Icon } from '@iconify/vue'
|
||||
import { useThemeStore } from '@/store/modules/theme';
|
||||
import { useRouterPush } from '@/hooks/common/router';
|
||||
import { getColorWithOpacity } from '@/utils/common';
|
||||
import { homeAdminApi } from "@/service/api/statistics";
|
||||
|
||||
const themeStore = useThemeStore();
|
||||
const { routerPushByKey } = useRouterPush();
|
||||
|
||||
const loading = ref<boolean>(false);
|
||||
// 时间显示
|
||||
const clock = ref<string>('');
|
||||
let timer: any = null;
|
||||
// 首页数据
|
||||
const homeData = ref<any>(null);
|
||||
|
||||
// 跳转变更申请页面、变更台账、我的任务、发起变更
|
||||
const jumpTo = (key: string,qid:number = 0) => {
|
||||
if(key==='details_approval' && qid){
|
||||
routerPushByKey(key,{ query: { id: qid.toString(),key:'home' } });
|
||||
}else if(key==='details_index' && qid){
|
||||
routerPushByKey(key,{ query: { id: qid.toString(),key:'home' } });
|
||||
}else{
|
||||
routerPushByKey(key as any);
|
||||
}
|
||||
}
|
||||
|
||||
// 获取当前时间字符串
|
||||
const getCurrentTimeStr = () => {
|
||||
const now = new Date();
|
||||
const year = now.getFullYear();
|
||||
const month = now.getMonth() + 1;
|
||||
const date = now.getDate();
|
||||
const week = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'][now.getDay()];
|
||||
const hours = String(now.getHours()).padStart(2, '0');
|
||||
const minutes = String(now.getMinutes()).padStart(2, '0');
|
||||
return `${year}年${month}月${date}日 ${week} ${hours}:${minutes}`;
|
||||
}
|
||||
// 更新时间显示
|
||||
const tick = () => {
|
||||
clock.value = getCurrentTimeStr();
|
||||
// 计算距离下一分钟还有多少毫秒（+50ms 容错，防止定时器提前触发）
|
||||
const now = new Date();
|
||||
const delay = (60 - now.getSeconds()) * 1000 - now.getMilliseconds() + 50;
|
||||
timer = setTimeout(tick, delay);
|
||||
}
|
||||
|
||||
// 获取数据
|
||||
const getData = async () => {
|
||||
loading.value = true;
|
||||
const {data,error} = await homeAdminApi();
|
||||
if(!error){
|
||||
homeData.value = data;
|
||||
}
|
||||
loading.value = false;
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
tick();
|
||||
getData();
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
if(timer){
|
||||
clearTimeout(timer);
|
||||
timer = null;
|
||||
}
|
||||
})
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<NSpin :show="loading" size="small">
|
||||
<div class="space-y-3.5">
|
||||
<NCard :bordered="false" size="small" :style="{ borderRadius: themeStore.themeRadius + 'px' }">
|
||||
<NGrid :x-gap="16" :y-gap="16" responsive="screen" item-responsive>
|
||||
<NGi span="24 s:24 m:16">
|
||||
<div class="flex-y-center">
|
||||
<p
|
||||
class="py-1.5 px-1.5 flex items-center justify-center bg-[rgb(var(--primary-color))] text-white text-xs font-bold"
|
||||
:style="{ borderRadius: themeStore.themeRadius + 'px' }"
|
||||
>
|
||||
MOC
|
||||
</p>
|
||||
<p class="pl-12px text-14px font-semibold">我的工作台</p>
|
||||
</div>
|
||||
</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 ghost size="small" @click="jumpTo('systemmanage_setting')">
|
||||
系统设置
|
||||
</NButton>
|
||||
</NGi>
|
||||
</NGrid>
|
||||
</NCard>
|
||||
<!-- 卡片数据 -->
|
||||
<NGrid cols="s:1 m:2 l:2" responsive="screen" :x-gap="16" :y-gap="16">
|
||||
<NGi>
|
||||
<div
|
||||
class="flex-1 bg-[#fff2f0] px-16px py-12px text-[#e15555]"
|
||||
:style="{ borderRadius: themeStore.themeRadius + 'px' }"
|
||||
>
|
||||
<p class="text-12px font-600">待关闭确认</p>
|
||||
<div class="flex justify-between">
|
||||
<CountTo
|
||||
:start-value="0"
|
||||
:end-value="homeData?.close_pending?.total || 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('changeledger')"
|
||||
>
|
||||
<p class="text-12px font-600">在途变更</p>
|
||||
<div class="flex justify-between">
|
||||
<CountTo
|
||||
:start-value="0"
|
||||
:end-value="homeData?.open_changes?.total || 0"
|
||||
class="text-26px font-600 text-[#333]"
|
||||
/>
|
||||
</div>
|
||||
<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="ix:success" 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?.close_pending?.total > 0">
|
||||
<div v-for="row in homeData?.close_pending?.items || []" :key="row.change_id"
|
||||
class="flex w-full items-center gap-3 border px-3.5 py-2.5 text-left transition"
|
||||
:style="{borderRadius: themeStore.themeRadius + 'px'}"
|
||||
>
|
||||
<div class="min-w-0 flex-1">
|
||||
<div class="flex flex-wrap items-center gap-2">
|
||||
<!-- 状态标签 -->
|
||||
<NTag size="small" type="error">待关闭</NTag>
|
||||
<p class="flex-1 truncate text-sm font-medium text-slate-800 dark:text-white">{{ row.title }}</p>
|
||||
<span v-if="row.status==='CLOSED'" class="text-[11px]" :style="{color: themeStore.otherColor.success}">关闭时间 2026/9/28 14:29:57</span>
|
||||
<NButton size="small" type="success" class="text-xs" @click="jumpTo('details_approval', row.change_id)">确认关闭</NButton>
|
||||
<NButton size="small" ghost class="text-xs" @click="jumpTo('details_index', row.change_id)">打开变更单</NButton>
|
||||
</div>
|
||||
<div class="mt-0.5 truncate text-[11px] text-slate-400 flex items-center gap-2">
|
||||
<span>{{ row.change_no }}</span>
|
||||
<span>{{row.org_name}}</span>
|
||||
<span>{{row.applicant_name}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else>
|
||||
<div class="h-100% flex items-center justify-center py-3">
|
||||
<NEmpty description="暂无数据" class="!text-xs"></NEmpty>
|
||||
</div>
|
||||
</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="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?.open_changes?.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">
|
||||
<div class="flex items-center gap-2">
|
||||
<NTag v-for="item in homeData?.open_changes?.items || []" :key="item.status" size="small" type="primary">{{item.label}}{{item.count}}</NTag>
|
||||
</div>
|
||||
<template v-if="homeData?.open_changes?.total > 0">
|
||||
<div v-for="row in homeData?.open_changes?.rows || []" :key="row.change_id" @click="jumpTo('details_index', row.change_id)"
|
||||
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 v-if="row.overdue_days" size="small" type="error">超期{{row.overdue_days}}天</NTag>
|
||||
<NButton text><Icon icon="formkit:right" class="size-14px text-slate-400" /></NButton>
|
||||
</div>
|
||||
<div class="mt-1 truncate flex items-center gap-2 text-[11px] text-slate-400">
|
||||
<span>{{ row.change_no }}</span>
|
||||
<span>{{row.org_name}}</span>
|
||||
<span>{{row.applicant_name}}</span>
|
||||
<span v-if="row.pending_handlers">当前待办：{{row.pending_handlers}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else>
|
||||
<div class="h-100% flex items-center justify-center py-3">
|
||||
<NEmpty description="暂无数据" class="!text-xs"></NEmpty>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</NCard>
|
||||
</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 flex-wrap gap-2">
|
||||
<Icon icon="keyline-icons:sliders-horizontal" 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="space-y-2.5 mt-3">
|
||||
<div class="rounded-md border px-3.5 py-2.5 flex items-center cursor-pointer" @click="jumpTo('systemmanage_template')">
|
||||
<div class="flex-1">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="min-w-0 flex-1 truncate text-sm font-medium text-slate-800">审批流程设置</span>
|
||||
</div>
|
||||
<div class="mt-1 text-[11px] text-slate-400">按等级路由 · 会签 · 最终批准</div>
|
||||
</div>
|
||||
<NButton text><Icon icon="formkit:right" class="size-14px text-slate-400" /></NButton>
|
||||
</div>
|
||||
<div class="rounded-md border px-3.5 py-2.5 flex items-center cursor-pointer" @click="jumpTo('systemmanage_setting')">
|
||||
<div class="flex-1">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="min-w-0 flex-1 truncate text-sm font-medium text-slate-800">变更类型管理</span>
|
||||
</div>
|
||||
<div class="mt-1 text-[11px] text-slate-400">工艺 / 设备 / 管理 · 支持自定义</div>
|
||||
</div>
|
||||
<NButton text><Icon icon="formkit:right" class="size-14px text-slate-400" /></NButton>
|
||||
</div>
|
||||
<div class="rounded-md border px-3.5 py-2.5 flex items-center cursor-pointer" @click="jumpTo('systemmanage_setting')">
|
||||
<div class="flex-1">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="min-w-0 flex-1 truncate text-sm font-medium text-slate-800">变更等级规则</span>
|
||||
</div>
|
||||
<div class="mt-1 text-[11px] text-slate-400">等级评分表 · 重要 / 一般判定</div>
|
||||
</div>
|
||||
<NButton text><Icon icon="formkit:right" class="size-14px text-slate-400" /></NButton>
|
||||
</div>
|
||||
<div class="rounded-md border px-3.5 py-2.5 flex items-center cursor-pointer" @click="jumpTo('systemmanage_user')">
|
||||
<div class="flex-1">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="min-w-0 flex-1 truncate text-sm font-medium text-slate-800">账号设定</span>
|
||||
</div>
|
||||
<div class="mt-1 text-[11px] text-slate-400">用户账号 · 组织 · 启停用</div>
|
||||
</div>
|
||||
<NButton text><Icon icon="formkit:right" class="size-14px text-slate-400" /></NButton>
|
||||
</div>
|
||||
<div class="rounded-md border px-3.5 py-2.5 flex items-center cursor-pointer" @click="jumpTo('systemmanage_role')">
|
||||
<div class="flex-1">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="min-w-0 flex-1 truncate text-sm font-medium text-slate-800">角色和权限分配</span>
|
||||
</div>
|
||||
<div class="mt-1 text-[11px] text-slate-400">角色 · 菜单 · 数据权限</div>
|
||||
</div>
|
||||
<NButton text><Icon icon="formkit:right" class="size-14px text-slate-400" /></NButton>
|
||||
</div>
|
||||
<div class="rounded-md border px-3.5 py-2.5 flex items-center cursor-pointer" @click="jumpTo('systemmanage_setting')">
|
||||
<div class="flex-1">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="min-w-0 flex-1 truncate text-sm font-medium text-slate-800">通知提醒设置</span>
|
||||
</div>
|
||||
<div class="mt-1 text-[11px] text-slate-400">超期 · 临期 · 关闭提醒</div>
|
||||
</div>
|
||||
<NButton text><Icon icon="formkit:right" class="size-14px text-slate-400" /></NButton>
|
||||
</div>
|
||||
<div class="rounded-md border px-3.5 py-2.5 flex items-center cursor-pointer" @click="jumpTo('systemmanage_setting')">
|
||||
<div class="flex-1">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="min-w-0 flex-1 truncate text-sm font-medium text-slate-800">AI 开关与维护</span>
|
||||
</div>
|
||||
<div class="mt-1 text-[11px] text-slate-400">AI 辅助开关 · 模型与提示词</div>
|
||||
</div>
|
||||
<NButton text><Icon icon="formkit:right" class="size-14px text-slate-400" /></NButton>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
:style="{
|
||||
'--warning-bg': getColorWithOpacity(themeStore.otherColor.warning, 0.1),
|
||||
'--warning-color': themeStore.otherColor.warning,
|
||||
'--success-color': themeStore.otherColor.success,
|
||||
'--success-bg': getColorWithOpacity(themeStore.otherColor.success, 0.1),
|
||||
}"
|
||||
>
|
||||
<div v-if="homeData?.ai_assist_enabled" class="mt-3 flex items-center gap-2 rounded-lg bg-[var(--success-bg)] px-3 py-2 text-[11px] text-[var(--success-color)]">
|
||||
<Icon icon="lucide:sparkles" class="size-12px" />
|
||||
AI 辅助当前已启用 · 可在「AI 开关与维护」调整
|
||||
</div>
|
||||
<div v-else class="mt-3 flex items-center gap-2 rounded-lg bg-[var(--warning-bg)] px-3 py-2 text-[11px] text-[var(--warning-color)]">
|
||||
<Icon icon="lucide:sparkles" class="size-12px" />
|
||||
AI 辅助当前未启用 · 可在「AI 开关与维护」调整
|
||||
</div>
|
||||
</div>
|
||||
</NCard>
|
||||
</NGi>
|
||||
</NGrid>
|
||||
</div>
|
||||
</NSpin>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
|
||||
@@ -1,347 +1,347 @@
|
||||
<script setup lang="ts">
|
||||
import { computed, onMounted, onUnmounted, ref } from 'vue';
|
||||
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 { systemConfigApi } from "@/service/api/system";
|
||||
import { homeNonApproverApi } from "@/service/api/statistics";
|
||||
|
||||
const themeStore = useThemeStore();
|
||||
const { routerPushByKey } = useRouterPush();
|
||||
|
||||
const loading = ref<boolean>(false);
|
||||
// 变更临期天数
|
||||
const remindDays = ref<number>(0);
|
||||
// 变更类型列表
|
||||
const typeList = ref<any>([]);
|
||||
// 变更等级列表
|
||||
const levelList = ref<any>([]);
|
||||
// 时间显示
|
||||
const clock = ref<string>('');
|
||||
let timer: any = null;
|
||||
// 首页数据
|
||||
const homeData = ref<any>(null);
|
||||
|
||||
// 跳转页面
|
||||
const jumpTo = (key: string) => {
|
||||
routerPushByKey(key as any);
|
||||
}
|
||||
|
||||
// 获取当前时间字符串
|
||||
const getCurrentTimeStr = () => {
|
||||
const now = new Date();
|
||||
const year = now.getFullYear();
|
||||
const month = now.getMonth() + 1;
|
||||
const date = now.getDate();
|
||||
const week = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'][now.getDay()];
|
||||
const hours = String(now.getHours()).padStart(2, '0');
|
||||
const minutes = String(now.getMinutes()).padStart(2, '0');
|
||||
return `${year}年${month}月${date}日 ${week} ${hours}:${minutes}`;
|
||||
}
|
||||
// 更新时间显示
|
||||
const tick = () => {
|
||||
clock.value = getCurrentTimeStr();
|
||||
// 计算距离下一分钟还有多少毫秒（+50ms 容错，防止定时器提前触发）
|
||||
const now = new Date();
|
||||
const delay = (60 - now.getSeconds()) * 1000 - now.getMilliseconds() + 50;
|
||||
timer = setTimeout(tick, delay);
|
||||
}
|
||||
|
||||
// 获取数据
|
||||
const getData = async () => {
|
||||
loading.value = true;
|
||||
const {data,error} = await homeNonApproverApi();
|
||||
if(!error){
|
||||
homeData.value = data;
|
||||
}
|
||||
loading.value = false;
|
||||
}
|
||||
|
||||
// 获取系统配置
|
||||
const getConfig = async () => {
|
||||
const {data,error} = await systemConfigApi();
|
||||
if(!error){
|
||||
// 解析 临时变更临期提醒
|
||||
const remindDaysGroup = data.find((group:{group_key:string}) => group.group_key === 'change_remind');
|
||||
if (remindDaysGroup) {
|
||||
remindDaysGroup?.items.forEach((item:any) => {
|
||||
if(item.item_key === 'temp_due_remind_days'){
|
||||
remindDays.value = Number(item.value);
|
||||
}
|
||||
})
|
||||
}
|
||||
// 解析 变更类型设置
|
||||
const changeTypeGroup = data.find((group:{group_key:string}) => group.group_key === 'change_type');
|
||||
if (changeTypeGroup) {
|
||||
typeList.value = changeTypeGroup.items;
|
||||
}
|
||||
// 解析 变更等级设置
|
||||
const changeLevelGroup = data.find((group:{group_key:string}) => group.group_key === 'change_level');
|
||||
if (changeLevelGroup) {
|
||||
levelList.value = changeLevelGroup.items;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
tick();
|
||||
getConfig();
|
||||
getData();
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
if(timer){
|
||||
clearTimeout(timer);
|
||||
timer = null;
|
||||
}
|
||||
})
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<NSpin :show="loading" size="small">
|
||||
<div class="space-y-3.5">
|
||||
<NCard :bordered="false" size="small" :style="{ borderRadius: themeStore.themeRadius + 'px' }">
|
||||
<NGrid :x-gap="16" :y-gap="16" responsive="screen" item-responsive>
|
||||
<NGi span="24 s:24 m:12">
|
||||
<div class="flex-y-center">
|
||||
<p
|
||||
class="py-1.5 px-1.5 flex items-center justify-center bg-[rgb(var(--primary-color))] text-white text-xs font-bold"
|
||||
:style="{ borderRadius: themeStore.themeRadius + 'px' }"
|
||||
>
|
||||
MOC
|
||||
</p>
|
||||
<p class="pl-12px text-14px font-semibold">我的工作台</p>
|
||||
</div>
|
||||
</NGi>
|
||||
<NGi span="24 s:24 m:12" class="flex items-center justify-end gap-12px">
|
||||
<p class="text-#999 text-xs">{{clock}}</p>
|
||||
<NButton ghost size="small" @click="jumpTo('changeledger')">
|
||||
变更台账查询
|
||||
</NButton>
|
||||
<NButton ghost size="small" @click="jumpTo('docs_archives')">
|
||||
资料库查阅
|
||||
</NButton>
|
||||
</NGi>
|
||||
</NGrid>
|
||||
</NCard>
|
||||
<!-- 卡片数据 -->
|
||||
<NGrid cols="s:1 m:3 l:3" responsive="screen" :x-gap="16" :y-gap="16">
|
||||
<NGi>
|
||||
<div
|
||||
class="flex-1 bg-[#fff] px-16px py-12px cursor-pointer flex items-center gap-3"
|
||||
:style="{ borderRadius: themeStore.themeRadius + 'px' }"
|
||||
@click="jumpTo('changeledger')"
|
||||
>
|
||||
<div class="flex justify-between">
|
||||
<CountTo
|
||||
:start-value="0"
|
||||
:end-value="homeData?.summary?.open_total || 0"
|
||||
class="text-26px font-600"
|
||||
:style="{ color: themeStore.themeColor }"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-12px font-600">在办变更</p>
|
||||
<p class="text-12px text-slate-400">全厂 · 实时台账口径</p>
|
||||
</div>
|
||||
</div>
|
||||
</NGi>
|
||||
<NGi>
|
||||
<div
|
||||
class="flex-1 bg-[#fff] px-16px py-12px cursor-pointer flex items-center gap-3"
|
||||
:style="{ borderRadius: themeStore.themeRadius + 'px' }"
|
||||
@click="jumpTo('changeledger')"
|
||||
>
|
||||
<div class="flex justify-between">
|
||||
<CountTo
|
||||
:start-value="0"
|
||||
:end-value="homeData?.summary?.important_open_total || 0"
|
||||
class="text-26px font-600"
|
||||
:style="{ color: themeStore.themeColor }"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-12px font-600">其中重要变更</p>
|
||||
<p class="text-12px text-slate-400">重点关注对象</p>
|
||||
</div>
|
||||
</div>
|
||||
</NGi>
|
||||
<NGi>
|
||||
<div
|
||||
class="flex-1 bg-[#fff] px-16px py-12px cursor-pointer flex items-center gap-3"
|
||||
:style="{ borderRadius: themeStore.themeRadius + 'px' }"
|
||||
@click="jumpTo('changeledger')"
|
||||
>
|
||||
<div class="flex justify-between">
|
||||
<CountTo
|
||||
:start-value="0"
|
||||
:end-value="homeData?.summary?.month_closed || 0"
|
||||
class="text-26px font-600"
|
||||
:style="{ color: themeStore.themeColor }"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-12px font-600">本月已关闭</p>
|
||||
<p class="text-12px text-slate-400">验收闭环完成</p>
|
||||
</div>
|
||||
</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?.recent?.items?.length > 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?.recent?.items?.length > 0">
|
||||
<div v-for="row in homeData?.recent?.items || []" :key="row.change_id" @click="jumpTo('changeledger')"
|
||||
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">{{row.status_label}}</NTag>
|
||||
<NTag v-if="row.status==='APPROVED'" size="small" type="success">{{row.status_label}}</NTag>
|
||||
<NTag v-if="row.status==='IMPLEMENTED'" size="small" type="success">{{row.status_label}}</NTag>
|
||||
<NTag v-if="row.status==='ACCEPTED'" size="small" type="error">{{row.status_label}}</NTag>
|
||||
<NTag v-if="row.status==='CLOSED'" size="small" type="success">{{row.status_label}}</NTag>
|
||||
<NTag v-if="row.status==='WITHDRAWN'" size="small" type="error">{{row.status_label}}</NTag>
|
||||
<NTag v-if="row.status==='REJECTED'" size="small" type="error">{{row.status_label}}</NTag>
|
||||
<span class="min-w-0 flex-1 truncate text-sm font-medium text-slate-800 dark:text-white">{{ row.title }}</span>
|
||||
<span v-if="row.status_changed_at" class="ml-auto text-[11px] text-slate-400">{{row.status_changed_at?.slice(0, 16)}}</span>
|
||||
</div>
|
||||
<div class="mt-1 flex items-center gap-2 font-mono text-[11px] text-slate-400">
|
||||
<span>{{ row.change_no }}</span>
|
||||
<span>{{row.org_name}}</span>
|
||||
<span>{{row.applicant_name}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else>
|
||||
<div class="h-100% flex items-center justify-center py-3">
|
||||
<NEmpty description="暂无数据" class="!text-xs"></NEmpty>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</NCard>
|
||||
<NGrid :x-gap="16" :y-gap="16" responsive="screen" item-responsive class="mt-[16px]">
|
||||
<!-- 全厂变更阶段分布 -->
|
||||
<NGi span="24 s:24 m:24 l:24">
|
||||
<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 mt-2px">点击进入台账按阶段查看</p>
|
||||
</div>
|
||||
<div class="flex gap-2">
|
||||
<NButton v-for="item in homeData?.stage_dist || []" :key="item.key" size="small" ghost type="primary" class="text-xs" @click="jumpTo('changeledger')">{{item.label}} {{item.count}}</NButton>
|
||||
</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="lucide:shield-alert" 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="space-y-2.5">
|
||||
<div class="rounded-md border px-3.5 py-2.5 flex items-center cursor-pointer" @click="jumpTo('docs_archives')">
|
||||
<div class="flex-1">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="min-w-0 flex-1 truncate text-sm font-medium text-slate-800">操作规程查阅</span>
|
||||
</div>
|
||||
<div class="mt-1 text-[11px] text-slate-400">现行有效版本 · 只读</div>
|
||||
</div>
|
||||
<NButton text><Icon icon="formkit:right" class="size-14px text-slate-400" /></NButton>
|
||||
</div>
|
||||
<div class="rounded-md border px-3.5 py-2.5 flex items-center cursor-pointer" @click="jumpTo('docs_archives')">
|
||||
<div class="flex-1">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="min-w-0 flex-1 truncate text-sm font-medium text-slate-800">PID 图纸查阅</span>
|
||||
</div>
|
||||
<div class="mt-1 text-[11px] text-slate-400">现行图纸 · 只读</div>
|
||||
</div>
|
||||
<NButton text><Icon icon="formkit:right" class="size-14px text-slate-400" /></NButton>
|
||||
</div>
|
||||
<div class="rounded-md border px-3.5 py-2.5 flex items-center cursor-pointer" @click="jumpTo('docs_query')">
|
||||
<div class="flex-1">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="min-w-0 flex-1 truncate text-sm font-medium text-slate-800">变更档案查阅</span>
|
||||
</div>
|
||||
<div class="mt-1 text-[11px] text-slate-400">已关闭变更归档包 · 只读</div>
|
||||
</div>
|
||||
<NButton text><Icon icon="formkit:right" class="size-14px text-slate-400" /></NButton>
|
||||
</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="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">变更趋势与分布 · 只读</p>
|
||||
</div>
|
||||
<div class="flex flex-col gap-3">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="text-xs text-slate-500 w-16">本月新增</span>
|
||||
<NProgress
|
||||
type="line"
|
||||
status="info"
|
||||
:percentage="((homeData?.stats?.month_created || 0) / 3) * 100"
|
||||
:height="10"
|
||||
border-radius="6px"
|
||||
>
|
||||
<span class="text-xs text-slate-700 font-semibold">{{homeData?.stats?.month_created || 0}}天</span>
|
||||
</NProgress>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="text-xs text-slate-500 w-16">本月关闭</span>
|
||||
<NProgress
|
||||
type="line"
|
||||
status="info"
|
||||
:percentage="((homeData?.stats?.month_closed || 0) / 3) * 100"
|
||||
:height="10"
|
||||
border-radius="6px"
|
||||
>
|
||||
<span class="text-xs text-slate-700 font-semibold" :style="{ color: themeStore.otherColor.error }">{{homeData?.stats?.month_closed || 0}}天</span>
|
||||
</NProgress>
|
||||
</div>
|
||||
<div class="flex items-center justify-between text-[11px] text-slate-400">
|
||||
<span>验收完全达到率 <b :style="{ color: themeStore.otherColor.success }">{{homeData?.stats?.accept_full_rate || 0}}%</b></span>
|
||||
<span>近一年口径</span>
|
||||
</div>
|
||||
<NButton size="small" ghost block class="text-xs" @click="jumpTo('factoryoverview')">查看统计报表<Icon icon="formkit:right" class="size-12px" /></NButton>
|
||||
</div>
|
||||
</NCard>
|
||||
</NGi>
|
||||
</NGrid>
|
||||
</div>
|
||||
</NSpin>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
<script setup lang="ts">
|
||||
import { computed, onMounted, onUnmounted, ref } from 'vue';
|
||||
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 { systemConfigApi } from "@/service/api/system";
|
||||
import { homeNonApproverApi } from "@/service/api/statistics";
|
||||
|
||||
const themeStore = useThemeStore();
|
||||
const { routerPushByKey } = useRouterPush();
|
||||
|
||||
const loading = ref<boolean>(false);
|
||||
// 变更临期天数
|
||||
const remindDays = ref<number>(0);
|
||||
// 变更类型列表
|
||||
const typeList = ref<any>([]);
|
||||
// 变更等级列表
|
||||
const levelList = ref<any>([]);
|
||||
// 时间显示
|
||||
const clock = ref<string>('');
|
||||
let timer: any = null;
|
||||
// 首页数据
|
||||
const homeData = ref<any>(null);
|
||||
|
||||
// 跳转页面
|
||||
const jumpTo = (key: string) => {
|
||||
routerPushByKey(key as any);
|
||||
}
|
||||
|
||||
// 获取当前时间字符串
|
||||
const getCurrentTimeStr = () => {
|
||||
const now = new Date();
|
||||
const year = now.getFullYear();
|
||||
const month = now.getMonth() + 1;
|
||||
const date = now.getDate();
|
||||
const week = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'][now.getDay()];
|
||||
const hours = String(now.getHours()).padStart(2, '0');
|
||||
const minutes = String(now.getMinutes()).padStart(2, '0');
|
||||
return `${year}年${month}月${date}日 ${week} ${hours}:${minutes}`;
|
||||
}
|
||||
// 更新时间显示
|
||||
const tick = () => {
|
||||
clock.value = getCurrentTimeStr();
|
||||
// 计算距离下一分钟还有多少毫秒（+50ms 容错，防止定时器提前触发）
|
||||
const now = new Date();
|
||||
const delay = (60 - now.getSeconds()) * 1000 - now.getMilliseconds() + 50;
|
||||
timer = setTimeout(tick, delay);
|
||||
}
|
||||
|
||||
// 获取数据
|
||||
const getData = async () => {
|
||||
loading.value = true;
|
||||
const {data,error} = await homeNonApproverApi();
|
||||
if(!error){
|
||||
homeData.value = data;
|
||||
}
|
||||
loading.value = false;
|
||||
}
|
||||
|
||||
// 获取系统配置
|
||||
const getConfig = async () => {
|
||||
const {data,error} = await systemConfigApi();
|
||||
if(!error){
|
||||
// 解析 临时变更临期提醒
|
||||
const remindDaysGroup = data.find((group:{group_key:string}) => group.group_key === 'change_remind');
|
||||
if (remindDaysGroup) {
|
||||
remindDaysGroup?.items.forEach((item:any) => {
|
||||
if(item.item_key === 'temp_due_remind_days'){
|
||||
remindDays.value = Number(item.value);
|
||||
}
|
||||
})
|
||||
}
|
||||
// 解析 变更类型设置
|
||||
const changeTypeGroup = data.find((group:{group_key:string}) => group.group_key === 'change_type');
|
||||
if (changeTypeGroup) {
|
||||
typeList.value = changeTypeGroup.items;
|
||||
}
|
||||
// 解析 变更等级设置
|
||||
const changeLevelGroup = data.find((group:{group_key:string}) => group.group_key === 'change_level');
|
||||
if (changeLevelGroup) {
|
||||
levelList.value = changeLevelGroup.items;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
tick();
|
||||
getConfig();
|
||||
getData();
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
if(timer){
|
||||
clearTimeout(timer);
|
||||
timer = null;
|
||||
}
|
||||
})
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<NSpin :show="loading" size="small">
|
||||
<div class="space-y-3.5">
|
||||
<NCard :bordered="false" size="small" :style="{ borderRadius: themeStore.themeRadius + 'px' }">
|
||||
<NGrid :x-gap="16" :y-gap="16" responsive="screen" item-responsive>
|
||||
<NGi span="24 s:24 m:12">
|
||||
<div class="flex-y-center">
|
||||
<p
|
||||
class="py-1.5 px-1.5 flex items-center justify-center bg-[rgb(var(--primary-color))] text-white text-xs font-bold"
|
||||
:style="{ borderRadius: themeStore.themeRadius + 'px' }"
|
||||
>
|
||||
MOC
|
||||
</p>
|
||||
<p class="pl-12px text-14px font-semibold">我的工作台</p>
|
||||
</div>
|
||||
</NGi>
|
||||
<NGi span="24 s:24 m:12" class="flex items-center justify-end gap-12px">
|
||||
<p class="text-#999 text-xs">{{clock}}</p>
|
||||
<NButton ghost size="small" @click="jumpTo('changeledger')">
|
||||
变更台账查询
|
||||
</NButton>
|
||||
<NButton ghost size="small" @click="jumpTo('docs_archives')">
|
||||
资料库查阅
|
||||
</NButton>
|
||||
</NGi>
|
||||
</NGrid>
|
||||
</NCard>
|
||||
<!-- 卡片数据 -->
|
||||
<NGrid cols="s:1 m:3 l:3" responsive="screen" :x-gap="16" :y-gap="16">
|
||||
<NGi>
|
||||
<div
|
||||
class="flex-1 bg-[#fff] px-16px py-12px cursor-pointer flex items-center gap-3"
|
||||
:style="{ borderRadius: themeStore.themeRadius + 'px' }"
|
||||
@click="jumpTo('changeledger')"
|
||||
>
|
||||
<div class="flex justify-between">
|
||||
<CountTo
|
||||
:start-value="0"
|
||||
:end-value="homeData?.summary?.open_total || 0"
|
||||
class="text-26px font-600"
|
||||
:style="{ color: themeStore.themeColor }"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-12px font-600">在办变更</p>
|
||||
<p class="text-12px text-slate-400">全厂 · 实时台账口径</p>
|
||||
</div>
|
||||
</div>
|
||||
</NGi>
|
||||
<NGi>
|
||||
<div
|
||||
class="flex-1 bg-[#fff] px-16px py-12px cursor-pointer flex items-center gap-3"
|
||||
:style="{ borderRadius: themeStore.themeRadius + 'px' }"
|
||||
@click="jumpTo('changeledger')"
|
||||
>
|
||||
<div class="flex justify-between">
|
||||
<CountTo
|
||||
:start-value="0"
|
||||
:end-value="homeData?.summary?.important_open_total || 0"
|
||||
class="text-26px font-600"
|
||||
:style="{ color: themeStore.themeColor }"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-12px font-600">其中重要变更</p>
|
||||
<p class="text-12px text-slate-400">重点关注对象</p>
|
||||
</div>
|
||||
</div>
|
||||
</NGi>
|
||||
<NGi>
|
||||
<div
|
||||
class="flex-1 bg-[#fff] px-16px py-12px cursor-pointer flex items-center gap-3"
|
||||
:style="{ borderRadius: themeStore.themeRadius + 'px' }"
|
||||
@click="jumpTo('changeledger')"
|
||||
>
|
||||
<div class="flex justify-between">
|
||||
<CountTo
|
||||
:start-value="0"
|
||||
:end-value="homeData?.summary?.month_closed || 0"
|
||||
class="text-26px font-600"
|
||||
:style="{ color: themeStore.themeColor }"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-12px font-600">本月已关闭</p>
|
||||
<p class="text-12px text-slate-400">验收闭环完成</p>
|
||||
</div>
|
||||
</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?.recent?.items?.length > 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?.recent?.items?.length > 0">
|
||||
<div v-for="row in homeData?.recent?.items || []" :key="row.change_id" @click="jumpTo('changeledger')"
|
||||
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">{{row.status_label}}</NTag>
|
||||
<NTag v-if="row.status==='APPROVED'" size="small" type="success">{{row.status_label}}</NTag>
|
||||
<NTag v-if="row.status==='IMPLEMENTED'" size="small" type="success">{{row.status_label}}</NTag>
|
||||
<NTag v-if="row.status==='ACCEPTED'" size="small" type="error">{{row.status_label}}</NTag>
|
||||
<NTag v-if="row.status==='CLOSED'" size="small" type="success">{{row.status_label}}</NTag>
|
||||
<NTag v-if="row.status==='WITHDRAWN'" size="small" type="error">{{row.status_label}}</NTag>
|
||||
<NTag v-if="row.status==='REJECTED'" size="small" type="error">{{row.status_label}}</NTag>
|
||||
<span class="min-w-0 flex-1 truncate text-sm font-medium text-slate-800 dark:text-white">{{ row.title }}</span>
|
||||
<span v-if="row.status_changed_at" class="ml-auto text-[11px] text-slate-400">{{row.status_changed_at?.slice(0, 16)}}</span>
|
||||
</div>
|
||||
<div class="mt-1 flex items-center gap-2 font-mono text-[11px] text-slate-400">
|
||||
<span>{{ row.change_no }}</span>
|
||||
<span>{{row.org_name}}</span>
|
||||
<span>{{row.applicant_name}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else>
|
||||
<div class="h-100% flex items-center justify-center py-3">
|
||||
<NEmpty description="暂无数据" class="!text-xs"></NEmpty>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</NCard>
|
||||
<NGrid :x-gap="16" :y-gap="16" responsive="screen" item-responsive class="mt-[16px]">
|
||||
<!-- 全厂变更阶段分布 -->
|
||||
<NGi span="24 s:24 m:24 l:24">
|
||||
<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 mt-2px">点击进入台账按阶段查看</p>
|
||||
</div>
|
||||
<div class="flex gap-2">
|
||||
<NButton v-for="item in homeData?.stage_dist || []" :key="item.key" size="small" ghost type="primary" class="text-xs" @click="jumpTo('changeledger')">{{item.label}} {{item.count}}</NButton>
|
||||
</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="lucide:shield-alert" 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="space-y-2.5">
|
||||
<div class="rounded-md border px-3.5 py-2.5 flex items-center cursor-pointer" @click="jumpTo('docs_archives')">
|
||||
<div class="flex-1">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="min-w-0 flex-1 truncate text-sm font-medium text-slate-800">操作规程查阅</span>
|
||||
</div>
|
||||
<div class="mt-1 text-[11px] text-slate-400">现行有效版本 · 只读</div>
|
||||
</div>
|
||||
<NButton text><Icon icon="formkit:right" class="size-14px text-slate-400" /></NButton>
|
||||
</div>
|
||||
<div class="rounded-md border px-3.5 py-2.5 flex items-center cursor-pointer" @click="jumpTo('docs_archives')">
|
||||
<div class="flex-1">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="min-w-0 flex-1 truncate text-sm font-medium text-slate-800">PID 图纸查阅</span>
|
||||
</div>
|
||||
<div class="mt-1 text-[11px] text-slate-400">现行图纸 · 只读</div>
|
||||
</div>
|
||||
<NButton text><Icon icon="formkit:right" class="size-14px text-slate-400" /></NButton>
|
||||
</div>
|
||||
<div class="rounded-md border px-3.5 py-2.5 flex items-center cursor-pointer" @click="jumpTo('docs_query')">
|
||||
<div class="flex-1">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="min-w-0 flex-1 truncate text-sm font-medium text-slate-800">变更档案查阅</span>
|
||||
</div>
|
||||
<div class="mt-1 text-[11px] text-slate-400">已关闭变更归档包 · 只读</div>
|
||||
</div>
|
||||
<NButton text><Icon icon="formkit:right" class="size-14px text-slate-400" /></NButton>
|
||||
</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="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">变更趋势与分布 · 只读</p>
|
||||
</div>
|
||||
<div class="flex flex-col gap-3">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="text-xs text-slate-500 w-16">本月新增</span>
|
||||
<NProgress
|
||||
type="line"
|
||||
status="info"
|
||||
:percentage="((homeData?.stats?.month_created || 0) / 3) * 100"
|
||||
:height="10"
|
||||
border-radius="6px"
|
||||
>
|
||||
<span class="text-xs text-slate-700 font-semibold">{{homeData?.stats?.month_created || 0}}天</span>
|
||||
</NProgress>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="text-xs text-slate-500 w-16">本月关闭</span>
|
||||
<NProgress
|
||||
type="line"
|
||||
status="info"
|
||||
:percentage="((homeData?.stats?.month_closed || 0) / 3) * 100"
|
||||
:height="10"
|
||||
border-radius="6px"
|
||||
>
|
||||
<span class="text-xs text-slate-700 font-semibold" :style="{ color: themeStore.otherColor.error }">{{homeData?.stats?.month_closed || 0}}天</span>
|
||||
</NProgress>
|
||||
</div>
|
||||
<div class="flex items-center justify-between text-[11px] text-slate-400">
|
||||
<span>验收完全达到率 <b :style="{ color: themeStore.otherColor.success }">{{homeData?.stats?.accept_full_rate || 0}}%</b></span>
|
||||
<span>近一年口径</span>
|
||||
</div>
|
||||
<NButton size="small" ghost block class="text-xs" @click="jumpTo('factoryoverview')">查看统计报表<Icon icon="formkit:right" class="size-12px" /></NButton>
|
||||
</div>
|
||||
</NCard>
|
||||
</NGi>
|
||||
</NGrid>
|
||||
</div>
|
||||
</NSpin>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
|
||||
@@ -1,447 +1,447 @@
|
||||
<script setup lang="ts">
|
||||
import { computed, onMounted, onUnmounted, ref } from 'vue';
|
||||
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 { systemConfigApi } from "@/service/api/system";
|
||||
import { homeApi } from "@/service/api/statistics";
|
||||
|
||||
const themeStore = useThemeStore();
|
||||
const { routerPushByKey } = useRouterPush();
|
||||
|
||||
const loading = ref<boolean>(false);
|
||||
// 变更临期天数
|
||||
const remindDays = ref<number>(0);
|
||||
// 变更类型列表
|
||||
const typeList = ref<any>([]);
|
||||
// 变更等级列表
|
||||
const levelList = ref<any>([]);
|
||||
// 时间显示
|
||||
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 jumpTo = (key: string,qid:number = 0) => {
|
||||
if(key==='my_initiatechange' && qid){
|
||||
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(key,{ query: { id: qid.toString(),key:'home' } });
|
||||
}else{
|
||||
routerPushByKey(key as any);
|
||||
}
|
||||
}
|
||||
|
||||
// 获取当前时间字符串
|
||||
const getCurrentTimeStr = () => {
|
||||
const now = new Date();
|
||||
const year = now.getFullYear();
|
||||
const month = now.getMonth() + 1;
|
||||
const date = now.getDate();
|
||||
const week = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'][now.getDay()];
|
||||
const hours = String(now.getHours()).padStart(2, '0');
|
||||
const minutes = String(now.getMinutes()).padStart(2, '0');
|
||||
return `${year}年${month}月${date}日 ${week} ${hours}:${minutes}`;
|
||||
}
|
||||
// 更新时间显示
|
||||
const tick = () => {
|
||||
clock.value = getCurrentTimeStr();
|
||||
// 计算距离下一分钟还有多少毫秒（+50ms 容错，防止定时器提前触发）
|
||||
const now = new Date();
|
||||
const delay = (60 - now.getSeconds()) * 1000 - now.getMilliseconds() + 50;
|
||||
timer = setTimeout(tick, delay);
|
||||
}
|
||||
|
||||
// 匹配对象
|
||||
const matchObj = (list:any,val:number) => {
|
||||
const obj = list.find((item:any) => item.value == val);
|
||||
return obj || null;
|
||||
}
|
||||
|
||||
// 获取数据
|
||||
const getData = async () => {
|
||||
loading.value = true;
|
||||
const {data,error} = await homeApi();
|
||||
if(!error){
|
||||
homeData.value = data;
|
||||
}
|
||||
loading.value = false;
|
||||
}
|
||||
|
||||
// 获取系统配置
|
||||
const getConfig = async () => {
|
||||
const {data,error} = await systemConfigApi();
|
||||
if(!error){
|
||||
// 解析 临时变更临期提醒
|
||||
const remindDaysGroup = data.find((group:{group_key:string}) => group.group_key === 'change_remind');
|
||||
if (remindDaysGroup) {
|
||||
remindDaysGroup?.items.forEach((item:any) => {
|
||||
if(item.item_key === 'temp_due_remind_days'){
|
||||
remindDays.value = Number(item.value);
|
||||
}
|
||||
})
|
||||
}
|
||||
// 解析 变更类型设置
|
||||
const changeTypeGroup = data.find((group:{group_key:string}) => group.group_key === 'change_type');
|
||||
if (changeTypeGroup) {
|
||||
typeList.value = changeTypeGroup.items;
|
||||
}
|
||||
// 解析 变更等级设置
|
||||
const changeLevelGroup = data.find((group:{group_key:string}) => group.group_key === 'change_level');
|
||||
if (changeLevelGroup) {
|
||||
levelList.value = changeLevelGroup.items;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
tick();
|
||||
getConfig();
|
||||
getData();
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
if(timer){
|
||||
clearTimeout(timer);
|
||||
timer = null;
|
||||
}
|
||||
})
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<NSpin :show="loading" size="small">
|
||||
<div class="space-y-3.5">
|
||||
<NCard :bordered="false" size="small" :style="{ borderRadius: themeStore.themeRadius + 'px' }">
|
||||
<NGrid :x-gap="16" :y-gap="16" responsive="screen" item-responsive>
|
||||
<NGi span="24 s:24 m:16">
|
||||
<div class="flex-y-center">
|
||||
<p
|
||||
class="py-1.5 px-1.5 flex items-center justify-center bg-[rgb(var(--primary-color))] text-white text-xs font-bold"
|
||||
:style="{ borderRadius: themeStore.themeRadius + 'px' }"
|
||||
>
|
||||
MOC
|
||||
</p>
|
||||
<p class="pl-12px text-14px font-semibold">我的工作台</p>
|
||||
</div>
|
||||
</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>
|
||||
</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>
|
||||
<div class="flex justify-between">
|
||||
<CountTo
|
||||
:start-value="0"
|
||||
:end-value="homeData?.archive_todo?.total || 0"
|
||||
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>
|
||||
</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"
|
||||
:end-value="homeData?.dept_stats?.overdue_total || 0"
|
||||
class="text-26px font-600"
|
||||
/>
|
||||
</div>
|
||||
<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="jumpTo('details_index',row.change_id)"
|
||||
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>
|
||||
<div class="h-100% flex items-center justify-center py-3">
|
||||
<NEmpty description="暂无数据" class="!text-xs"></NEmpty>
|
||||
</div>
|
||||
</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">
|
||||
<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>
|
||||
</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>
|
||||
</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>
|
||||
</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%' }">
|
||||
<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>
|
||||
</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>
|
||||
</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>
|
||||
<div class="h-100% flex items-center justify-center py-3">
|
||||
<NEmpty description="暂无数据" class="!text-xs"></NEmpty>
|
||||
</div>
|
||||
</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>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
<script setup lang="ts">
|
||||
import { computed, onMounted, onUnmounted, ref } from 'vue';
|
||||
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 { systemConfigApi } from "@/service/api/system";
|
||||
import { homeApi } from "@/service/api/statistics";
|
||||
|
||||
const themeStore = useThemeStore();
|
||||
const { routerPushByKey } = useRouterPush();
|
||||
|
||||
const loading = ref<boolean>(false);
|
||||
// 变更临期天数
|
||||
const remindDays = ref<number>(0);
|
||||
// 变更类型列表
|
||||
const typeList = ref<any>([]);
|
||||
// 变更等级列表
|
||||
const levelList = ref<any>([]);
|
||||
// 时间显示
|
||||
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 jumpTo = (key: string,qid:number = 0) => {
|
||||
if(key==='my_initiatechange' && qid){
|
||||
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(key,{ query: { id: qid.toString(),key:'home' } });
|
||||
}else{
|
||||
routerPushByKey(key as any);
|
||||
}
|
||||
}
|
||||
|
||||
// 获取当前时间字符串
|
||||
const getCurrentTimeStr = () => {
|
||||
const now = new Date();
|
||||
const year = now.getFullYear();
|
||||
const month = now.getMonth() + 1;
|
||||
const date = now.getDate();
|
||||
const week = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'][now.getDay()];
|
||||
const hours = String(now.getHours()).padStart(2, '0');
|
||||
const minutes = String(now.getMinutes()).padStart(2, '0');
|
||||
return `${year}年${month}月${date}日 ${week} ${hours}:${minutes}`;
|
||||
}
|
||||
// 更新时间显示
|
||||
const tick = () => {
|
||||
clock.value = getCurrentTimeStr();
|
||||
// 计算距离下一分钟还有多少毫秒（+50ms 容错，防止定时器提前触发）
|
||||
const now = new Date();
|
||||
const delay = (60 - now.getSeconds()) * 1000 - now.getMilliseconds() + 50;
|
||||
timer = setTimeout(tick, delay);
|
||||
}
|
||||
|
||||
// 匹配对象
|
||||
const matchObj = (list:any,val:number) => {
|
||||
const obj = list.find((item:any) => item.value == val);
|
||||
return obj || null;
|
||||
}
|
||||
|
||||
// 获取数据
|
||||
const getData = async () => {
|
||||
loading.value = true;
|
||||
const {data,error} = await homeApi();
|
||||
if(!error){
|
||||
homeData.value = data;
|
||||
}
|
||||
loading.value = false;
|
||||
}
|
||||
|
||||
// 获取系统配置
|
||||
const getConfig = async () => {
|
||||
const {data,error} = await systemConfigApi();
|
||||
if(!error){
|
||||
// 解析 临时变更临期提醒
|
||||
const remindDaysGroup = data.find((group:{group_key:string}) => group.group_key === 'change_remind');
|
||||
if (remindDaysGroup) {
|
||||
remindDaysGroup?.items.forEach((item:any) => {
|
||||
if(item.item_key === 'temp_due_remind_days'){
|
||||
remindDays.value = Number(item.value);
|
||||
}
|
||||
})
|
||||
}
|
||||
// 解析 变更类型设置
|
||||
const changeTypeGroup = data.find((group:{group_key:string}) => group.group_key === 'change_type');
|
||||
if (changeTypeGroup) {
|
||||
typeList.value = changeTypeGroup.items;
|
||||
}
|
||||
// 解析 变更等级设置
|
||||
const changeLevelGroup = data.find((group:{group_key:string}) => group.group_key === 'change_level');
|
||||
if (changeLevelGroup) {
|
||||
levelList.value = changeLevelGroup.items;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
tick();
|
||||
getConfig();
|
||||
getData();
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
if(timer){
|
||||
clearTimeout(timer);
|
||||
timer = null;
|
||||
}
|
||||
})
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<NSpin :show="loading" size="small">
|
||||
<div class="space-y-3.5">
|
||||
<NCard :bordered="false" size="small" :style="{ borderRadius: themeStore.themeRadius + 'px' }">
|
||||
<NGrid :x-gap="16" :y-gap="16" responsive="screen" item-responsive>
|
||||
<NGi span="24 s:24 m:16">
|
||||
<div class="flex-y-center">
|
||||
<p
|
||||
class="py-1.5 px-1.5 flex items-center justify-center bg-[rgb(var(--primary-color))] text-white text-xs font-bold"
|
||||
:style="{ borderRadius: themeStore.themeRadius + 'px' }"
|
||||
>
|
||||
MOC
|
||||
</p>
|
||||
<p class="pl-12px text-14px font-semibold">我的工作台</p>
|
||||
</div>
|
||||
</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>
|
||||
</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>
|
||||
<div class="flex justify-between">
|
||||
<CountTo
|
||||
:start-value="0"
|
||||
:end-value="homeData?.archive_todo?.total || 0"
|
||||
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>
|
||||
</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"
|
||||
:end-value="homeData?.dept_stats?.overdue_total || 0"
|
||||
class="text-26px font-600"
|
||||
/>
|
||||
</div>
|
||||
<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="jumpTo('details_index',row.change_id)"
|
||||
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>
|
||||
<div class="h-100% flex items-center justify-center py-3">
|
||||
<NEmpty description="暂无数据" class="!text-xs"></NEmpty>
|
||||
</div>
|
||||
</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">
|
||||
<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>
|
||||
</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>
|
||||
</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>
|
||||
</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%' }">
|
||||
<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>
|
||||
</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>
|
||||
</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>
|
||||
<div class="h-100% flex items-center justify-center py-3">
|
||||
<NEmpty description="暂无数据" class="!text-xs"></NEmpty>
|
||||
</div>
|
||||
</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>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
|
||||
@@ -1,406 +1,406 @@
|
||||
<script setup lang="ts">
|
||||
import { computed, onMounted, onUnmounted, ref } from 'vue';
|
||||
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 { systemConfigApi } from "@/service/api/system";
|
||||
import { homeProfessionalApi } from "@/service/api/statistics";
|
||||
|
||||
const themeStore = useThemeStore();
|
||||
const { routerPushByKey } = useRouterPush();
|
||||
|
||||
const loading = ref<boolean>(false);
|
||||
// 变更临期天数
|
||||
const remindDays = ref<number>(0);
|
||||
// 变更类型列表
|
||||
const typeList = ref<any>([]);
|
||||
// 变更等级列表
|
||||
const levelList = ref<any>([]);
|
||||
// 时间显示
|
||||
const clock = ref<string>('');
|
||||
let timer: any = null;
|
||||
// 首页数据
|
||||
const homeData = ref<any>(null);
|
||||
|
||||
// 跳转变更申请页面、变更台账、我的任务、发起变更
|
||||
const jumpTo = (key: string,qid:number = 0) => {
|
||||
if(key==='details_index' && qid){
|
||||
routerPushByKey(key,{ query: { id: qid.toString(),key:'home' } });
|
||||
}else if(key==='details_approval' && qid){
|
||||
routerPushByKey(key,{ query: { id: qid.toString(),key:'home' } });
|
||||
}else{
|
||||
routerPushByKey(key as any);
|
||||
}
|
||||
}
|
||||
|
||||
// 获取当前时间字符串
|
||||
const getCurrentTimeStr = () => {
|
||||
const now = new Date();
|
||||
const year = now.getFullYear();
|
||||
const month = now.getMonth() + 1;
|
||||
const date = now.getDate();
|
||||
const week = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'][now.getDay()];
|
||||
const hours = String(now.getHours()).padStart(2, '0');
|
||||
const minutes = String(now.getMinutes()).padStart(2, '0');
|
||||
return `${year}年${month}月${date}日 ${week} ${hours}:${minutes}`;
|
||||
}
|
||||
// 更新时间显示
|
||||
const tick = () => {
|
||||
clock.value = getCurrentTimeStr();
|
||||
// 计算距离下一分钟还有多少毫秒（+50ms 容错，防止定时器提前触发）
|
||||
const now = new Date();
|
||||
const delay = (60 - now.getSeconds()) * 1000 - now.getMilliseconds() + 50;
|
||||
timer = setTimeout(tick, delay);
|
||||
}
|
||||
|
||||
// 匹配对象
|
||||
const matchObj = (list:any,val:number) => {
|
||||
const obj = list.find((item:any) => item.value == val);
|
||||
return obj || null;
|
||||
}
|
||||
|
||||
// 获取数据
|
||||
const getData = async () => {
|
||||
loading.value = true;
|
||||
const {data,error} = await homeProfessionalApi();
|
||||
if(!error){
|
||||
homeData.value = data;
|
||||
}
|
||||
loading.value = false;
|
||||
}
|
||||
|
||||
// 获取系统配置
|
||||
const getConfig = async () => {
|
||||
const {data,error} = await systemConfigApi();
|
||||
if(!error){
|
||||
// 解析 临时变更临期提醒
|
||||
const remindDaysGroup = data.find((group:{group_key:string}) => group.group_key === 'change_remind');
|
||||
if (remindDaysGroup) {
|
||||
remindDaysGroup?.items.forEach((item:any) => {
|
||||
if(item.item_key === 'temp_due_remind_days'){
|
||||
remindDays.value = Number(item.value);
|
||||
}
|
||||
})
|
||||
}
|
||||
// 解析 变更类型设置
|
||||
const changeTypeGroup = data.find((group:{group_key:string}) => group.group_key === 'change_type');
|
||||
if (changeTypeGroup) {
|
||||
typeList.value = changeTypeGroup.items;
|
||||
}
|
||||
// 解析 变更等级设置
|
||||
const changeLevelGroup = data.find((group:{group_key:string}) => group.group_key === 'change_level');
|
||||
if (changeLevelGroup) {
|
||||
levelList.value = changeLevelGroup.items;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
tick();
|
||||
getConfig();
|
||||
getData();
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
if(timer){
|
||||
clearTimeout(timer);
|
||||
timer = null;
|
||||
}
|
||||
})
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<NSpin :show="loading" size="small">
|
||||
<div class="space-y-3.5">
|
||||
<NCard :bordered="false" size="small" :style="{ borderRadius: themeStore.themeRadius + 'px' }">
|
||||
<NGrid :x-gap="16" :y-gap="16" responsive="screen" item-responsive>
|
||||
<NGi span="24 s:24 m:12">
|
||||
<div class="flex-y-center">
|
||||
<p
|
||||
class="py-1.5 px-1.5 flex items-center justify-center bg-[rgb(var(--primary-color))] text-white text-xs font-bold"
|
||||
:style="{ borderRadius: themeStore.themeRadius + 'px' }"
|
||||
>
|
||||
MOC
|
||||
</p>
|
||||
<p class="pl-12px text-14px font-semibold">我的工作台</p>
|
||||
</div>
|
||||
</NGi>
|
||||
<NGi span="24 s:24 m:12" class="flex items-center justify-end gap-12px">
|
||||
<p class="text-#999 text-xs">{{clock}}</p>
|
||||
<NButton ghost size="small" @click="jumpTo('changeledger')">
|
||||
专业变更查询
|
||||
</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-[#fff] px-16px py-12px cursor-pointer flex items-center gap-3"
|
||||
:style="{ borderRadius: themeStore.themeRadius + 'px' }"
|
||||
@click="jumpTo('my_mytask')"
|
||||
>
|
||||
<div class="flex justify-between">
|
||||
<CountTo
|
||||
:start-value="0"
|
||||
:end-value="homeData?.todo_sign?.total || 0"
|
||||
class="text-26px font-600"
|
||||
:style="{ color: homeData?.todo_sign?.overdue_count > 0?themeStore.otherColor.error:themeStore.themeColor }"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-12px font-600">待我会签</p>
|
||||
<p v-if="homeData?.todo_sign?.overdue_count > 0" class="text-12px" :style="{ color: themeStore.otherColor.error }">其中超期 {{homeData?.todo_sign?.overdue_count}} 项 · 请优先处理</p>
|
||||
<p v-else class="text-12px text-slate-400">无超期</p>
|
||||
</div>
|
||||
</div>
|
||||
</NGi>
|
||||
<NGi>
|
||||
<div
|
||||
class="flex-1 bg-[#fff] px-16px py-12px cursor-pointer flex items-center gap-3"
|
||||
:style="{ borderRadius: themeStore.themeRadius + 'px' }"
|
||||
@click="jumpTo('professionalstatistics')"
|
||||
>
|
||||
<div class="flex justify-between">
|
||||
<CountTo
|
||||
:start-value="0"
|
||||
:end-value="homeData?.sign_stats?.month_signed || 0"
|
||||
class="text-26px font-600"
|
||||
:style="{ color: themeStore.themeColor }"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-12px font-600">本月已会签</p>
|
||||
<p class="text-12px text-slate-400">含驳回 {{homeData?.sign_stats?.month_rejected || 0}} 起 · 系统自动采集</p>
|
||||
</div>
|
||||
</div>
|
||||
</NGi>
|
||||
<NGi>
|
||||
<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_highrisk')"
|
||||
>
|
||||
<div class="flex justify-between">
|
||||
<CountTo
|
||||
:start-value="0"
|
||||
:end-value="homeData?.high_risk?.total || 0"
|
||||
class="text-26px font-600"
|
||||
:style="{ color: themeStore.themeColor }"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-12px font-600">在办高风险</p>
|
||||
<p class="text-12px text-slate-400">本专业相关 · 建议关注</p>
|
||||
</div>
|
||||
</div>
|
||||
</NGi>
|
||||
<NGi>
|
||||
<div
|
||||
class="flex-1 bg-[#fff] px-16px py-12px cursor-pointer flex items-center gap-3"
|
||||
:style="{ borderRadius: themeStore.themeRadius + 'px' }"
|
||||
@click="jumpTo('professionalstatistics')"
|
||||
>
|
||||
<div class="flex justify-between">
|
||||
<CountTo
|
||||
:start-value="0"
|
||||
:end-value="homeData?.sign_stats?.risk_analysis_count || 0"
|
||||
class="text-26px font-600"
|
||||
:style="{ color: themeStore.themeColor }"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-12px font-600">参与风险分析</p>
|
||||
<p class="text-12px text-slate-400">作为分析组成员（选择式）· 近一年</p>
|
||||
</div>
|
||||
</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="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?.todo_sign?.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?.todo_sign?.total > 0">
|
||||
<div v-for="row in homeData?.todo_sign?.items?.slice(0, 3) || []" :key="row.change_id" @click="jumpTo('details_approval',row.change_id)"
|
||||
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.overdue_status===2" class="text-xs" :style="{ color: themeStore.otherColor.error }">已超期 {{row.overdue_days || 0}} 天</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.step_name" size="small" type="warning">{{row.step_name}}</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.applicant_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?.todo_sign?.total - 3) > 0 ? (homeData?.todo_sign?.total - 3) : 0}}条，前往我的任务查看全部 →
|
||||
</NButton>
|
||||
</template>
|
||||
<template v-else>
|
||||
<div class="h-100% flex items-center justify-center py-3">
|
||||
<NEmpty description="暂无数据" class="!text-xs"></NEmpty>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</NCard>
|
||||
|
||||
<NGrid :x-gap="16" :y-gap="16" responsive="screen" item-responsive class="mt-[16px]">
|
||||
<!-- 最近已会签 -->
|
||||
<NGi span="24 s:24 m:24 l:24">
|
||||
<NCard :bordered="false" size="small" :style="{ borderRadius: themeStore.themeRadius + 'px' }">
|
||||
<div class="flex items-center mb-3 gap-2">
|
||||
<Icon icon="ix:success" 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 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">{{ 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 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>
|
||||
<div v-else class="h-100% flex items-center justify-center py-3">
|
||||
<NEmpty description="暂无数据" class="!text-xs"></NEmpty>
|
||||
</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="lucide:shield-alert" class="size-16px" :style="{ color: themeStore.themeColor }" />
|
||||
<p class="text-13px font-700 text-#64749a">高风险变更</p>
|
||||
<p class="text-11px text-#94a3b8">在办 · 建议重点关注</p>
|
||||
</div>
|
||||
<template v-if="homeData?.high_risk?.total > 0">
|
||||
<div class="space-y-2.5">
|
||||
<div v-for="h in homeData?.high_risk?.items || []" :key="h.record_id" class="rounded-md border border-amber-200 bg-amber-50/60 px-3.5 py-2.5">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="min-w-0 flex-1 truncate text-sm font-medium text-slate-800">{{ h.change_title }}</span>
|
||||
<NButton size="tiny" ghost type="warning" class="text-xs" @click="jumpTo('my_highrisk')">查看分析</NButton>
|
||||
</div>
|
||||
<div class="mt-1 text-[11px]" :style="{ color: themeStore.otherColor.warning }">{{ h.scene }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else>
|
||||
<div class="h-100% flex items-center justify-center py-3">
|
||||
<NEmpty description="暂无数据" class="!text-xs"></NEmpty>
|
||||
</div>
|
||||
</template>
|
||||
</NCard>
|
||||
<!-- 我的会签效率 -->
|
||||
<NCard :bordered="false" size="small" :style="{ borderRadius: themeStore.themeRadius + 'px',marginTop:'16px' }">
|
||||
<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">系统自动采集 · 近 30 天</p>
|
||||
</div>
|
||||
<div class="flex flex-col gap-3">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="text-xs text-slate-500 w-16">平均耗时</span>
|
||||
<NProgress
|
||||
type="line"
|
||||
status="info"
|
||||
:percentage="((homeData?.sign_stats?.avg_audit_days || 0) / 2) * 100"
|
||||
:height="10"
|
||||
border-radius="6px"
|
||||
>
|
||||
<span class="text-xs text-slate-700 font-semibold">{{homeData?.sign_stats?.avg_audit_days || 0}}天</span>
|
||||
</NProgress>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="text-xs text-slate-500 w-16">最长耗时</span>
|
||||
<NProgress
|
||||
type="line"
|
||||
status="error"
|
||||
:percentage="((homeData?.sign_stats?.max_audit_days || 0) / 2) * 100"
|
||||
:height="10"
|
||||
border-radius="6px"
|
||||
>
|
||||
<span class="text-xs text-slate-700 font-semibold" :style="{ color: themeStore.otherColor.error }">{{homeData?.sign_stats?.max_audit_days || 0}}天</span>
|
||||
</NProgress>
|
||||
</div>
|
||||
<div class="flex items-center justify-between text-[11px] text-slate-400">
|
||||
<span>会签及时率 <b :style="{ color: themeStore.otherColor.success }">{{homeData?.sign_stats?.timely_rate || 0}}%</b></span>
|
||||
<span>目标 2 天内签署</span>
|
||||
</div>
|
||||
</div>
|
||||
</NCard>
|
||||
</NGi>
|
||||
</NGrid>
|
||||
</div>
|
||||
</NSpin>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
<script setup lang="ts">
|
||||
import { computed, onMounted, onUnmounted, ref } from 'vue';
|
||||
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 { systemConfigApi } from "@/service/api/system";
|
||||
import { homeProfessionalApi } from "@/service/api/statistics";
|
||||
|
||||
const themeStore = useThemeStore();
|
||||
const { routerPushByKey } = useRouterPush();
|
||||
|
||||
const loading = ref<boolean>(false);
|
||||
// 变更临期天数
|
||||
const remindDays = ref<number>(0);
|
||||
// 变更类型列表
|
||||
const typeList = ref<any>([]);
|
||||
// 变更等级列表
|
||||
const levelList = ref<any>([]);
|
||||
// 时间显示
|
||||
const clock = ref<string>('');
|
||||
let timer: any = null;
|
||||
// 首页数据
|
||||
const homeData = ref<any>(null);
|
||||
|
||||
// 跳转变更申请页面、变更台账、我的任务、发起变更
|
||||
const jumpTo = (key: string,qid:number = 0) => {
|
||||
if(key==='details_index' && qid){
|
||||
routerPushByKey(key,{ query: { id: qid.toString(),key:'home' } });
|
||||
}else if(key==='details_approval' && qid){
|
||||
routerPushByKey(key,{ query: { id: qid.toString(),key:'home' } });
|
||||
}else{
|
||||
routerPushByKey(key as any);
|
||||
}
|
||||
}
|
||||
|
||||
// 获取当前时间字符串
|
||||
const getCurrentTimeStr = () => {
|
||||
const now = new Date();
|
||||
const year = now.getFullYear();
|
||||
const month = now.getMonth() + 1;
|
||||
const date = now.getDate();
|
||||
const week = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'][now.getDay()];
|
||||
const hours = String(now.getHours()).padStart(2, '0');
|
||||
const minutes = String(now.getMinutes()).padStart(2, '0');
|
||||
return `${year}年${month}月${date}日 ${week} ${hours}:${minutes}`;
|
||||
}
|
||||
// 更新时间显示
|
||||
const tick = () => {
|
||||
clock.value = getCurrentTimeStr();
|
||||
// 计算距离下一分钟还有多少毫秒（+50ms 容错，防止定时器提前触发）
|
||||
const now = new Date();
|
||||
const delay = (60 - now.getSeconds()) * 1000 - now.getMilliseconds() + 50;
|
||||
timer = setTimeout(tick, delay);
|
||||
}
|
||||
|
||||
// 匹配对象
|
||||
const matchObj = (list:any,val:number) => {
|
||||
const obj = list.find((item:any) => item.value == val);
|
||||
return obj || null;
|
||||
}
|
||||
|
||||
// 获取数据
|
||||
const getData = async () => {
|
||||
loading.value = true;
|
||||
const {data,error} = await homeProfessionalApi();
|
||||
if(!error){
|
||||
homeData.value = data;
|
||||
}
|
||||
loading.value = false;
|
||||
}
|
||||
|
||||
// 获取系统配置
|
||||
const getConfig = async () => {
|
||||
const {data,error} = await systemConfigApi();
|
||||
if(!error){
|
||||
// 解析 临时变更临期提醒
|
||||
const remindDaysGroup = data.find((group:{group_key:string}) => group.group_key === 'change_remind');
|
||||
if (remindDaysGroup) {
|
||||
remindDaysGroup?.items.forEach((item:any) => {
|
||||
if(item.item_key === 'temp_due_remind_days'){
|
||||
remindDays.value = Number(item.value);
|
||||
}
|
||||
})
|
||||
}
|
||||
// 解析 变更类型设置
|
||||
const changeTypeGroup = data.find((group:{group_key:string}) => group.group_key === 'change_type');
|
||||
if (changeTypeGroup) {
|
||||
typeList.value = changeTypeGroup.items;
|
||||
}
|
||||
// 解析 变更等级设置
|
||||
const changeLevelGroup = data.find((group:{group_key:string}) => group.group_key === 'change_level');
|
||||
if (changeLevelGroup) {
|
||||
levelList.value = changeLevelGroup.items;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
tick();
|
||||
getConfig();
|
||||
getData();
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
if(timer){
|
||||
clearTimeout(timer);
|
||||
timer = null;
|
||||
}
|
||||
})
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<NSpin :show="loading" size="small">
|
||||
<div class="space-y-3.5">
|
||||
<NCard :bordered="false" size="small" :style="{ borderRadius: themeStore.themeRadius + 'px' }">
|
||||
<NGrid :x-gap="16" :y-gap="16" responsive="screen" item-responsive>
|
||||
<NGi span="24 s:24 m:12">
|
||||
<div class="flex-y-center">
|
||||
<p
|
||||
class="py-1.5 px-1.5 flex items-center justify-center bg-[rgb(var(--primary-color))] text-white text-xs font-bold"
|
||||
:style="{ borderRadius: themeStore.themeRadius + 'px' }"
|
||||
>
|
||||
MOC
|
||||
</p>
|
||||
<p class="pl-12px text-14px font-semibold">我的工作台</p>
|
||||
</div>
|
||||
</NGi>
|
||||
<NGi span="24 s:24 m:12" class="flex items-center justify-end gap-12px">
|
||||
<p class="text-#999 text-xs">{{clock}}</p>
|
||||
<NButton ghost size="small" @click="jumpTo('changeledger')">
|
||||
专业变更查询
|
||||
</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-[#fff] px-16px py-12px cursor-pointer flex items-center gap-3"
|
||||
:style="{ borderRadius: themeStore.themeRadius + 'px' }"
|
||||
@click="jumpTo('my_mytask')"
|
||||
>
|
||||
<div class="flex justify-between">
|
||||
<CountTo
|
||||
:start-value="0"
|
||||
:end-value="homeData?.todo_sign?.total || 0"
|
||||
class="text-26px font-600"
|
||||
:style="{ color: homeData?.todo_sign?.overdue_count > 0?themeStore.otherColor.error:themeStore.themeColor }"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-12px font-600">待我会签</p>
|
||||
<p v-if="homeData?.todo_sign?.overdue_count > 0" class="text-12px" :style="{ color: themeStore.otherColor.error }">其中超期 {{homeData?.todo_sign?.overdue_count}} 项 · 请优先处理</p>
|
||||
<p v-else class="text-12px text-slate-400">无超期</p>
|
||||
</div>
|
||||
</div>
|
||||
</NGi>
|
||||
<NGi>
|
||||
<div
|
||||
class="flex-1 bg-[#fff] px-16px py-12px cursor-pointer flex items-center gap-3"
|
||||
:style="{ borderRadius: themeStore.themeRadius + 'px' }"
|
||||
@click="jumpTo('professionalstatistics')"
|
||||
>
|
||||
<div class="flex justify-between">
|
||||
<CountTo
|
||||
:start-value="0"
|
||||
:end-value="homeData?.sign_stats?.month_signed || 0"
|
||||
class="text-26px font-600"
|
||||
:style="{ color: themeStore.themeColor }"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-12px font-600">本月已会签</p>
|
||||
<p class="text-12px text-slate-400">含驳回 {{homeData?.sign_stats?.month_rejected || 0}} 起 · 系统自动采集</p>
|
||||
</div>
|
||||
</div>
|
||||
</NGi>
|
||||
<NGi>
|
||||
<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_highrisk')"
|
||||
>
|
||||
<div class="flex justify-between">
|
||||
<CountTo
|
||||
:start-value="0"
|
||||
:end-value="homeData?.high_risk?.total || 0"
|
||||
class="text-26px font-600"
|
||||
:style="{ color: themeStore.themeColor }"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-12px font-600">在办高风险</p>
|
||||
<p class="text-12px text-slate-400">本专业相关 · 建议关注</p>
|
||||
</div>
|
||||
</div>
|
||||
</NGi>
|
||||
<NGi>
|
||||
<div
|
||||
class="flex-1 bg-[#fff] px-16px py-12px cursor-pointer flex items-center gap-3"
|
||||
:style="{ borderRadius: themeStore.themeRadius + 'px' }"
|
||||
@click="jumpTo('professionalstatistics')"
|
||||
>
|
||||
<div class="flex justify-between">
|
||||
<CountTo
|
||||
:start-value="0"
|
||||
:end-value="homeData?.sign_stats?.risk_analysis_count || 0"
|
||||
class="text-26px font-600"
|
||||
:style="{ color: themeStore.themeColor }"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-12px font-600">参与风险分析</p>
|
||||
<p class="text-12px text-slate-400">作为分析组成员（选择式）· 近一年</p>
|
||||
</div>
|
||||
</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="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?.todo_sign?.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?.todo_sign?.total > 0">
|
||||
<div v-for="row in homeData?.todo_sign?.items?.slice(0, 3) || []" :key="row.change_id" @click="jumpTo('details_approval',row.change_id)"
|
||||
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.overdue_status===2" class="text-xs" :style="{ color: themeStore.otherColor.error }">已超期 {{row.overdue_days || 0}} 天</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.step_name" size="small" type="warning">{{row.step_name}}</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.applicant_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?.todo_sign?.total - 3) > 0 ? (homeData?.todo_sign?.total - 3) : 0}}条，前往我的任务查看全部 →
|
||||
</NButton>
|
||||
</template>
|
||||
<template v-else>
|
||||
<div class="h-100% flex items-center justify-center py-3">
|
||||
<NEmpty description="暂无数据" class="!text-xs"></NEmpty>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</NCard>
|
||||
|
||||
<NGrid :x-gap="16" :y-gap="16" responsive="screen" item-responsive class="mt-[16px]">
|
||||
<!-- 最近已会签 -->
|
||||
<NGi span="24 s:24 m:24 l:24">
|
||||
<NCard :bordered="false" size="small" :style="{ borderRadius: themeStore.themeRadius + 'px' }">
|
||||
<div class="flex items-center mb-3 gap-2">
|
||||
<Icon icon="ix:success" 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 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">{{ 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 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>
|
||||
<div v-else class="h-100% flex items-center justify-center py-3">
|
||||
<NEmpty description="暂无数据" class="!text-xs"></NEmpty>
|
||||
</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="lucide:shield-alert" class="size-16px" :style="{ color: themeStore.themeColor }" />
|
||||
<p class="text-13px font-700 text-#64749a">高风险变更</p>
|
||||
<p class="text-11px text-#94a3b8">在办 · 建议重点关注</p>
|
||||
</div>
|
||||
<template v-if="homeData?.high_risk?.total > 0">
|
||||
<div class="space-y-2.5">
|
||||
<div v-for="h in homeData?.high_risk?.items || []" :key="h.record_id" class="rounded-md border border-amber-200 bg-amber-50/60 px-3.5 py-2.5">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="min-w-0 flex-1 truncate text-sm font-medium text-slate-800">{{ h.change_title }}</span>
|
||||
<NButton size="tiny" ghost type="warning" class="text-xs" @click="jumpTo('my_highrisk')">查看分析</NButton>
|
||||
</div>
|
||||
<div class="mt-1 text-[11px]" :style="{ color: themeStore.otherColor.warning }">{{ h.scene }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else>
|
||||
<div class="h-100% flex items-center justify-center py-3">
|
||||
<NEmpty description="暂无数据" class="!text-xs"></NEmpty>
|
||||
</div>
|
||||
</template>
|
||||
</NCard>
|
||||
<!-- 我的会签效率 -->
|
||||
<NCard :bordered="false" size="small" :style="{ borderRadius: themeStore.themeRadius + 'px',marginTop:'16px' }">
|
||||
<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">系统自动采集 · 近 30 天</p>
|
||||
</div>
|
||||
<div class="flex flex-col gap-3">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="text-xs text-slate-500 w-16">平均耗时</span>
|
||||
<NProgress
|
||||
type="line"
|
||||
status="info"
|
||||
:percentage="((homeData?.sign_stats?.avg_audit_days || 0) / 2) * 100"
|
||||
:height="10"
|
||||
border-radius="6px"
|
||||
>
|
||||
<span class="text-xs text-slate-700 font-semibold">{{homeData?.sign_stats?.avg_audit_days || 0}}天</span>
|
||||
</NProgress>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="text-xs text-slate-500 w-16">最长耗时</span>
|
||||
<NProgress
|
||||
type="line"
|
||||
status="error"
|
||||
:percentage="((homeData?.sign_stats?.max_audit_days || 0) / 2) * 100"
|
||||
:height="10"
|
||||
border-radius="6px"
|
||||
>
|
||||
<span class="text-xs text-slate-700 font-semibold" :style="{ color: themeStore.otherColor.error }">{{homeData?.sign_stats?.max_audit_days || 0}}天</span>
|
||||
</NProgress>
|
||||
</div>
|
||||
<div class="flex items-center justify-between text-[11px] text-slate-400">
|
||||
<span>会签及时率 <b :style="{ color: themeStore.otherColor.success }">{{homeData?.sign_stats?.timely_rate || 0}}%</b></span>
|
||||
<span>目标 2 天内签署</span>
|
||||
</div>
|
||||
</div>
|
||||
</NCard>
|
||||
</NGi>
|
||||
</NGrid>
|
||||
</div>
|
||||
</NSpin>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
|
||||
@@ -1,439 +1,439 @@
|
||||
<script setup lang="ts">
|
||||
import { onMounted, onUnmounted, ref } from 'vue';
|
||||
import { Icon } from '@iconify/vue'
|
||||
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 { homeSafeApi } from "@/service/api/statistics";
|
||||
import previewComponent from '@/components/previewFile/index.vue'
|
||||
|
||||
const themeStore = useThemeStore();
|
||||
const { routerPushByKey } = useRouterPush();
|
||||
|
||||
const loading = ref<boolean>(false);
|
||||
// 附件在线预览弹窗
|
||||
const previewModal = ref<boolean>(false);
|
||||
// 附件在线预览文件
|
||||
const previewFile = ref<any>(null);
|
||||
// 变更临期天数
|
||||
const remindDays = ref<number>(0);
|
||||
// 变更类型列表
|
||||
const typeList = ref<any>([]);
|
||||
// 变更等级列表
|
||||
const levelList = ref<any>([]);
|
||||
// 时间显示
|
||||
const clock = ref<string>('');
|
||||
let timer: any = null;
|
||||
// 首页数据
|
||||
const homeData = ref<any>(null);
|
||||
|
||||
// 跳转页面
|
||||
const jumpTo = (key: string,qid:number = 0) => {
|
||||
if(key==='details_approval' && qid){
|
||||
routerPushByKey(key,{ query: { id: qid.toString(),key:'home' } });
|
||||
}else{
|
||||
routerPushByKey(key as any);
|
||||
}
|
||||
}
|
||||
|
||||
// 获取当前时间字符串
|
||||
const getCurrentTimeStr = () => {
|
||||
const now = new Date();
|
||||
const year = now.getFullYear();
|
||||
const month = now.getMonth() + 1;
|
||||
const date = now.getDate();
|
||||
const week = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'][now.getDay()];
|
||||
const hours = String(now.getHours()).padStart(2, '0');
|
||||
const minutes = String(now.getMinutes()).padStart(2, '0');
|
||||
return `${year}年${month}月${date}日 ${week} ${hours}:${minutes}`;
|
||||
}
|
||||
// 更新时间显示
|
||||
const tick = () => {
|
||||
clock.value = getCurrentTimeStr();
|
||||
// 计算距离下一分钟还有多少毫秒（+50ms 容错，防止定时器提前触发）
|
||||
const now = new Date();
|
||||
const delay = (60 - now.getSeconds()) * 1000 - now.getMilliseconds() + 50;
|
||||
timer = setTimeout(tick, delay);
|
||||
}
|
||||
|
||||
// 查看
|
||||
const viewFile = (file: any) => {
|
||||
previewFile.value = file;
|
||||
previewModal.value = true;
|
||||
};
|
||||
// 下载
|
||||
const downloadFile = (file: any) => {
|
||||
downloadFileFun(file.file_url, file.file_name);
|
||||
};
|
||||
// 下载模板
|
||||
const downloadTemplate = (record: any) => {
|
||||
window.$message?.info('还差接口')
|
||||
};
|
||||
|
||||
// 匹配对象
|
||||
const matchObj = (list:any,val:number) => {
|
||||
const obj = list.find((item:any) => item.value == val);
|
||||
return obj || null;
|
||||
}
|
||||
|
||||
// 获取数据
|
||||
const getData = async () => {
|
||||
loading.value = true;
|
||||
const {data,error} = await homeSafeApi();
|
||||
if(!error){
|
||||
homeData.value = data;
|
||||
}
|
||||
loading.value = false;
|
||||
}
|
||||
|
||||
// 获取系统配置
|
||||
const getConfig = async () => {
|
||||
const {data,error} = await systemConfigApi();
|
||||
if(!error){
|
||||
// 解析 临时变更临期提醒
|
||||
const remindDaysGroup = data.find((group:{group_key:string}) => group.group_key === 'change_remind');
|
||||
if (remindDaysGroup) {
|
||||
remindDaysGroup?.items.forEach((item:any) => {
|
||||
if(item.item_key === 'temp_due_remind_days'){
|
||||
remindDays.value = Number(item.value);
|
||||
}
|
||||
})
|
||||
}
|
||||
// 解析 变更类型设置
|
||||
const changeTypeGroup = data.find((group:{group_key:string}) => group.group_key === 'change_type');
|
||||
if (changeTypeGroup) {
|
||||
typeList.value = changeTypeGroup.items;
|
||||
}
|
||||
// 解析 变更等级设置
|
||||
const changeLevelGroup = data.find((group:{group_key:string}) => group.group_key === 'change_level');
|
||||
if (changeLevelGroup) {
|
||||
levelList.value = changeLevelGroup.items;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
tick();
|
||||
getConfig();
|
||||
getData();
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
if(timer){
|
||||
clearTimeout(timer);
|
||||
timer = null;
|
||||
}
|
||||
})
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<NSpin :show="loading" size="small">
|
||||
<div class="space-y-3.5">
|
||||
<NCard :bordered="false" size="small" :style="{ borderRadius: themeStore.themeRadius + 'px' }">
|
||||
<NGrid :x-gap="16" :y-gap="16" responsive="screen" item-responsive>
|
||||
<NGi span="24 s:24 m:10">
|
||||
<div class="flex-y-center">
|
||||
<p
|
||||
class="py-1.5 px-1.5 flex items-center justify-center bg-[rgb(var(--primary-color))] text-white text-xs font-bold"
|
||||
:style="{ borderRadius: themeStore.themeRadius + 'px' }"
|
||||
>
|
||||
MOC
|
||||
</p>
|
||||
<p class="pl-12px text-14px font-semibold">我的工作台</p>
|
||||
</div>
|
||||
</NGi>
|
||||
<NGi span="24 s:24 m:14" class="flex items-center justify-end gap-12px">
|
||||
<p class="text-#999 text-xs">{{clock}}</p>
|
||||
<NButton ghost size="small" @click="jumpTo('my_pssr')">
|
||||
投用与验收总览
|
||||
</NButton>
|
||||
<NButton ghost size="small" @click="jumpTo('my_highrisk')">
|
||||
全厂风险看板
|
||||
</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-[#fff] px-16px py-12px cursor-pointer flex items-center gap-3"
|
||||
:style="{ borderRadius: themeStore.themeRadius + 'px' }"
|
||||
@click="jumpTo('my_mytask')"
|
||||
>
|
||||
<div class="flex justify-between">
|
||||
<CountTo
|
||||
:start-value="0"
|
||||
:end-value="homeData?.todo_sign?.total || 0"
|
||||
class="text-26px font-600"
|
||||
:style="{ color: homeData?.todo_sign?.overdue_count > 0?themeStore.otherColor.error:themeStore.themeColor }"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-12px font-600">待我审批</p>
|
||||
<p v-if="homeData?.todo_sign?.overdue_count > 0" class="text-12px" :style="{ color: themeStore.otherColor.error }">其中超期 {{homeData?.todo_sign?.overdue_count}} 项 · 请优先处理</p>
|
||||
<p v-else class="text-12px text-slate-400">安全审查节点 · 与我的任务同源</p>
|
||||
</div>
|
||||
</div>
|
||||
</NGi>
|
||||
<NGi>
|
||||
<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_pssr')"
|
||||
>
|
||||
<div class="flex justify-between">
|
||||
<CountTo
|
||||
:start-value="0"
|
||||
:end-value="homeData?.pssr_supervise?.total || 0"
|
||||
class="text-26px font-600"
|
||||
:style="{ color: themeStore.themeColor }"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-12px font-600">PSSR监督</p>
|
||||
<p class="text-12px text-slate-400">待PSSR / 待验收 · 按变更状态实时统计</p>
|
||||
</div>
|
||||
</div>
|
||||
</NGi>
|
||||
<NGi>
|
||||
<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_highrisk')"
|
||||
>
|
||||
<div class="flex justify-between">
|
||||
<CountTo
|
||||
:start-value="0"
|
||||
:end-value="homeData?.high_risk?.total || 0"
|
||||
class="text-26px font-600"
|
||||
:style="{ color: themeStore.otherColor.error }"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-12px font-600">高风险在办</p>
|
||||
<p class="text-12px" :style="{ color: themeStore.otherColor.error }">全厂 · 需重点跟踪</p>
|
||||
</div>
|
||||
</div>
|
||||
</NGi>
|
||||
<NGi>
|
||||
<div
|
||||
class="flex-1 bg-[#fff] px-16px py-12px cursor-pointer flex items-center gap-3"
|
||||
:style="{ borderRadius: themeStore.themeRadius + 'px' }"
|
||||
@click="jumpTo('changeledger')"
|
||||
>
|
||||
<div class="flex justify-between">
|
||||
<CountTo
|
||||
:start-value="0"
|
||||
:end-value="homeData?.temp_expiry_scope?.total || 0"
|
||||
class="text-26px font-600"
|
||||
:style="{ color: homeData?.temp_expiry_scope?.overdue_count > 0?themeStore.otherColor.error:themeStore.themeColor }"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-12px font-600">临时变更到期</p>
|
||||
<p v-if="homeData?.temp_expiry_scope?.overdue_count > 0" class="text-12px" :style="{ color: themeStore.otherColor.error }">含超期 {{homeData?.temp_expiry_scope?.overdue_count}} 项 · 红色预警</p>
|
||||
<p v-else class="text-12px text-slate-400">无超期</p>
|
||||
</div>
|
||||
</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="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?.todo_sign?.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?.todo_sign?.total > 0">
|
||||
<div v-for="row in homeData?.todo_sign?.items?.slice(0, 3) || []" :key="row.change_id" @click="jumpTo('details_approval',row.change_id)"
|
||||
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="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.overdue_status===2" class="text-xs" :style="{ color: themeStore.otherColor.error }">已超期 {{row.overdue_days || 0}} 天</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.step_name" size="small" type="warning">审批：{{row.step_name}}</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.applicant_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>
|
||||
<div class="h-100% flex items-center justify-center py-3">
|
||||
<NEmpty description="暂无数据" class="!text-xs"></NEmpty>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</NCard>
|
||||
|
||||
<NGrid :x-gap="16" :y-gap="16" responsive="screen" item-responsive class="mt-[16px]">
|
||||
<!-- 通过审批的变更（未关闭） -->
|
||||
<NGi span="24 s:24 m:24 l:24">
|
||||
<NCard :bordered="false" size="small" :style="{ borderRadius: themeStore.themeRadius + 'px' }">
|
||||
<div class="flex items-center mb-3 gap-2">
|
||||
<Icon icon="lucide:list-checks" class="size-16px" :style="{ color: themeStore.themeColor }" />
|
||||
<p class="text-13px font-700 text-#64749a">通过审批的变更（未关闭）</p>
|
||||
<p class="text-11px text-#94a3b8 mt-2px">PSSR 材料同行显示 · 查看 / 下载</p>
|
||||
<NButton ghost size="small" class="text-xs ml-auto" @click="jumpTo('my_pssr')">
|
||||
进入管理
|
||||
<Icon icon="formkit:right" class="size-12px" />
|
||||
</NButton>
|
||||
</div>
|
||||
<div v-if="homeData?.pssr_supervise?.total>0" class="flex flex-col gap-3">
|
||||
<div v-for="item in homeData?.pssr_supervise?.items" :key="item.id" class="rounded-md border px-3 py-2 flex items-center justify-between gap-2">
|
||||
<div>
|
||||
<p class="min-w-0 flex-1 truncate text-sm font-medium text-slate-800 dark:text-white">{{item.title}}</p>
|
||||
<p class="mt-0.5 text-[11px] text-slate-400 flex items-center gap-2">
|
||||
<span>{{item.change_no}}</span>
|
||||
<span>{{item.org_name}}</span>
|
||||
<span>{{item.applicant_name}}</span>
|
||||
</p>
|
||||
</div>
|
||||
<div class="flex items-center gap-1.5 rounded-md border bg-slate-50/60 px-2 py-1">
|
||||
<Icon icon="akar-icons:file" class="size-14px" :style="{ color: themeStore.themeColor }" />
|
||||
<span class="text-[11px] font-medium text-slate-600">PSSR 确认表</span>
|
||||
<template v-if="item.pssr_attachment">
|
||||
<span class="max-w-[150px] truncate text-[11px] text-slate-400">{{ item.pssr_attachment?.file_name }}</span>
|
||||
<NButton ghost size="tiny" class="text-11px" @click="viewFile(item.pssr_attachment)">查看</NButton>
|
||||
<NButton ghost size="tiny" class="text-11px" @click="downloadFile(item.pssr_attachment)">下载</NButton>
|
||||
</template>
|
||||
<template v-else>
|
||||
<span class="text-[11px]" :style="{ color: themeStore.otherColor.warning }">待传</span>
|
||||
<NButton ghost size="tiny" class="text-11px" @click="downloadTemplate(item)">下载模板</NButton>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else class="h-100% flex items-center justify-center py-3">
|
||||
<NEmpty description="暂无数据" class="!text-xs"></NEmpty>
|
||||
</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="lucide:shield-alert" class="size-16px" :style="{ color: themeStore.themeColor }" />
|
||||
<p class="text-13px font-700 text-#64749a">高风险变更跟踪</p>
|
||||
<p class="text-11px text-#94a3b8">重要等级 · 未关闭 · 实时推导</p>
|
||||
</div>
|
||||
<template v-if="homeData?.high_risk?.total > 0">
|
||||
<div class="space-y-2.5">
|
||||
<div v-for="c in homeData?.high_risk?.items || []" :key="c.record_id" class="rounded-lg border border-red-200 bg-red-50/50 px-3.5 py-2.5">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="min-w-0 flex-1 truncate text-sm font-medium text-slate-800">{{ c.change_title }}</span>
|
||||
<NButton size="tiny" ghost type="error" class="text-xs" @click="jumpTo('my_highrisk')">查看分析</NButton>
|
||||
</div>
|
||||
<div class="mt-1 text-[11px] flex items-center gap-2" :style="{ color: themeStore.otherColor.error }">
|
||||
<span>{{ c.change_no }}</span>
|
||||
<!-- 状态 -->
|
||||
<span v-if="c.change_status==='APPROVING'">审批中</span>
|
||||
<span v-if="c.change_status==='APPROVED'">已通过</span>
|
||||
<span v-if="c.change_status==='IMPLEMENTED'">待验收</span>
|
||||
<span v-if="c.change_status==='ACCEPTED'">待关闭</span>
|
||||
<span v-if="c.change_status==='CLOSED'">已关闭</span>
|
||||
<span v-if="c.change_status==='WITHDRAWN'">已撤回</span>
|
||||
<span v-if="c.change_status==='REJECTED'">已驳回</span>
|
||||
<span>{{c.org_name}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else>
|
||||
<div class="h-100% flex items-center justify-center py-3">
|
||||
<NEmpty description="暂无数据" class="!text-xs"></NEmpty>
|
||||
</div>
|
||||
</template>
|
||||
</NCard>
|
||||
</NGi>
|
||||
</NGrid>
|
||||
</div>
|
||||
<!-- 附件在线预览弹窗 -->
|
||||
<NModal
|
||||
v-model:show="previewModal"
|
||||
preset="card"
|
||||
:auto-focus="false"
|
||||
:style="{ width: '80%', height: 'auto' }"
|
||||
:segmented="{ content: true, footer: true }"
|
||||
>
|
||||
<template #header>
|
||||
<div class="flex items-center gap-2 text-base font-semibold text-slate-800">
|
||||
<Icon icon="akar-icons:file" class="size-18px" /> {{ previewFile?.file_name }}
|
||||
</div>
|
||||
</template>
|
||||
<template #default>
|
||||
<div class="space-y-3">
|
||||
<div class="flex flex-wrap gap-x-4 gap-y-1 text-xs text-slate-400">
|
||||
<span>上传人：{{ previewFile?.uploader_name }}</span>
|
||||
<span>上传时间：{{ previewFile?.created_at?.slice(0, 16) }}</span>
|
||||
<span v-if="previewFile?.version">{{ `版本：${previewFile?.version}（受控）` }}</span>
|
||||
</div>
|
||||
<previewComponent v-if="previewFile" :previewFile="previewFile" />
|
||||
</div>
|
||||
</template>
|
||||
</NModal>
|
||||
</NSpin>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
<script setup lang="ts">
|
||||
import { onMounted, onUnmounted, ref } from 'vue';
|
||||
import { Icon } from '@iconify/vue'
|
||||
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 { homeSafeApi } from "@/service/api/statistics";
|
||||
import previewComponent from '@/components/previewFile/index.vue'
|
||||
|
||||
const themeStore = useThemeStore();
|
||||
const { routerPushByKey } = useRouterPush();
|
||||
|
||||
const loading = ref<boolean>(false);
|
||||
// 附件在线预览弹窗
|
||||
const previewModal = ref<boolean>(false);
|
||||
// 附件在线预览文件
|
||||
const previewFile = ref<any>(null);
|
||||
// 变更临期天数
|
||||
const remindDays = ref<number>(0);
|
||||
// 变更类型列表
|
||||
const typeList = ref<any>([]);
|
||||
// 变更等级列表
|
||||
const levelList = ref<any>([]);
|
||||
// 时间显示
|
||||
const clock = ref<string>('');
|
||||
let timer: any = null;
|
||||
// 首页数据
|
||||
const homeData = ref<any>(null);
|
||||
|
||||
// 跳转页面
|
||||
const jumpTo = (key: string,qid:number = 0) => {
|
||||
if(key==='details_approval' && qid){
|
||||
routerPushByKey(key,{ query: { id: qid.toString(),key:'home' } });
|
||||
}else{
|
||||
routerPushByKey(key as any);
|
||||
}
|
||||
}
|
||||
|
||||
// 获取当前时间字符串
|
||||
const getCurrentTimeStr = () => {
|
||||
const now = new Date();
|
||||
const year = now.getFullYear();
|
||||
const month = now.getMonth() + 1;
|
||||
const date = now.getDate();
|
||||
const week = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'][now.getDay()];
|
||||
const hours = String(now.getHours()).padStart(2, '0');
|
||||
const minutes = String(now.getMinutes()).padStart(2, '0');
|
||||
return `${year}年${month}月${date}日 ${week} ${hours}:${minutes}`;
|
||||
}
|
||||
// 更新时间显示
|
||||
const tick = () => {
|
||||
clock.value = getCurrentTimeStr();
|
||||
// 计算距离下一分钟还有多少毫秒（+50ms 容错，防止定时器提前触发）
|
||||
const now = new Date();
|
||||
const delay = (60 - now.getSeconds()) * 1000 - now.getMilliseconds() + 50;
|
||||
timer = setTimeout(tick, delay);
|
||||
}
|
||||
|
||||
// 查看
|
||||
const viewFile = (file: any) => {
|
||||
previewFile.value = file;
|
||||
previewModal.value = true;
|
||||
};
|
||||
// 下载
|
||||
const downloadFile = (file: any) => {
|
||||
downloadFileFun(file.file_url, file.file_name);
|
||||
};
|
||||
// 下载模板
|
||||
const downloadTemplate = (record: any) => {
|
||||
window.$message?.info('还差接口')
|
||||
};
|
||||
|
||||
// 匹配对象
|
||||
const matchObj = (list:any,val:number) => {
|
||||
const obj = list.find((item:any) => item.value == val);
|
||||
return obj || null;
|
||||
}
|
||||
|
||||
// 获取数据
|
||||
const getData = async () => {
|
||||
loading.value = true;
|
||||
const {data,error} = await homeSafeApi();
|
||||
if(!error){
|
||||
homeData.value = data;
|
||||
}
|
||||
loading.value = false;
|
||||
}
|
||||
|
||||
// 获取系统配置
|
||||
const getConfig = async () => {
|
||||
const {data,error} = await systemConfigApi();
|
||||
if(!error){
|
||||
// 解析 临时变更临期提醒
|
||||
const remindDaysGroup = data.find((group:{group_key:string}) => group.group_key === 'change_remind');
|
||||
if (remindDaysGroup) {
|
||||
remindDaysGroup?.items.forEach((item:any) => {
|
||||
if(item.item_key === 'temp_due_remind_days'){
|
||||
remindDays.value = Number(item.value);
|
||||
}
|
||||
})
|
||||
}
|
||||
// 解析 变更类型设置
|
||||
const changeTypeGroup = data.find((group:{group_key:string}) => group.group_key === 'change_type');
|
||||
if (changeTypeGroup) {
|
||||
typeList.value = changeTypeGroup.items;
|
||||
}
|
||||
// 解析 变更等级设置
|
||||
const changeLevelGroup = data.find((group:{group_key:string}) => group.group_key === 'change_level');
|
||||
if (changeLevelGroup) {
|
||||
levelList.value = changeLevelGroup.items;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
tick();
|
||||
getConfig();
|
||||
getData();
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
if(timer){
|
||||
clearTimeout(timer);
|
||||
timer = null;
|
||||
}
|
||||
})
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<NSpin :show="loading" size="small">
|
||||
<div class="space-y-3.5">
|
||||
<NCard :bordered="false" size="small" :style="{ borderRadius: themeStore.themeRadius + 'px' }">
|
||||
<NGrid :x-gap="16" :y-gap="16" responsive="screen" item-responsive>
|
||||
<NGi span="24 s:24 m:10">
|
||||
<div class="flex-y-center">
|
||||
<p
|
||||
class="py-1.5 px-1.5 flex items-center justify-center bg-[rgb(var(--primary-color))] text-white text-xs font-bold"
|
||||
:style="{ borderRadius: themeStore.themeRadius + 'px' }"
|
||||
>
|
||||
MOC
|
||||
</p>
|
||||
<p class="pl-12px text-14px font-semibold">我的工作台</p>
|
||||
</div>
|
||||
</NGi>
|
||||
<NGi span="24 s:24 m:14" class="flex items-center justify-end gap-12px">
|
||||
<p class="text-#999 text-xs">{{clock}}</p>
|
||||
<NButton ghost size="small" @click="jumpTo('my_pssr')">
|
||||
投用与验收总览
|
||||
</NButton>
|
||||
<NButton ghost size="small" @click="jumpTo('my_highrisk')">
|
||||
全厂风险看板
|
||||
</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-[#fff] px-16px py-12px cursor-pointer flex items-center gap-3"
|
||||
:style="{ borderRadius: themeStore.themeRadius + 'px' }"
|
||||
@click="jumpTo('my_mytask')"
|
||||
>
|
||||
<div class="flex justify-between">
|
||||
<CountTo
|
||||
:start-value="0"
|
||||
:end-value="homeData?.todo_sign?.total || 0"
|
||||
class="text-26px font-600"
|
||||
:style="{ color: homeData?.todo_sign?.overdue_count > 0?themeStore.otherColor.error:themeStore.themeColor }"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-12px font-600">待我审批</p>
|
||||
<p v-if="homeData?.todo_sign?.overdue_count > 0" class="text-12px" :style="{ color: themeStore.otherColor.error }">其中超期 {{homeData?.todo_sign?.overdue_count}} 项 · 请优先处理</p>
|
||||
<p v-else class="text-12px text-slate-400">安全审查节点 · 与我的任务同源</p>
|
||||
</div>
|
||||
</div>
|
||||
</NGi>
|
||||
<NGi>
|
||||
<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_pssr')"
|
||||
>
|
||||
<div class="flex justify-between">
|
||||
<CountTo
|
||||
:start-value="0"
|
||||
:end-value="homeData?.pssr_supervise?.total || 0"
|
||||
class="text-26px font-600"
|
||||
:style="{ color: themeStore.themeColor }"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-12px font-600">PSSR监督</p>
|
||||
<p class="text-12px text-slate-400">待PSSR / 待验收 · 按变更状态实时统计</p>
|
||||
</div>
|
||||
</div>
|
||||
</NGi>
|
||||
<NGi>
|
||||
<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_highrisk')"
|
||||
>
|
||||
<div class="flex justify-between">
|
||||
<CountTo
|
||||
:start-value="0"
|
||||
:end-value="homeData?.high_risk?.total || 0"
|
||||
class="text-26px font-600"
|
||||
:style="{ color: themeStore.otherColor.error }"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-12px font-600">高风险在办</p>
|
||||
<p class="text-12px" :style="{ color: themeStore.otherColor.error }">全厂 · 需重点跟踪</p>
|
||||
</div>
|
||||
</div>
|
||||
</NGi>
|
||||
<NGi>
|
||||
<div
|
||||
class="flex-1 bg-[#fff] px-16px py-12px cursor-pointer flex items-center gap-3"
|
||||
:style="{ borderRadius: themeStore.themeRadius + 'px' }"
|
||||
@click="jumpTo('changeledger')"
|
||||
>
|
||||
<div class="flex justify-between">
|
||||
<CountTo
|
||||
:start-value="0"
|
||||
:end-value="homeData?.temp_expiry_scope?.total || 0"
|
||||
class="text-26px font-600"
|
||||
:style="{ color: homeData?.temp_expiry_scope?.overdue_count > 0?themeStore.otherColor.error:themeStore.themeColor }"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-12px font-600">临时变更到期</p>
|
||||
<p v-if="homeData?.temp_expiry_scope?.overdue_count > 0" class="text-12px" :style="{ color: themeStore.otherColor.error }">含超期 {{homeData?.temp_expiry_scope?.overdue_count}} 项 · 红色预警</p>
|
||||
<p v-else class="text-12px text-slate-400">无超期</p>
|
||||
</div>
|
||||
</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="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?.todo_sign?.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?.todo_sign?.total > 0">
|
||||
<div v-for="row in homeData?.todo_sign?.items?.slice(0, 3) || []" :key="row.change_id" @click="jumpTo('details_approval',row.change_id)"
|
||||
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="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.overdue_status===2" class="text-xs" :style="{ color: themeStore.otherColor.error }">已超期 {{row.overdue_days || 0}} 天</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.step_name" size="small" type="warning">审批：{{row.step_name}}</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.applicant_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>
|
||||
<div class="h-100% flex items-center justify-center py-3">
|
||||
<NEmpty description="暂无数据" class="!text-xs"></NEmpty>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</NCard>
|
||||
|
||||
<NGrid :x-gap="16" :y-gap="16" responsive="screen" item-responsive class="mt-[16px]">
|
||||
<!-- 通过审批的变更（未关闭） -->
|
||||
<NGi span="24 s:24 m:24 l:24">
|
||||
<NCard :bordered="false" size="small" :style="{ borderRadius: themeStore.themeRadius + 'px' }">
|
||||
<div class="flex items-center mb-3 gap-2">
|
||||
<Icon icon="lucide:list-checks" class="size-16px" :style="{ color: themeStore.themeColor }" />
|
||||
<p class="text-13px font-700 text-#64749a">通过审批的变更（未关闭）</p>
|
||||
<p class="text-11px text-#94a3b8 mt-2px">PSSR 材料同行显示 · 查看 / 下载</p>
|
||||
<NButton ghost size="small" class="text-xs ml-auto" @click="jumpTo('my_pssr')">
|
||||
进入管理
|
||||
<Icon icon="formkit:right" class="size-12px" />
|
||||
</NButton>
|
||||
</div>
|
||||
<div v-if="homeData?.pssr_supervise?.total>0" class="flex flex-col gap-3">
|
||||
<div v-for="item in homeData?.pssr_supervise?.items" :key="item.id" class="rounded-md border px-3 py-2 flex items-center justify-between gap-2">
|
||||
<div>
|
||||
<p class="min-w-0 flex-1 truncate text-sm font-medium text-slate-800 dark:text-white">{{item.title}}</p>
|
||||
<p class="mt-0.5 text-[11px] text-slate-400 flex items-center gap-2">
|
||||
<span>{{item.change_no}}</span>
|
||||
<span>{{item.org_name}}</span>
|
||||
<span>{{item.applicant_name}}</span>
|
||||
</p>
|
||||
</div>
|
||||
<div class="flex items-center gap-1.5 rounded-md border bg-slate-50/60 px-2 py-1">
|
||||
<Icon icon="akar-icons:file" class="size-14px" :style="{ color: themeStore.themeColor }" />
|
||||
<span class="text-[11px] font-medium text-slate-600">PSSR 确认表</span>
|
||||
<template v-if="item.pssr_attachment">
|
||||
<span class="max-w-[150px] truncate text-[11px] text-slate-400">{{ item.pssr_attachment?.file_name }}</span>
|
||||
<NButton ghost size="tiny" class="text-11px" @click="viewFile(item.pssr_attachment)">查看</NButton>
|
||||
<NButton ghost size="tiny" class="text-11px" @click="downloadFile(item.pssr_attachment)">下载</NButton>
|
||||
</template>
|
||||
<template v-else>
|
||||
<span class="text-[11px]" :style="{ color: themeStore.otherColor.warning }">待传</span>
|
||||
<NButton ghost size="tiny" class="text-11px" @click="downloadTemplate(item)">下载模板</NButton>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else class="h-100% flex items-center justify-center py-3">
|
||||
<NEmpty description="暂无数据" class="!text-xs"></NEmpty>
|
||||
</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="lucide:shield-alert" class="size-16px" :style="{ color: themeStore.themeColor }" />
|
||||
<p class="text-13px font-700 text-#64749a">高风险变更跟踪</p>
|
||||
<p class="text-11px text-#94a3b8">重要等级 · 未关闭 · 实时推导</p>
|
||||
</div>
|
||||
<template v-if="homeData?.high_risk?.total > 0">
|
||||
<div class="space-y-2.5">
|
||||
<div v-for="c in homeData?.high_risk?.items || []" :key="c.record_id" class="rounded-lg border border-red-200 bg-red-50/50 px-3.5 py-2.5">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="min-w-0 flex-1 truncate text-sm font-medium text-slate-800">{{ c.change_title }}</span>
|
||||
<NButton size="tiny" ghost type="error" class="text-xs" @click="jumpTo('my_highrisk')">查看分析</NButton>
|
||||
</div>
|
||||
<div class="mt-1 text-[11px] flex items-center gap-2" :style="{ color: themeStore.otherColor.error }">
|
||||
<span>{{ c.change_no }}</span>
|
||||
<!-- 状态 -->
|
||||
<span v-if="c.change_status==='APPROVING'">审批中</span>
|
||||
<span v-if="c.change_status==='APPROVED'">已通过</span>
|
||||
<span v-if="c.change_status==='IMPLEMENTED'">待验收</span>
|
||||
<span v-if="c.change_status==='ACCEPTED'">待关闭</span>
|
||||
<span v-if="c.change_status==='CLOSED'">已关闭</span>
|
||||
<span v-if="c.change_status==='WITHDRAWN'">已撤回</span>
|
||||
<span v-if="c.change_status==='REJECTED'">已驳回</span>
|
||||
<span>{{c.org_name}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else>
|
||||
<div class="h-100% flex items-center justify-center py-3">
|
||||
<NEmpty description="暂无数据" class="!text-xs"></NEmpty>
|
||||
</div>
|
||||
</template>
|
||||
</NCard>
|
||||
</NGi>
|
||||
</NGrid>
|
||||
</div>
|
||||
<!-- 附件在线预览弹窗 -->
|
||||
<NModal
|
||||
v-model:show="previewModal"
|
||||
preset="card"
|
||||
:auto-focus="false"
|
||||
:style="{ width: '80%', height: 'auto' }"
|
||||
:segmented="{ content: true, footer: true }"
|
||||
>
|
||||
<template #header>
|
||||
<div class="flex items-center gap-2 text-base font-semibold text-slate-800">
|
||||
<Icon icon="akar-icons:file" class="size-18px" /> {{ previewFile?.file_name }}
|
||||
</div>
|
||||
</template>
|
||||
<template #default>
|
||||
<div class="space-y-3">
|
||||
<div class="flex flex-wrap gap-x-4 gap-y-1 text-xs text-slate-400">
|
||||
<span>上传人：{{ previewFile?.uploader_name }}</span>
|
||||
<span>上传时间：{{ previewFile?.created_at?.slice(0, 16) }}</span>
|
||||
<span v-if="previewFile?.version">{{ `版本：${previewFile?.version}（受控）` }}</span>
|
||||
</div>
|
||||
<previewComponent v-if="previewFile" :previewFile="previewFile" />
|
||||
</div>
|
||||
</template>
|
||||
</NModal>
|
||||
</NSpin>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@@ -1,454 +1,454 @@
|
||||
<script setup lang="ts">
|
||||
import { onMounted, onUnmounted, ref } from 'vue';
|
||||
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 { systemConfigApi } from "@/service/api/system";
|
||||
import { homeLeaderApi } from "@/service/api/statistics";
|
||||
|
||||
const themeStore = useThemeStore();
|
||||
const { routerPushByKey } = useRouterPush();
|
||||
|
||||
const loading = ref<boolean>(false);
|
||||
// 变更临期天数
|
||||
const remindDays = ref<number>(0);
|
||||
// 变更等级列表
|
||||
const levelList = ref<any>([]);
|
||||
// 时间显示
|
||||
const clock = ref<string>('');
|
||||
let timer: any = null;
|
||||
// 首页数据
|
||||
const homeData = ref<any>(null);
|
||||
|
||||
// 跳转变更申请页面、变更台账、我的任务、发起变更
|
||||
const jumpTo = (key: string,qid:number = 0) => {
|
||||
if(key==='details_approval' && qid){
|
||||
routerPushByKey(key,{ query: { id: qid.toString(),key:'home' } });
|
||||
}else if(key==='details_index' && qid){
|
||||
routerPushByKey(key,{ query: { id: qid.toString(),key:'home' } });
|
||||
}else{
|
||||
routerPushByKey(key as any);
|
||||
}
|
||||
}
|
||||
|
||||
// 获取当前时间字符串
|
||||
const getCurrentTimeStr = () => {
|
||||
const now = new Date();
|
||||
const year = now.getFullYear();
|
||||
const month = now.getMonth() + 1;
|
||||
const date = now.getDate();
|
||||
const week = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'][now.getDay()];
|
||||
const hours = String(now.getHours()).padStart(2, '0');
|
||||
const minutes = String(now.getMinutes()).padStart(2, '0');
|
||||
return `${year}年${month}月${date}日 ${week} ${hours}:${minutes}`;
|
||||
}
|
||||
// 更新时间显示
|
||||
const tick = () => {
|
||||
clock.value = getCurrentTimeStr();
|
||||
// 计算距离下一分钟还有多少毫秒（+50ms 容错，防止定时器提前触发）
|
||||
const now = new Date();
|
||||
const delay = (60 - now.getSeconds()) * 1000 - now.getMilliseconds() + 50;
|
||||
timer = setTimeout(tick, delay);
|
||||
}
|
||||
|
||||
// 获取正常、临期、超期数量
|
||||
const getNormalNearOverdue = (key:string) => {
|
||||
const targetItem = homeData.value?.temp_expiry_scope?.items?.find((item:any) => item.key === key);
|
||||
return targetItem?.count || 0;
|
||||
}
|
||||
|
||||
// 匹配对象
|
||||
const matchObj = (list:any,val:number) => {
|
||||
const obj = list.find((item:any) => item.value == val);
|
||||
return obj || null;
|
||||
}
|
||||
|
||||
// 获取数据
|
||||
const getData = async () => {
|
||||
loading.value = true;
|
||||
const {data,error} = await homeLeaderApi();
|
||||
if(!error){
|
||||
homeData.value = data;
|
||||
}
|
||||
loading.value = false;
|
||||
}
|
||||
|
||||
// 获取系统配置
|
||||
const getConfig = async () => {
|
||||
const {data,error} = await systemConfigApi();
|
||||
if(!error){
|
||||
// 解析 临时变更临期提醒
|
||||
const remindDaysGroup = data.find((group:{group_key:string}) => group.group_key === 'change_remind');
|
||||
if (remindDaysGroup) {
|
||||
remindDaysGroup?.items.forEach((item:any) => {
|
||||
if(item.item_key === 'temp_due_remind_days'){
|
||||
remindDays.value = Number(item.value);
|
||||
}
|
||||
})
|
||||
}
|
||||
// 解析 变更等级设置
|
||||
const changeLevelGroup = data.find((group:{group_key:string}) => group.group_key === 'change_level');
|
||||
if (changeLevelGroup) {
|
||||
levelList.value = changeLevelGroup.items;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
tick();
|
||||
getConfig();
|
||||
getData();
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
if(timer){
|
||||
clearTimeout(timer);
|
||||
timer = null;
|
||||
}
|
||||
})
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<NSpin :show="loading" size="small">
|
||||
<div class="space-y-3.5">
|
||||
<NCard :bordered="false" size="small" :style="{ borderRadius: themeStore.themeRadius + 'px' }">
|
||||
<NGrid :x-gap="16" :y-gap="16" responsive="screen" item-responsive>
|
||||
<NGi span="24 s:24 m:8">
|
||||
<div class="flex-y-center">
|
||||
<p
|
||||
class="py-1.5 px-1.5 flex items-center justify-center bg-[rgb(var(--primary-color))] text-white text-xs font-bold"
|
||||
:style="{ borderRadius: themeStore.themeRadius + 'px' }"
|
||||
>
|
||||
MOC
|
||||
</p>
|
||||
<p class="pl-12px text-14px font-semibold">我的工作台</p>
|
||||
</div>
|
||||
</NGi>
|
||||
<NGi span="24 s:24 m:16" class="flex items-center justify-end gap-12px">
|
||||
<p class="text-#999 text-xs">{{clock}}</p>
|
||||
<NButton ghost size="small" @click="jumpTo('factoryoverview')">
|
||||
全厂变更看板
|
||||
</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"
|
||||
:style="{
|
||||
'--theme-color': themeStore.themeColor,
|
||||
'--theme-bg': getColorWithOpacity(themeStore.themeColor, 0.2),
|
||||
'--warning-bg': getColorWithOpacity(themeStore.otherColor.warning, 0.2),
|
||||
'--warning-color': themeStore.otherColor.warning,
|
||||
'--success-color': themeStore.otherColor.success,
|
||||
'--success-bg': getColorWithOpacity(themeStore.otherColor.success, 0.2),
|
||||
'--error-color': themeStore.otherColor.error,
|
||||
'--error-bg': getColorWithOpacity(themeStore.otherColor.error, 0.2),
|
||||
}"
|
||||
>
|
||||
<NGi>
|
||||
<div
|
||||
class="h-100% flex-1 flex items-center gap-3 bg-white px-16px py-12px cursor-pointer transition hover:-translate-y-1"
|
||||
:style="{ borderRadius: themeStore.themeRadius + 'px' }"
|
||||
@click="jumpTo('my_mytask')"
|
||||
>
|
||||
<span class="shrink-0 rounded-lg p-2.5 bg-[var(--theme-bg)]">
|
||||
<Icon icon="lucide:clipboard-check" class="size-24px text-[--theme-color]" />
|
||||
</span>
|
||||
<div class="flex flex-col">
|
||||
<CountTo
|
||||
:start-value="0"
|
||||
:end-value="homeData?.todo_approvals?.total || 0"
|
||||
class="text-26px font-600"
|
||||
/>
|
||||
<p class="text-[11px] font-semibold text-slate-400">待我终批 · 均为重要变更</p>
|
||||
</div>
|
||||
</div>
|
||||
</NGi>
|
||||
<NGi>
|
||||
<div
|
||||
class="h-100% flex-1 flex items-center gap-3 bg-white px-16px py-12px cursor-pointer transition hover:-translate-y-1"
|
||||
:style="{ borderRadius: themeStore.themeRadius + 'px' }"
|
||||
@click="jumpTo('changeledger')"
|
||||
>
|
||||
<span class="shrink-0 rounded-lg p-2.5 bg-[var(--success-bg)]">
|
||||
<Icon icon="akar-icons:file" class="size-24px text-[--success-color]" />
|
||||
</span>
|
||||
<div class="flex flex-col">
|
||||
<CountTo
|
||||
:start-value="0"
|
||||
:end-value="homeData?.unclosed_status?.total || 0"
|
||||
class="text-26px font-600"
|
||||
/>
|
||||
<div class="text-[11px] font-semibold text-slate-400 flex items-center gap-x-2 flex-wrap">
|
||||
当前未关闭变更
|
||||
<span v-for="item in homeData?.unclosed_status?.items || []" :key="item.status">{{item.label}} {{item.count}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</NGi>
|
||||
<NGi>
|
||||
<div
|
||||
class="h-100% flex-1 flex items-center gap-3 bg-white px-16px py-12px cursor-pointer transition hover:-translate-y-1"
|
||||
:style="{ borderRadius: themeStore.themeRadius + 'px' }"
|
||||
@click="jumpTo('changeledger')"
|
||||
>
|
||||
<span class="shrink-0 rounded-lg p-2.5 bg-[var(--warning-bg)]">
|
||||
<Icon icon="lets-icons:clock" class="size-24px text-[--warning-color]" />
|
||||
</span>
|
||||
<div class="flex flex-col">
|
||||
<CountTo
|
||||
:start-value="0"
|
||||
:end-value="homeData?.temp_expiry_scope?.total || 0"
|
||||
class="text-26px font-600 text-[var(--warning-color)]"
|
||||
/>
|
||||
<div class="text-[11px] font-semibold text-slate-400 flex items-center gap-x-2 flex-wrap">
|
||||
临时变更临期或到期
|
||||
<span v-for="item in homeData?.temp_expiry_scope?.items || []" :key="item.status">{{item.label}} {{item.count}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</NGi>
|
||||
<NGi>
|
||||
<div
|
||||
class="h-100% flex-1 flex items-center gap-3 bg-white px-16px py-12px cursor-pointer transition hover:-translate-y-1"
|
||||
:style="{ borderRadius: themeStore.themeRadius + 'px' }"
|
||||
@click="jumpTo('changeledger')"
|
||||
>
|
||||
<span class="shrink-0 rounded-lg p-2.5 bg-[var(--error-bg)]">
|
||||
<Icon icon="proicons:alert-triangle" class="size-24px text-[--error-color]" />
|
||||
</span>
|
||||
<div class="flex flex-col">
|
||||
<div class="flex items-center">
|
||||
<CountTo
|
||||
:start-value="0"
|
||||
:end-value="homeData?.overdue_unclosed?.total || 0"
|
||||
class="text-26px font-600 text-[var(--error-color)]"
|
||||
/>
|
||||
</div>
|
||||
<p class="text-[11px] font-semibold text-slate-400">超期未关闭 · 已升级上报 · 明细见右侧清单</p>
|
||||
</div>
|
||||
</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="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?.todo_approvals?.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?.todo_approvals?.total > 0">
|
||||
<div v-for="row in homeData?.todo_approvals?.items || []" :key="row.change_id" @click="jumpTo('details_approval',row.change_id)"
|
||||
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
|
||||
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 class="text-[11px]" v-if="row.urgent===1" type="error" size="small">紧急</NTag>
|
||||
</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>
|
||||
</div>
|
||||
<div class="mt-0.5 truncate text-[11px] text-slate-400 flex items-center gap-2">
|
||||
<p>申请人：{{row.applicant_name}}</p>
|
||||
<p>{{row.apply_time?.slice(0, 10)}}</p>
|
||||
</div>
|
||||
</div>
|
||||
<NButton size="small" type="primary" class="text-xs">
|
||||
去审批
|
||||
<Icon icon="akar-icons:arrow-right" class="size-13px ml-1" />
|
||||
</NButton>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else>
|
||||
<div class="h-100% flex items-center justify-center py-3">
|
||||
<NEmpty description="暂无数据" class="!text-xs"></NEmpty>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</NCard>
|
||||
|
||||
<NGrid :x-gap="16" :y-gap="16" responsive="screen" item-responsive class="mt-[16px]">
|
||||
<!-- 各部门 / 人员审批时长 -->
|
||||
<NGi span="24 s:24 m:24 l:24">
|
||||
<NCard :bordered="false" size="small" :style="{ borderRadius: themeStore.themeRadius + 'px',height:'100%' }">
|
||||
<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 ghost size="small" class="text-xs" @click="jumpTo('my_datachangecenter')">
|
||||
变更数据中心
|
||||
<Icon icon="formkit:right" class="size-12px" />
|
||||
</NButton>
|
||||
</div>
|
||||
<div class="space-y-3">
|
||||
<div class="flex justify-between gap-6">
|
||||
<div class="w-50%">
|
||||
<div class="mb-2 text-[11px] font-semibold text-slate-500">按部门（全流程平均）</div>
|
||||
<div class="space-y-3">
|
||||
<div v-for="s in homeData?.dept_efficiency?.items" :key="s.org_id" class="flex items-center">
|
||||
<p class="text-slate-500 w-90px text-xs">{{ s.org_name }}</p>
|
||||
<div class="h-2.5 flex-1 overflow-hidden rounded-full bg-slate-100">
|
||||
<div v-if="s.avg_days > homeData?.person_efficiency?.slowest?.avg_days " class="h-full rounded-full" :style="{ width: `${(s.avg_days / s.total) * 100}%`, background: themeStore.otherColor.error }"></div>
|
||||
<div v-else class="h-full rounded-full" :style="{ width: `${(s.avg_days / s.total) * 100}%`, background: themeStore.themeColor }"></div>
|
||||
</div>
|
||||
<p class="w-45px font-semibold text-slate-600 text-xs text-right">{{ s.avg_days || 0 }} 天</p>
|
||||
</div>
|
||||
<div v-if="homeData?.dept_efficiency?.items?.length===0" class="h-100% flex items-center justify-center py-3">
|
||||
<NEmpty description="暂无数据" class="!text-xs"></NEmpty>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-50%">
|
||||
<div class="mb-2 text-[11px] font-semibold text-slate-500">按人员（审批 / 会签环节平均）</div>
|
||||
<div class="space-y-3">
|
||||
<div v-for="s in homeData?.person_efficiency?.items" :key="s.user_id" class="flex items-center">
|
||||
<p class="text-slate-500 w-90px text-xs">{{ s.user_name }}</p>
|
||||
<div class="h-2.5 flex-1 overflow-hidden rounded-full bg-slate-100">
|
||||
<div v-if="s.avg_days > homeData?.person_efficiency?.slowest?.avg_days " class="h-full rounded-full" :style="{ width: `${(s.avg_days / s.total) * 100}%`, background: themeStore.otherColor.error }"></div>
|
||||
<div v-else class="h-full rounded-full" :style="{ width: `${(s.avg_days / s.total) * 100}%`, background: themeStore.themeColor }"></div>
|
||||
</div>
|
||||
<p class="w-45px font-semibold text-slate-600 text-xs text-right">{{ s.avg_days || 0 }} 天</p>
|
||||
</div>
|
||||
<div v-if="homeData?.person_efficiency?.items?.length===0" class="h-100% flex items-center justify-center py-3">
|
||||
<NEmpty description="暂无数据" class="!text-xs"></NEmpty>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="mt-3 rounded-lg bg-[var(--warning-bg)] px-3 py-2 text-[11px] text-[var(--warning-color)]"
|
||||
:style="{
|
||||
'--warning-bg': getColorWithOpacity(themeStore.otherColor.warning, 0.1),
|
||||
'--warning-color': themeStore.otherColor.warning,
|
||||
}"
|
||||
>专业会签环节平均 {{homeData?.person_efficiency?.slowest?.avg_days || 0}} 天，为全流程最慢环节，建议优化会签并行机制</div>
|
||||
</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="proicons:alert-triangle" 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?.overdue_unclosed?.total > 0">
|
||||
<div
|
||||
v-for="r in homeData?.overdue_unclosed?.items"
|
||||
: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 v-if="r.status==='APPROVING'" size="small" type="warning">审批中</NTag>
|
||||
<NTag v-if="r.status==='APPROVED'" size="small" type="success">已通过</NTag>
|
||||
<NTag v-if="r.status==='IMPLEMENTED'" size="small" type="success">待验收</NTag>
|
||||
<NTag v-if="r.status==='ACCEPTED'" size="small" type="error">待关闭</NTag>
|
||||
<NTag v-if="r.status==='CLOSED'" size="small" type="success">已关闭</NTag>
|
||||
<NTag v-if="r.status==='WITHDRAWN'" size="small" type="error">已撤回</NTag>
|
||||
<NTag v-if="r.status==='REJECTED'" size="small" type="error">已驳回</NTag>
|
||||
<NTag type="error" size="small" class="text-11px">超期{{r.overdue_days || 0}}天</NTag>
|
||||
<NButton ghost size="tiny" class="text-xs ml-auto" @click="jumpTo('details_index',r.change_id)">打开变更单</NButton>
|
||||
</div>
|
||||
<p class="mt-0.5 text-sm font-medium text-slate-800">{{ r.title }}</p>
|
||||
<div class="mt-0.5 text-[11px] text-slate-400 flex items-center gap-2">
|
||||
<span>{{ r.change_no }}</span>
|
||||
<span>{{r.org_name}}</span>
|
||||
<span>{{r.applicant_name}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else>
|
||||
<div class="h-100% flex items-center justify-center py-3">
|
||||
<NEmpty description="暂无数据" class="!text-xs"></NEmpty>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</NCard>
|
||||
<!-- 临时变更临期或到期 -->
|
||||
<NCard :bordered="false" size="small" :style="{ borderRadius: themeStore.themeRadius + 'px',marginTop:'16px' }">
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex-1">
|
||||
<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>
|
||||
</div>
|
||||
<p class="text-11px text-#94a3b8">到期前提醒 · 恢复 / 延期 / 转永久</p>
|
||||
</div>
|
||||
<NButton size="small" class="text-xs" @click="jumpTo('changeledger')">
|
||||
变更台账<Icon icon="formkit:right" class="size-12px" />
|
||||
</NButton>
|
||||
</div>
|
||||
<div class="space-y-3 mt-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">{{getNormalNearOverdue('normal')}} 项</span>
|
||||
</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.warning }"></span>
|
||||
<span class="font-medium text-slate-700">临期（到期 ≤ {{remindDays}} 天）</span>
|
||||
<span class="ml-auto font-semibold text-slate-600">{{getNormalNearOverdue('near')}} 项</span>
|
||||
</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">{{getNormalNearOverdue('overdue')}} 项</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</NCard>
|
||||
</NGi>
|
||||
</NGrid>
|
||||
</div>
|
||||
</NSpin>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
<script setup lang="ts">
|
||||
import { onMounted, onUnmounted, ref } from 'vue';
|
||||
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 { systemConfigApi } from "@/service/api/system";
|
||||
import { homeLeaderApi } from "@/service/api/statistics";
|
||||
|
||||
const themeStore = useThemeStore();
|
||||
const { routerPushByKey } = useRouterPush();
|
||||
|
||||
const loading = ref<boolean>(false);
|
||||
// 变更临期天数
|
||||
const remindDays = ref<number>(0);
|
||||
// 变更等级列表
|
||||
const levelList = ref<any>([]);
|
||||
// 时间显示
|
||||
const clock = ref<string>('');
|
||||
let timer: any = null;
|
||||
// 首页数据
|
||||
const homeData = ref<any>(null);
|
||||
|
||||
// 跳转变更申请页面、变更台账、我的任务、发起变更
|
||||
const jumpTo = (key: string,qid:number = 0) => {
|
||||
if(key==='details_approval' && qid){
|
||||
routerPushByKey(key,{ query: { id: qid.toString(),key:'home' } });
|
||||
}else if(key==='details_index' && qid){
|
||||
routerPushByKey(key,{ query: { id: qid.toString(),key:'home' } });
|
||||
}else{
|
||||
routerPushByKey(key as any);
|
||||
}
|
||||
}
|
||||
|
||||
// 获取当前时间字符串
|
||||
const getCurrentTimeStr = () => {
|
||||
const now = new Date();
|
||||
const year = now.getFullYear();
|
||||
const month = now.getMonth() + 1;
|
||||
const date = now.getDate();
|
||||
const week = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'][now.getDay()];
|
||||
const hours = String(now.getHours()).padStart(2, '0');
|
||||
const minutes = String(now.getMinutes()).padStart(2, '0');
|
||||
return `${year}年${month}月${date}日 ${week} ${hours}:${minutes}`;
|
||||
}
|
||||
// 更新时间显示
|
||||
const tick = () => {
|
||||
clock.value = getCurrentTimeStr();
|
||||
// 计算距离下一分钟还有多少毫秒（+50ms 容错，防止定时器提前触发）
|
||||
const now = new Date();
|
||||
const delay = (60 - now.getSeconds()) * 1000 - now.getMilliseconds() + 50;
|
||||
timer = setTimeout(tick, delay);
|
||||
}
|
||||
|
||||
// 获取正常、临期、超期数量
|
||||
const getNormalNearOverdue = (key:string) => {
|
||||
const targetItem = homeData.value?.temp_expiry_scope?.items?.find((item:any) => item.key === key);
|
||||
return targetItem?.count || 0;
|
||||
}
|
||||
|
||||
// 匹配对象
|
||||
const matchObj = (list:any,val:number) => {
|
||||
const obj = list.find((item:any) => item.value == val);
|
||||
return obj || null;
|
||||
}
|
||||
|
||||
// 获取数据
|
||||
const getData = async () => {
|
||||
loading.value = true;
|
||||
const {data,error} = await homeLeaderApi();
|
||||
if(!error){
|
||||
homeData.value = data;
|
||||
}
|
||||
loading.value = false;
|
||||
}
|
||||
|
||||
// 获取系统配置
|
||||
const getConfig = async () => {
|
||||
const {data,error} = await systemConfigApi();
|
||||
if(!error){
|
||||
// 解析 临时变更临期提醒
|
||||
const remindDaysGroup = data.find((group:{group_key:string}) => group.group_key === 'change_remind');
|
||||
if (remindDaysGroup) {
|
||||
remindDaysGroup?.items.forEach((item:any) => {
|
||||
if(item.item_key === 'temp_due_remind_days'){
|
||||
remindDays.value = Number(item.value);
|
||||
}
|
||||
})
|
||||
}
|
||||
// 解析 变更等级设置
|
||||
const changeLevelGroup = data.find((group:{group_key:string}) => group.group_key === 'change_level');
|
||||
if (changeLevelGroup) {
|
||||
levelList.value = changeLevelGroup.items;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
tick();
|
||||
getConfig();
|
||||
getData();
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
if(timer){
|
||||
clearTimeout(timer);
|
||||
timer = null;
|
||||
}
|
||||
})
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<NSpin :show="loading" size="small">
|
||||
<div class="space-y-3.5">
|
||||
<NCard :bordered="false" size="small" :style="{ borderRadius: themeStore.themeRadius + 'px' }">
|
||||
<NGrid :x-gap="16" :y-gap="16" responsive="screen" item-responsive>
|
||||
<NGi span="24 s:24 m:8">
|
||||
<div class="flex-y-center">
|
||||
<p
|
||||
class="py-1.5 px-1.5 flex items-center justify-center bg-[rgb(var(--primary-color))] text-white text-xs font-bold"
|
||||
:style="{ borderRadius: themeStore.themeRadius + 'px' }"
|
||||
>
|
||||
MOC
|
||||
</p>
|
||||
<p class="pl-12px text-14px font-semibold">我的工作台</p>
|
||||
</div>
|
||||
</NGi>
|
||||
<NGi span="24 s:24 m:16" class="flex items-center justify-end gap-12px">
|
||||
<p class="text-#999 text-xs">{{clock}}</p>
|
||||
<NButton ghost size="small" @click="jumpTo('factoryoverview')">
|
||||
全厂变更看板
|
||||
</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"
|
||||
:style="{
|
||||
'--theme-color': themeStore.themeColor,
|
||||
'--theme-bg': getColorWithOpacity(themeStore.themeColor, 0.2),
|
||||
'--warning-bg': getColorWithOpacity(themeStore.otherColor.warning, 0.2),
|
||||
'--warning-color': themeStore.otherColor.warning,
|
||||
'--success-color': themeStore.otherColor.success,
|
||||
'--success-bg': getColorWithOpacity(themeStore.otherColor.success, 0.2),
|
||||
'--error-color': themeStore.otherColor.error,
|
||||
'--error-bg': getColorWithOpacity(themeStore.otherColor.error, 0.2),
|
||||
}"
|
||||
>
|
||||
<NGi>
|
||||
<div
|
||||
class="h-100% flex-1 flex items-center gap-3 bg-white px-16px py-12px cursor-pointer transition hover:-translate-y-1"
|
||||
:style="{ borderRadius: themeStore.themeRadius + 'px' }"
|
||||
@click="jumpTo('my_mytask')"
|
||||
>
|
||||
<span class="shrink-0 rounded-lg p-2.5 bg-[var(--theme-bg)]">
|
||||
<Icon icon="lucide:clipboard-check" class="size-24px text-[--theme-color]" />
|
||||
</span>
|
||||
<div class="flex flex-col">
|
||||
<CountTo
|
||||
:start-value="0"
|
||||
:end-value="homeData?.todo_approvals?.total || 0"
|
||||
class="text-26px font-600"
|
||||
/>
|
||||
<p class="text-[11px] font-semibold text-slate-400">待我终批 · 均为重要变更</p>
|
||||
</div>
|
||||
</div>
|
||||
</NGi>
|
||||
<NGi>
|
||||
<div
|
||||
class="h-100% flex-1 flex items-center gap-3 bg-white px-16px py-12px cursor-pointer transition hover:-translate-y-1"
|
||||
:style="{ borderRadius: themeStore.themeRadius + 'px' }"
|
||||
@click="jumpTo('changeledger')"
|
||||
>
|
||||
<span class="shrink-0 rounded-lg p-2.5 bg-[var(--success-bg)]">
|
||||
<Icon icon="akar-icons:file" class="size-24px text-[--success-color]" />
|
||||
</span>
|
||||
<div class="flex flex-col">
|
||||
<CountTo
|
||||
:start-value="0"
|
||||
:end-value="homeData?.unclosed_status?.total || 0"
|
||||
class="text-26px font-600"
|
||||
/>
|
||||
<div class="text-[11px] font-semibold text-slate-400 flex items-center gap-x-2 flex-wrap">
|
||||
当前未关闭变更
|
||||
<span v-for="item in homeData?.unclosed_status?.items || []" :key="item.status">{{item.label}} {{item.count}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</NGi>
|
||||
<NGi>
|
||||
<div
|
||||
class="h-100% flex-1 flex items-center gap-3 bg-white px-16px py-12px cursor-pointer transition hover:-translate-y-1"
|
||||
:style="{ borderRadius: themeStore.themeRadius + 'px' }"
|
||||
@click="jumpTo('changeledger')"
|
||||
>
|
||||
<span class="shrink-0 rounded-lg p-2.5 bg-[var(--warning-bg)]">
|
||||
<Icon icon="lets-icons:clock" class="size-24px text-[--warning-color]" />
|
||||
</span>
|
||||
<div class="flex flex-col">
|
||||
<CountTo
|
||||
:start-value="0"
|
||||
:end-value="homeData?.temp_expiry_scope?.total || 0"
|
||||
class="text-26px font-600 text-[var(--warning-color)]"
|
||||
/>
|
||||
<div class="text-[11px] font-semibold text-slate-400 flex items-center gap-x-2 flex-wrap">
|
||||
临时变更临期或到期
|
||||
<span v-for="item in homeData?.temp_expiry_scope?.items || []" :key="item.status">{{item.label}} {{item.count}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</NGi>
|
||||
<NGi>
|
||||
<div
|
||||
class="h-100% flex-1 flex items-center gap-3 bg-white px-16px py-12px cursor-pointer transition hover:-translate-y-1"
|
||||
:style="{ borderRadius: themeStore.themeRadius + 'px' }"
|
||||
@click="jumpTo('changeledger')"
|
||||
>
|
||||
<span class="shrink-0 rounded-lg p-2.5 bg-[var(--error-bg)]">
|
||||
<Icon icon="proicons:alert-triangle" class="size-24px text-[--error-color]" />
|
||||
</span>
|
||||
<div class="flex flex-col">
|
||||
<div class="flex items-center">
|
||||
<CountTo
|
||||
:start-value="0"
|
||||
:end-value="homeData?.overdue_unclosed?.total || 0"
|
||||
class="text-26px font-600 text-[var(--error-color)]"
|
||||
/>
|
||||
</div>
|
||||
<p class="text-[11px] font-semibold text-slate-400">超期未关闭 · 已升级上报 · 明细见右侧清单</p>
|
||||
</div>
|
||||
</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="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?.todo_approvals?.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?.todo_approvals?.total > 0">
|
||||
<div v-for="row in homeData?.todo_approvals?.items || []" :key="row.change_id" @click="jumpTo('details_approval',row.change_id)"
|
||||
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
|
||||
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 class="text-[11px]" v-if="row.urgent===1" type="error" size="small">紧急</NTag>
|
||||
</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>
|
||||
</div>
|
||||
<div class="mt-0.5 truncate text-[11px] text-slate-400 flex items-center gap-2">
|
||||
<p>申请人：{{row.applicant_name}}</p>
|
||||
<p>{{row.apply_time?.slice(0, 10)}}</p>
|
||||
</div>
|
||||
</div>
|
||||
<NButton size="small" type="primary" class="text-xs">
|
||||
去审批
|
||||
<Icon icon="akar-icons:arrow-right" class="size-13px ml-1" />
|
||||
</NButton>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else>
|
||||
<div class="h-100% flex items-center justify-center py-3">
|
||||
<NEmpty description="暂无数据" class="!text-xs"></NEmpty>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</NCard>
|
||||
|
||||
<NGrid :x-gap="16" :y-gap="16" responsive="screen" item-responsive class="mt-[16px]">
|
||||
<!-- 各部门 / 人员审批时长 -->
|
||||
<NGi span="24 s:24 m:24 l:24">
|
||||
<NCard :bordered="false" size="small" :style="{ borderRadius: themeStore.themeRadius + 'px',height:'100%' }">
|
||||
<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 ghost size="small" class="text-xs" @click="jumpTo('my_datachangecenter')">
|
||||
变更数据中心
|
||||
<Icon icon="formkit:right" class="size-12px" />
|
||||
</NButton>
|
||||
</div>
|
||||
<div class="space-y-3">
|
||||
<div class="flex justify-between gap-6">
|
||||
<div class="w-50%">
|
||||
<div class="mb-2 text-[11px] font-semibold text-slate-500">按部门（全流程平均）</div>
|
||||
<div class="space-y-3">
|
||||
<div v-for="s in homeData?.dept_efficiency?.items" :key="s.org_id" class="flex items-center">
|
||||
<p class="text-slate-500 w-90px text-xs">{{ s.org_name }}</p>
|
||||
<div class="h-2.5 flex-1 overflow-hidden rounded-full bg-slate-100">
|
||||
<div v-if="s.avg_days > homeData?.person_efficiency?.slowest?.avg_days " class="h-full rounded-full" :style="{ width: `${(s.avg_days / s.total) * 100}%`, background: themeStore.otherColor.error }"></div>
|
||||
<div v-else class="h-full rounded-full" :style="{ width: `${(s.avg_days / s.total) * 100}%`, background: themeStore.themeColor }"></div>
|
||||
</div>
|
||||
<p class="w-45px font-semibold text-slate-600 text-xs text-right">{{ s.avg_days || 0 }} 天</p>
|
||||
</div>
|
||||
<div v-if="homeData?.dept_efficiency?.items?.length===0" class="h-100% flex items-center justify-center py-3">
|
||||
<NEmpty description="暂无数据" class="!text-xs"></NEmpty>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-50%">
|
||||
<div class="mb-2 text-[11px] font-semibold text-slate-500">按人员（审批 / 会签环节平均）</div>
|
||||
<div class="space-y-3">
|
||||
<div v-for="s in homeData?.person_efficiency?.items" :key="s.user_id" class="flex items-center">
|
||||
<p class="text-slate-500 w-90px text-xs">{{ s.user_name }}</p>
|
||||
<div class="h-2.5 flex-1 overflow-hidden rounded-full bg-slate-100">
|
||||
<div v-if="s.avg_days > homeData?.person_efficiency?.slowest?.avg_days " class="h-full rounded-full" :style="{ width: `${(s.avg_days / s.total) * 100}%`, background: themeStore.otherColor.error }"></div>
|
||||
<div v-else class="h-full rounded-full" :style="{ width: `${(s.avg_days / s.total) * 100}%`, background: themeStore.themeColor }"></div>
|
||||
</div>
|
||||
<p class="w-45px font-semibold text-slate-600 text-xs text-right">{{ s.avg_days || 0 }} 天</p>
|
||||
</div>
|
||||
<div v-if="homeData?.person_efficiency?.items?.length===0" class="h-100% flex items-center justify-center py-3">
|
||||
<NEmpty description="暂无数据" class="!text-xs"></NEmpty>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="mt-3 rounded-lg bg-[var(--warning-bg)] px-3 py-2 text-[11px] text-[var(--warning-color)]"
|
||||
:style="{
|
||||
'--warning-bg': getColorWithOpacity(themeStore.otherColor.warning, 0.1),
|
||||
'--warning-color': themeStore.otherColor.warning,
|
||||
}"
|
||||
>专业会签环节平均 {{homeData?.person_efficiency?.slowest?.avg_days || 0}} 天，为全流程最慢环节，建议优化会签并行机制</div>
|
||||
</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="proicons:alert-triangle" 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?.overdue_unclosed?.total > 0">
|
||||
<div
|
||||
v-for="r in homeData?.overdue_unclosed?.items"
|
||||
: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 v-if="r.status==='APPROVING'" size="small" type="warning">审批中</NTag>
|
||||
<NTag v-if="r.status==='APPROVED'" size="small" type="success">已通过</NTag>
|
||||
<NTag v-if="r.status==='IMPLEMENTED'" size="small" type="success">待验收</NTag>
|
||||
<NTag v-if="r.status==='ACCEPTED'" size="small" type="error">待关闭</NTag>
|
||||
<NTag v-if="r.status==='CLOSED'" size="small" type="success">已关闭</NTag>
|
||||
<NTag v-if="r.status==='WITHDRAWN'" size="small" type="error">已撤回</NTag>
|
||||
<NTag v-if="r.status==='REJECTED'" size="small" type="error">已驳回</NTag>
|
||||
<NTag type="error" size="small" class="text-11px">超期{{r.overdue_days || 0}}天</NTag>
|
||||
<NButton ghost size="tiny" class="text-xs ml-auto" @click="jumpTo('details_index',r.change_id)">打开变更单</NButton>
|
||||
</div>
|
||||
<p class="mt-0.5 text-sm font-medium text-slate-800">{{ r.title }}</p>
|
||||
<div class="mt-0.5 text-[11px] text-slate-400 flex items-center gap-2">
|
||||
<span>{{ r.change_no }}</span>
|
||||
<span>{{r.org_name}}</span>
|
||||
<span>{{r.applicant_name}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else>
|
||||
<div class="h-100% flex items-center justify-center py-3">
|
||||
<NEmpty description="暂无数据" class="!text-xs"></NEmpty>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</NCard>
|
||||
<!-- 临时变更临期或到期 -->
|
||||
<NCard :bordered="false" size="small" :style="{ borderRadius: themeStore.themeRadius + 'px',marginTop:'16px' }">
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex-1">
|
||||
<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>
|
||||
</div>
|
||||
<p class="text-11px text-#94a3b8">到期前提醒 · 恢复 / 延期 / 转永久</p>
|
||||
</div>
|
||||
<NButton size="small" class="text-xs" @click="jumpTo('changeledger')">
|
||||
变更台账<Icon icon="formkit:right" class="size-12px" />
|
||||
</NButton>
|
||||
</div>
|
||||
<div class="space-y-3 mt-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">{{getNormalNearOverdue('normal')}} 项</span>
|
||||
</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.warning }"></span>
|
||||
<span class="font-medium text-slate-700">临期（到期 ≤ {{remindDays}} 天）</span>
|
||||
<span class="ml-auto font-semibold text-slate-600">{{getNormalNearOverdue('near')}} 项</span>
|
||||
</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">{{getNormalNearOverdue('overdue')}} 项</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</NCard>
|
||||
</NGi>
|
||||
</NGrid>
|
||||
</div>
|
||||
</NSpin>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
|
||||
@@ -1,401 +1,401 @@
|
||||
<script setup lang="ts">
|
||||
import { computed, onMounted, onUnmounted, ref } from 'vue';
|
||||
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 { systemConfigApi } from "@/service/api/system";
|
||||
import { homeQualityApi } from "@/service/api/statistics";
|
||||
|
||||
const themeStore = useThemeStore();
|
||||
const { routerPushByKey } = useRouterPush();
|
||||
|
||||
const loading = ref<boolean>(false);
|
||||
// 变更临期天数
|
||||
const remindDays = ref<number>(0);
|
||||
// 变更类型列表
|
||||
const typeList = ref<any>([]);
|
||||
// 变更等级列表
|
||||
const levelList = ref<any>([]);
|
||||
// 时间显示
|
||||
const clock = ref<string>('');
|
||||
let timer: any = null;
|
||||
// 首页数据
|
||||
const homeData = ref<any>(null);
|
||||
|
||||
// 跳转变更申请页面、变更台账、我的任务、发起变更
|
||||
const jumpTo = (key: string,qid:number = 0) => {
|
||||
if(key==='details_approval' && qid){
|
||||
routerPushByKey(key,{ query: { id: qid.toString(),key:'home' } });
|
||||
}else if(key==='details_index' && qid){
|
||||
routerPushByKey(key,{ query: { id: qid.toString(),key:'home' } });
|
||||
}else{
|
||||
routerPushByKey(key as any);
|
||||
}
|
||||
}
|
||||
|
||||
// 获取当前时间字符串
|
||||
const getCurrentTimeStr = () => {
|
||||
const now = new Date();
|
||||
const year = now.getFullYear();
|
||||
const month = now.getMonth() + 1;
|
||||
const date = now.getDate();
|
||||
const week = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'][now.getDay()];
|
||||
const hours = String(now.getHours()).padStart(2, '0');
|
||||
const minutes = String(now.getMinutes()).padStart(2, '0');
|
||||
return `${year}年${month}月${date}日 ${week} ${hours}:${minutes}`;
|
||||
}
|
||||
// 更新时间显示
|
||||
const tick = () => {
|
||||
clock.value = getCurrentTimeStr();
|
||||
// 计算距离下一分钟还有多少毫秒（+50ms 容错，防止定时器提前触发）
|
||||
const now = new Date();
|
||||
const delay = (60 - now.getSeconds()) * 1000 - now.getMilliseconds() + 50;
|
||||
timer = setTimeout(tick, delay);
|
||||
}
|
||||
|
||||
// 匹配对象
|
||||
const matchObj = (list:any,val:number) => {
|
||||
const obj = list.find((item:any) => item.value == val);
|
||||
return obj || null;
|
||||
}
|
||||
|
||||
// 获取数据
|
||||
const getData = async () => {
|
||||
loading.value = true;
|
||||
const {data,error} = await homeQualityApi();
|
||||
if(!error){
|
||||
homeData.value = data;
|
||||
}
|
||||
loading.value = false;
|
||||
}
|
||||
|
||||
// 获取系统配置
|
||||
const getConfig = async () => {
|
||||
const {data,error} = await systemConfigApi();
|
||||
if(!error){
|
||||
// 解析 临时变更临期提醒
|
||||
const remindDaysGroup = data.find((group:{group_key:string}) => group.group_key === 'change_remind');
|
||||
if (remindDaysGroup) {
|
||||
remindDaysGroup?.items.forEach((item:any) => {
|
||||
if(item.item_key === 'temp_due_remind_days'){
|
||||
remindDays.value = Number(item.value);
|
||||
}
|
||||
})
|
||||
}
|
||||
// 解析 变更类型设置
|
||||
const changeTypeGroup = data.find((group:{group_key:string}) => group.group_key === 'change_type');
|
||||
if (changeTypeGroup) {
|
||||
typeList.value = changeTypeGroup.items;
|
||||
}
|
||||
// 解析 变更等级设置
|
||||
const changeLevelGroup = data.find((group:{group_key:string}) => group.group_key === 'change_level');
|
||||
if (changeLevelGroup) {
|
||||
levelList.value = changeLevelGroup.items;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
tick();
|
||||
getConfig();
|
||||
getData();
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
if(timer){
|
||||
clearTimeout(timer);
|
||||
timer = null;
|
||||
}
|
||||
})
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<NSpin :show="loading" size="small">
|
||||
<div class="space-y-3.5">
|
||||
<NCard :bordered="false" size="small" :style="{ borderRadius: themeStore.themeRadius + 'px' }">
|
||||
<NGrid :x-gap="16" :y-gap="16" responsive="screen" item-responsive>
|
||||
<NGi span="24 s:24 m:12">
|
||||
<div class="flex-y-center">
|
||||
<p
|
||||
class="py-1.5 px-1.5 flex items-center justify-center bg-[rgb(var(--primary-color))] text-white text-xs font-bold"
|
||||
:style="{ borderRadius: themeStore.themeRadius + 'px' }"
|
||||
>
|
||||
MOC
|
||||
</p>
|
||||
<p class="pl-12px text-14px font-semibold">我的工作台</p>
|
||||
</div>
|
||||
</NGi>
|
||||
<NGi span="24 s:24 m:12" class="flex items-center justify-end gap-12px">
|
||||
<p class="text-#999 text-xs">{{clock}}</p>
|
||||
<NButton ghost size="small" @click="jumpTo('changeledger')">
|
||||
质量相关变更
|
||||
</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-[#fff] px-16px py-12px cursor-pointer flex items-center gap-3"
|
||||
:style="{ borderRadius: themeStore.themeRadius + 'px' }"
|
||||
@click="jumpTo('my_mytask')"
|
||||
>
|
||||
<div class="flex justify-between">
|
||||
<CountTo
|
||||
:start-value="0"
|
||||
:end-value="homeData?.todo_sign?.total || 0"
|
||||
class="text-26px font-600"
|
||||
:style="{ color: homeData?.todo_sign?.overdue_count ? themeStore.otherColor.error : themeStore.themeColor }"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-12px font-600">待我会签</p>
|
||||
<p v-if="homeData?.todo_sign?.overdue_count" class="text-12px" :style="{ color: themeStore.otherColor.error }">其中超期 {{homeData?.todo_sign?.overdue_count || 0}} 项 · 请优先处理</p>
|
||||
<p v-else class="text-12px text-slate-400">无超期</p>
|
||||
</div>
|
||||
</div>
|
||||
</NGi>
|
||||
<NGi>
|
||||
<div
|
||||
class="flex-1 bg-[#fff] px-16px py-12px cursor-pointer flex items-center gap-3"
|
||||
:style="{ borderRadius: themeStore.themeRadius + 'px' }"
|
||||
@click="jumpTo('signstatistics')"
|
||||
>
|
||||
<div class="flex justify-between">
|
||||
<CountTo
|
||||
:start-value="0"
|
||||
:end-value="homeData?.sign_stats?.month_signed || 0"
|
||||
class="text-26px font-600"
|
||||
:style="{ color: themeStore.themeColor }"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-12px font-600">本月已会签</p>
|
||||
</div>
|
||||
</div>
|
||||
</NGi>
|
||||
<NGi>
|
||||
<div
|
||||
class="flex-1 bg-[#fff] px-16px py-12px cursor-pointer flex items-center gap-3"
|
||||
:style="{ borderRadius: themeStore.themeRadius + 'px' }"
|
||||
@click="jumpTo('changeledger')"
|
||||
>
|
||||
<div class="flex justify-between">
|
||||
<CountTo
|
||||
:start-value="0"
|
||||
:end-value="homeData?.quality_focus?.total || 0"
|
||||
class="text-26px font-600"
|
||||
:style="{ color: themeStore.themeColor }"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-12px font-600">涉及产品质量变更</p>
|
||||
<p class="text-12px text-slate-400">在办 · 影响产品合格判定</p>
|
||||
</div>
|
||||
</div>
|
||||
</NGi>
|
||||
<NGi>
|
||||
<div
|
||||
class="flex-1 bg-[#fff] px-16px py-12px cursor-pointer flex items-center gap-3"
|
||||
:style="{ borderRadius: themeStore.themeRadius + 'px' }"
|
||||
@click="jumpTo('signstatistics')"
|
||||
>
|
||||
<div class="flex justify-between">
|
||||
<CountTo
|
||||
:start-value="0"
|
||||
:end-value="homeData?.quality_focus?.year_fmea_count || 0"
|
||||
class="text-26px font-600"
|
||||
:style="{ color: themeStore.themeColor }"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-12px font-600">FMEA分析条数</p>
|
||||
</div>
|
||||
</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="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?.todo_sign?.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?.todo_sign?.total > 0">
|
||||
<div v-for="row in homeData?.todo_sign?.items || []" :key="row.change_id" @click="jumpTo('details_approval',row.change_id)"
|
||||
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.overdue_status===2" class="text-xs" :style="{ color: themeStore.otherColor.error }">已超期 {{row.overdue_days}} 天</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 size="small" type="warning">{{row.step_name}}</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.applicant_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>
|
||||
<div class="h-100% flex items-center justify-center py-3">
|
||||
<NEmpty description="暂无数据" class="!text-xs"></NEmpty>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</NCard>
|
||||
|
||||
<NGrid :x-gap="16" :y-gap="16" responsive="screen" item-responsive class="mt-[16px]">
|
||||
<!-- 最近已会签 -->
|
||||
<NGi span="24 s:24 m:24 l:24">
|
||||
<NCard :bordered="false" size="small" :style="{ borderRadius: themeStore.themeRadius + 'px' }">
|
||||
<div class="flex items-center mb-3 gap-2">
|
||||
<Icon icon="ix:success" 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 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">{{ 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 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>
|
||||
<div v-else class="h-100% flex items-center justify-center py-3">
|
||||
<NEmpty description="暂无数据" class="!text-xs"></NEmpty>
|
||||
</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="lucide:shield-alert" class="size-16px" :style="{ color: themeStore.themeColor }" />
|
||||
<p class="text-13px font-700 text-#64749a">质量关注变更</p>
|
||||
<p class="text-11px text-#94a3b8">在办 · 影响产品合格判定，建议重点关注</p>
|
||||
</div>
|
||||
<template v-if="homeData?.quality_focus?.items?.length">
|
||||
<div class="space-y-2.5">
|
||||
<div v-for="h in homeData?.quality_focus?.items || []" :key="h.change_id" class="rounded-md border border-amber-200 bg-amber-50/60 px-3.5 py-2.5">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="min-w-0 flex-1 truncate text-sm font-medium text-slate-800">{{ h.title }}</span>
|
||||
<NButton size="tiny" ghost type="warning" class="text-xs" @click="jumpTo('changeledger')">查看</NButton>
|
||||
</div>
|
||||
<div class="mt-1 text-[11px]" :style="{ color: themeStore.otherColor.warning }">{{ h.effect }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else>
|
||||
<div class="h-100% flex items-center justify-center py-3">
|
||||
<NEmpty description="暂无数据" class="!text-xs"></NEmpty>
|
||||
</div>
|
||||
</template>
|
||||
</NCard>
|
||||
<!-- 我的会签效率 -->
|
||||
<NCard :bordered="false" size="small" :style="{ borderRadius: themeStore.themeRadius + 'px',marginTop:'16px' }">
|
||||
<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">系统自动采集 · 近 30 天</p>
|
||||
</div>
|
||||
<div class="flex flex-col gap-3">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="text-xs text-slate-500 w-16">平均耗时</span>
|
||||
<NProgress
|
||||
type="line"
|
||||
status="info"
|
||||
:percentage="((homeData?.sign_stats?.avg_audit_days || 0) / 2) * 100"
|
||||
:height="10"
|
||||
border-radius="6px"
|
||||
>
|
||||
<span class="text-xs text-slate-700 font-semibold">{{homeData?.sign_stats?.avg_audit_days || 0}}天</span>
|
||||
</NProgress>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="text-xs text-slate-500 w-16">最长耗时</span>
|
||||
<NProgress
|
||||
type="line"
|
||||
status="error"
|
||||
:percentage="((homeData?.sign_stats?.max_audit_days || 0) / 2) * 100"
|
||||
:height="10"
|
||||
border-radius="6px"
|
||||
>
|
||||
<span class="text-xs text-slate-700 font-semibold" :style="{ color: themeStore.otherColor.error }">{{homeData?.sign_stats?.max_audit_days || 0}}天</span>
|
||||
</NProgress>
|
||||
</div>
|
||||
<div class="flex items-center justify-between text-[11px] text-slate-400">
|
||||
<span>会签及时率 <b :style="{ color: themeStore.otherColor.success }">{{homeData?.sign_stats?.timely_rate || 0}}%</b></span>
|
||||
<span>目标 2 天内签署</span>
|
||||
</div>
|
||||
</div>
|
||||
</NCard>
|
||||
</NGi>
|
||||
</NGrid>
|
||||
</div>
|
||||
</NSpin>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
<script setup lang="ts">
|
||||
import { computed, onMounted, onUnmounted, ref } from 'vue';
|
||||
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 { systemConfigApi } from "@/service/api/system";
|
||||
import { homeQualityApi } from "@/service/api/statistics";
|
||||
|
||||
const themeStore = useThemeStore();
|
||||
const { routerPushByKey } = useRouterPush();
|
||||
|
||||
const loading = ref<boolean>(false);
|
||||
// 变更临期天数
|
||||
const remindDays = ref<number>(0);
|
||||
// 变更类型列表
|
||||
const typeList = ref<any>([]);
|
||||
// 变更等级列表
|
||||
const levelList = ref<any>([]);
|
||||
// 时间显示
|
||||
const clock = ref<string>('');
|
||||
let timer: any = null;
|
||||
// 首页数据
|
||||
const homeData = ref<any>(null);
|
||||
|
||||
// 跳转变更申请页面、变更台账、我的任务、发起变更
|
||||
const jumpTo = (key: string,qid:number = 0) => {
|
||||
if(key==='details_approval' && qid){
|
||||
routerPushByKey(key,{ query: { id: qid.toString(),key:'home' } });
|
||||
}else if(key==='details_index' && qid){
|
||||
routerPushByKey(key,{ query: { id: qid.toString(),key:'home' } });
|
||||
}else{
|
||||
routerPushByKey(key as any);
|
||||
}
|
||||
}
|
||||
|
||||
// 获取当前时间字符串
|
||||
const getCurrentTimeStr = () => {
|
||||
const now = new Date();
|
||||
const year = now.getFullYear();
|
||||
const month = now.getMonth() + 1;
|
||||
const date = now.getDate();
|
||||
const week = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'][now.getDay()];
|
||||
const hours = String(now.getHours()).padStart(2, '0');
|
||||
const minutes = String(now.getMinutes()).padStart(2, '0');
|
||||
return `${year}年${month}月${date}日 ${week} ${hours}:${minutes}`;
|
||||
}
|
||||
// 更新时间显示
|
||||
const tick = () => {
|
||||
clock.value = getCurrentTimeStr();
|
||||
// 计算距离下一分钟还有多少毫秒（+50ms 容错，防止定时器提前触发）
|
||||
const now = new Date();
|
||||
const delay = (60 - now.getSeconds()) * 1000 - now.getMilliseconds() + 50;
|
||||
timer = setTimeout(tick, delay);
|
||||
}
|
||||
|
||||
// 匹配对象
|
||||
const matchObj = (list:any,val:number) => {
|
||||
const obj = list.find((item:any) => item.value == val);
|
||||
return obj || null;
|
||||
}
|
||||
|
||||
// 获取数据
|
||||
const getData = async () => {
|
||||
loading.value = true;
|
||||
const {data,error} = await homeQualityApi();
|
||||
if(!error){
|
||||
homeData.value = data;
|
||||
}
|
||||
loading.value = false;
|
||||
}
|
||||
|
||||
// 获取系统配置
|
||||
const getConfig = async () => {
|
||||
const {data,error} = await systemConfigApi();
|
||||
if(!error){
|
||||
// 解析 临时变更临期提醒
|
||||
const remindDaysGroup = data.find((group:{group_key:string}) => group.group_key === 'change_remind');
|
||||
if (remindDaysGroup) {
|
||||
remindDaysGroup?.items.forEach((item:any) => {
|
||||
if(item.item_key === 'temp_due_remind_days'){
|
||||
remindDays.value = Number(item.value);
|
||||
}
|
||||
})
|
||||
}
|
||||
// 解析 变更类型设置
|
||||
const changeTypeGroup = data.find((group:{group_key:string}) => group.group_key === 'change_type');
|
||||
if (changeTypeGroup) {
|
||||
typeList.value = changeTypeGroup.items;
|
||||
}
|
||||
// 解析 变更等级设置
|
||||
const changeLevelGroup = data.find((group:{group_key:string}) => group.group_key === 'change_level');
|
||||
if (changeLevelGroup) {
|
||||
levelList.value = changeLevelGroup.items;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
tick();
|
||||
getConfig();
|
||||
getData();
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
if(timer){
|
||||
clearTimeout(timer);
|
||||
timer = null;
|
||||
}
|
||||
})
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<NSpin :show="loading" size="small">
|
||||
<div class="space-y-3.5">
|
||||
<NCard :bordered="false" size="small" :style="{ borderRadius: themeStore.themeRadius + 'px' }">
|
||||
<NGrid :x-gap="16" :y-gap="16" responsive="screen" item-responsive>
|
||||
<NGi span="24 s:24 m:12">
|
||||
<div class="flex-y-center">
|
||||
<p
|
||||
class="py-1.5 px-1.5 flex items-center justify-center bg-[rgb(var(--primary-color))] text-white text-xs font-bold"
|
||||
:style="{ borderRadius: themeStore.themeRadius + 'px' }"
|
||||
>
|
||||
MOC
|
||||
</p>
|
||||
<p class="pl-12px text-14px font-semibold">我的工作台</p>
|
||||
</div>
|
||||
</NGi>
|
||||
<NGi span="24 s:24 m:12" class="flex items-center justify-end gap-12px">
|
||||
<p class="text-#999 text-xs">{{clock}}</p>
|
||||
<NButton ghost size="small" @click="jumpTo('changeledger')">
|
||||
质量相关变更
|
||||
</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-[#fff] px-16px py-12px cursor-pointer flex items-center gap-3"
|
||||
:style="{ borderRadius: themeStore.themeRadius + 'px' }"
|
||||
@click="jumpTo('my_mytask')"
|
||||
>
|
||||
<div class="flex justify-between">
|
||||
<CountTo
|
||||
:start-value="0"
|
||||
:end-value="homeData?.todo_sign?.total || 0"
|
||||
class="text-26px font-600"
|
||||
:style="{ color: homeData?.todo_sign?.overdue_count ? themeStore.otherColor.error : themeStore.themeColor }"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-12px font-600">待我会签</p>
|
||||
<p v-if="homeData?.todo_sign?.overdue_count" class="text-12px" :style="{ color: themeStore.otherColor.error }">其中超期 {{homeData?.todo_sign?.overdue_count || 0}} 项 · 请优先处理</p>
|
||||
<p v-else class="text-12px text-slate-400">无超期</p>
|
||||
</div>
|
||||
</div>
|
||||
</NGi>
|
||||
<NGi>
|
||||
<div
|
||||
class="flex-1 bg-[#fff] px-16px py-12px cursor-pointer flex items-center gap-3"
|
||||
:style="{ borderRadius: themeStore.themeRadius + 'px' }"
|
||||
@click="jumpTo('signstatistics')"
|
||||
>
|
||||
<div class="flex justify-between">
|
||||
<CountTo
|
||||
:start-value="0"
|
||||
:end-value="homeData?.sign_stats?.month_signed || 0"
|
||||
class="text-26px font-600"
|
||||
:style="{ color: themeStore.themeColor }"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-12px font-600">本月已会签</p>
|
||||
</div>
|
||||
</div>
|
||||
</NGi>
|
||||
<NGi>
|
||||
<div
|
||||
class="flex-1 bg-[#fff] px-16px py-12px cursor-pointer flex items-center gap-3"
|
||||
:style="{ borderRadius: themeStore.themeRadius + 'px' }"
|
||||
@click="jumpTo('changeledger')"
|
||||
>
|
||||
<div class="flex justify-between">
|
||||
<CountTo
|
||||
:start-value="0"
|
||||
:end-value="homeData?.quality_focus?.total || 0"
|
||||
class="text-26px font-600"
|
||||
:style="{ color: themeStore.themeColor }"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-12px font-600">涉及产品质量变更</p>
|
||||
<p class="text-12px text-slate-400">在办 · 影响产品合格判定</p>
|
||||
</div>
|
||||
</div>
|
||||
</NGi>
|
||||
<NGi>
|
||||
<div
|
||||
class="flex-1 bg-[#fff] px-16px py-12px cursor-pointer flex items-center gap-3"
|
||||
:style="{ borderRadius: themeStore.themeRadius + 'px' }"
|
||||
@click="jumpTo('signstatistics')"
|
||||
>
|
||||
<div class="flex justify-between">
|
||||
<CountTo
|
||||
:start-value="0"
|
||||
:end-value="homeData?.quality_focus?.year_fmea_count || 0"
|
||||
class="text-26px font-600"
|
||||
:style="{ color: themeStore.themeColor }"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-12px font-600">FMEA分析条数</p>
|
||||
</div>
|
||||
</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="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?.todo_sign?.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?.todo_sign?.total > 0">
|
||||
<div v-for="row in homeData?.todo_sign?.items || []" :key="row.change_id" @click="jumpTo('details_approval',row.change_id)"
|
||||
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.overdue_status===2" class="text-xs" :style="{ color: themeStore.otherColor.error }">已超期 {{row.overdue_days}} 天</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 size="small" type="warning">{{row.step_name}}</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.applicant_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>
|
||||
<div class="h-100% flex items-center justify-center py-3">
|
||||
<NEmpty description="暂无数据" class="!text-xs"></NEmpty>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</NCard>
|
||||
|
||||
<NGrid :x-gap="16" :y-gap="16" responsive="screen" item-responsive class="mt-[16px]">
|
||||
<!-- 最近已会签 -->
|
||||
<NGi span="24 s:24 m:24 l:24">
|
||||
<NCard :bordered="false" size="small" :style="{ borderRadius: themeStore.themeRadius + 'px' }">
|
||||
<div class="flex items-center mb-3 gap-2">
|
||||
<Icon icon="ix:success" 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 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">{{ 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 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>
|
||||
<div v-else class="h-100% flex items-center justify-center py-3">
|
||||
<NEmpty description="暂无数据" class="!text-xs"></NEmpty>
|
||||
</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="lucide:shield-alert" class="size-16px" :style="{ color: themeStore.themeColor }" />
|
||||
<p class="text-13px font-700 text-#64749a">质量关注变更</p>
|
||||
<p class="text-11px text-#94a3b8">在办 · 影响产品合格判定，建议重点关注</p>
|
||||
</div>
|
||||
<template v-if="homeData?.quality_focus?.items?.length">
|
||||
<div class="space-y-2.5">
|
||||
<div v-for="h in homeData?.quality_focus?.items || []" :key="h.change_id" class="rounded-md border border-amber-200 bg-amber-50/60 px-3.5 py-2.5">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="min-w-0 flex-1 truncate text-sm font-medium text-slate-800">{{ h.title }}</span>
|
||||
<NButton size="tiny" ghost type="warning" class="text-xs" @click="jumpTo('changeledger')">查看</NButton>
|
||||
</div>
|
||||
<div class="mt-1 text-[11px]" :style="{ color: themeStore.otherColor.warning }">{{ h.effect }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else>
|
||||
<div class="h-100% flex items-center justify-center py-3">
|
||||
<NEmpty description="暂无数据" class="!text-xs"></NEmpty>
|
||||
</div>
|
||||
</template>
|
||||
</NCard>
|
||||
<!-- 我的会签效率 -->
|
||||
<NCard :bordered="false" size="small" :style="{ borderRadius: themeStore.themeRadius + 'px',marginTop:'16px' }">
|
||||
<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">系统自动采集 · 近 30 天</p>
|
||||
</div>
|
||||
<div class="flex flex-col gap-3">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="text-xs text-slate-500 w-16">平均耗时</span>
|
||||
<NProgress
|
||||
type="line"
|
||||
status="info"
|
||||
:percentage="((homeData?.sign_stats?.avg_audit_days || 0) / 2) * 100"
|
||||
:height="10"
|
||||
border-radius="6px"
|
||||
>
|
||||
<span class="text-xs text-slate-700 font-semibold">{{homeData?.sign_stats?.avg_audit_days || 0}}天</span>
|
||||
</NProgress>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="text-xs text-slate-500 w-16">最长耗时</span>
|
||||
<NProgress
|
||||
type="line"
|
||||
status="error"
|
||||
:percentage="((homeData?.sign_stats?.max_audit_days || 0) / 2) * 100"
|
||||
:height="10"
|
||||
border-radius="6px"
|
||||
>
|
||||
<span class="text-xs text-slate-700 font-semibold" :style="{ color: themeStore.otherColor.error }">{{homeData?.sign_stats?.max_audit_days || 0}}天</span>
|
||||
</NProgress>
|
||||
</div>
|
||||
<div class="flex items-center justify-between text-[11px] text-slate-400">
|
||||
<span>会签及时率 <b :style="{ color: themeStore.otherColor.success }">{{homeData?.sign_stats?.timely_rate || 0}}%</b></span>
|
||||
<span>目标 2 天内签署</span>
|
||||
</div>
|
||||
</div>
|
||||
</NCard>
|
||||
</NGi>
|
||||
</NGrid>
|
||||
</div>
|
||||
</NSpin>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
|
||||
Reference in New Issue
Block a user