变更投入和效果页面完成
This commit is contained in:
+143
-56
@@ -3,44 +3,97 @@ import { ref, onMounted } from 'vue';
|
||||
import { Icon } from '@iconify/vue'
|
||||
import { useThemeStore } from '@/store/modules/theme';
|
||||
import { useRouterPush } from '@/hooks/common/router';
|
||||
import { tagTextColor, tagBgColor, tagBorderColor } from '@/utils/common';
|
||||
import { systemConfigApi } from '@/service/api/system';
|
||||
import { effectListApi } from '@/service/api/pendingChange';
|
||||
|
||||
const themeStore = useThemeStore();
|
||||
const { routerPushByKey } = useRouterPush();
|
||||
|
||||
const loading = ref<boolean>(false);
|
||||
const list = ref<any[]>([]);
|
||||
const lists = [
|
||||
{ title: "氮气管网压力分级调整", id: "MOC-2026-R01-0024", applicant: "张工艺", type: "工艺", level: "重要", duration: "永久", applyDate: "2026-05-28", useTime: "2026-06-20", acceptDate: "2026-07-08", cost: 3.2, result: "完全达到" },
|
||||
{ title: "R-201 搅拌密封改造", id: "MOC-2026-R01-0019", applicant: "张工艺", type: "设备", level: "一般", duration: "永久", applyDate: "2026-03-18", useTime: "2026-04-12", acceptDate: "2026-05-20", cost: 6.8, result: "完全达到" },
|
||||
{ title: "循环水加药泵冲程临时调整", id: "MOC-2026-R01-0022", applicant: "张工艺", type: "设备", level: "一般", duration: "临时", applyDate: "2026-04-25", useTime: "2026-05-18", acceptDate: "2026-06-30", cost: 1.5, result: "基本达到" },
|
||||
];
|
||||
// 获取列表数据
|
||||
const getList = () => {
|
||||
loading.value = true;
|
||||
setTimeout(() => {
|
||||
list.value = lists;
|
||||
loading.value = false;
|
||||
}, 1000);
|
||||
}
|
||||
// 总投入
|
||||
const totalCost = ref<number>(0);
|
||||
// 完全达到率
|
||||
const fullRate = ref<number>(0);
|
||||
// 标准列表
|
||||
const standardList = ref<any[]>([]);
|
||||
// 分页
|
||||
const pagination = ref<{page: number, pageSize: number, itemCount: number}>({
|
||||
page: 1,
|
||||
pageSize: 20,
|
||||
itemCount: 0,
|
||||
})
|
||||
// 变更类型列表
|
||||
const typeList = ref<any[]>([]);
|
||||
// 变更等级列表
|
||||
const levelList = ref<any[]>([]);
|
||||
|
||||
// 导出文件
|
||||
const exportFile = () => {
|
||||
window.$message?.success(`导出本车间已验收变更投入和效果表（Excel）`)
|
||||
window.$message?.info('还差接口')
|
||||
}
|
||||
// 查看
|
||||
const openRow = (r: any) => {
|
||||
window.$message?.info(`打开变更详情页 ${r.id}（含验收报告与费用明细）`);
|
||||
routerPushByKey("details_index",{ query: { id: r?.change_id?.toString(),status:r?.status?.toString() || '',key:'my_effect' } });
|
||||
};
|
||||
|
||||
// 分页改变
|
||||
const pageChange = (page: number) => {
|
||||
pagination.value.page = page;
|
||||
getList();
|
||||
}
|
||||
|
||||
// 匹配对象
|
||||
const matchObj= (list:any[],val:any) => {
|
||||
const item = list.find((item:any) => item.value == val);
|
||||
return item || null;
|
||||
}
|
||||
|
||||
// 获取列表数据
|
||||
const getList = async () => {
|
||||
loading.value = true;
|
||||
const {data,error} = await effectListApi({
|
||||
page_num:pagination.value.page,
|
||||
page_size:pagination.value.pageSize,
|
||||
});
|
||||
if(!error){
|
||||
list.value = data?.list || [];
|
||||
pagination.value.itemCount = data?.total || 0;
|
||||
totalCost.value = data?.summary?.total_cost || 0;
|
||||
fullRate.value = data?.summary?.full_rate || 0;
|
||||
standardList.value = data?.summary?.items || [];
|
||||
}
|
||||
loading.value = false;
|
||||
}
|
||||
|
||||
// 获取配置
|
||||
const getConfig = async () => {
|
||||
loading.value = true;
|
||||
const {data,error} = await systemConfigApi();
|
||||
if(!error){
|
||||
// 解析 变更类型设置
|
||||
const changeTypeGroup = data.find((group:{group_key:string}) => group.group_key === 'change_type');
|
||||
if (changeTypeGroup) {
|
||||
typeList.value = typeList.value.concat(changeTypeGroup.items);
|
||||
}
|
||||
// 解析 变更等级设置
|
||||
const changeLevelGroup = data.find((group:{group_key:string}) => group.group_key === 'change_level');
|
||||
if (changeLevelGroup) {
|
||||
levelList.value = levelList.value.concat(changeLevelGroup.items);
|
||||
}
|
||||
getList();
|
||||
}
|
||||
loading.value = false;
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
getList();
|
||||
getConfig();
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<NSpace vertical :size="16">
|
||||
<!-- PSSR监督 -->
|
||||
<NSpin :show="loading" size="small">
|
||||
<NCard :bordered="false" size="small" :style="{ borderRadius: themeStore.themeRadius + 'px' }">
|
||||
<div
|
||||
@@ -53,22 +106,19 @@ onMounted(() => {
|
||||
}"
|
||||
>
|
||||
<span class="text-sm font-bold text-slate-800">本车间已验收变更</span>
|
||||
<span class="text-xs text-slate-500">共 <b class="text-[#1D4E9C]">{{ list.length }}</b> 起</span>
|
||||
<span class="text-xs text-slate-500">投入合计 <b class="text-[#1D4E9C]">11.5</b> 万元</span>
|
||||
<span class="text-xs text-slate-500">完全达到率 <b class="text-[var(--success-bg)]">67%</b></span>
|
||||
<span class="text-xs text-slate-500">共 <b class="text-[#1D4E9C]">{{ pagination.itemCount }}</b> 起</span>
|
||||
<span class="text-xs text-slate-500">投入合计 <b class="text-[#1D4E9C]">{{totalCost}}</b> 万元</span>
|
||||
<span class="text-xs text-slate-500">完全达到率 <b class="text-[var(--success-bg)]">{{fullRate}}%</b></span>
|
||||
<span class="hidden h-4 w-px bg-slate-200 sm:block"></span>
|
||||
<span class="text-xs text-slate-500">
|
||||
<span class="mr-1 inline-block h-2 w-2 rounded-full align-middle bg-[var(--success-bg)]"></span>
|
||||
完全达到<b class="text-slate-800">2</b> 起 · <b class="text-slate-800">10.0</b> 万元
|
||||
</span>
|
||||
<span class="text-xs text-slate-500">
|
||||
<span class="mr-1 inline-block h-2 w-2 rounded-full align-middle bg-[var(--warning-bg)]"></span>
|
||||
基本达到<b class="text-slate-800">1</b> 起 · <b class="text-slate-800">1.5</b> 万元
|
||||
</span>
|
||||
<span class="text-xs text-slate-500">
|
||||
<span class="mr-1 inline-block h-2 w-2 rounded-full align-middle bg-[var(--error-bg)]"></span>
|
||||
未达到<b class="text-slate-800">0</b> 起 · <b class="text-slate-800">0.0</b> 万元
|
||||
</span>
|
||||
|
||||
<template v-for="item in standardList" :key="item.key">
|
||||
<span class="text-xs text-slate-500">
|
||||
<span v-if="item.key==='3'" class="mr-1 inline-block h-2 w-2 rounded-full align-middle bg-[var(--success-bg)]"></span>
|
||||
<span v-if="item.key==='2'" class="mr-1 inline-block h-2 w-2 rounded-full align-middle bg-[var(--warning-bg)]"></span>
|
||||
<span v-if="item.key==='1'" class="mr-1 inline-block h-2 w-2 rounded-full align-middle bg-[var(--error-bg)]"></span>
|
||||
{{item.label}}<b class="text-slate-800">{{item.count}}</b> 起 · <b class="text-slate-800">{{item.fee}}</b> 万元
|
||||
</span>
|
||||
</template>
|
||||
<NButton size="small" ghost class="ml-auto text-xs" @click="exportFile">
|
||||
<Icon icon="material-symbols:download" class="size-16px" />导出
|
||||
</NButton>
|
||||
@@ -84,35 +134,72 @@ onMounted(() => {
|
||||
<span class="w-[64px] shrink-0 text-right">操作</span>
|
||||
</div>
|
||||
<div class="scroll">
|
||||
<div class="divide-y">
|
||||
<div class="divide-y h-100%">
|
||||
<div v-for="r in list" :key="r.id" class="flex flex-wrap items-center gap-x-3 gap-y-1.5 px-4 py-3 transition hover:bg-[#EAF0F9]/40">
|
||||
<span class="min-w-0 flex-1">
|
||||
<span class="flex flex-wrap items-center gap-1.5">
|
||||
<span class="truncate text-sm font-medium text-slate-800">{{ r.title }}</span>
|
||||
<NTag v-if="r.level==='一般'" size="small">{{ r.level }}</NTag>
|
||||
<NTag v-if="r.level==='重要'" size="small" type="error">{{ r.level }}</NTag>
|
||||
<NTag size="small" type="info">{{ r.type }}</NTag>
|
||||
<NTag v-if="r.duration==='永久'" size="small">{{ r.duration }}</NTag>
|
||||
<NTag v-if="r.duration==='临时'" size="small" type="warning">{{ r.duration }}</NTag>
|
||||
<span class="min-w-0 flex-1">
|
||||
<span class="flex flex-wrap items-center gap-1.5">
|
||||
<span class="truncate text-sm font-medium text-slate-800">{{ r.title }}</span>
|
||||
<!-- 等级 -->
|
||||
<NTag
|
||||
size="small"
|
||||
:color="{
|
||||
color: tagBgColor(matchObj(levelList,r.change_level)?.color),
|
||||
textColor: tagTextColor(matchObj(levelList,r.change_level)?.color),
|
||||
borderColor: tagBorderColor(matchObj(levelList,r.change_level)?.color),
|
||||
}"
|
||||
>
|
||||
{{ matchObj(levelList,r.change_level)?.label }}
|
||||
</NTag>
|
||||
<!-- 类型 -->
|
||||
<NTag
|
||||
size="small"
|
||||
:color="{
|
||||
color: tagBgColor(matchObj(typeList,r.change_type)?.color),
|
||||
textColor: tagTextColor(matchObj(typeList,r.change_type)?.color),
|
||||
borderColor: tagBorderColor(matchObj(typeList,r.change_type)?.color),
|
||||
}"
|
||||
>
|
||||
{{ matchObj(typeList,r.change_type)?.label }}
|
||||
</NTag>
|
||||
<NTag v-if="r.duration_type===2" size="small" type="warning">临时</NTag>
|
||||
<NTag v-if="r.duration_type===1" size="small" type="info">永久</NTag>
|
||||
</span>
|
||||
<span class="mt-0.5 block font-mono text-[11px] text-slate-400">{{ r.change_no }} · {{ r.applicant_name }} · 费用取验收时填报的「变更材料和实施费」</span>
|
||||
</span>
|
||||
<span class="mt-0.5 block font-mono text-[11px] text-slate-400">{{ r.id }} · {{ r.applicant }} · 费用取验收时填报的「变更材料和实施费」</span>
|
||||
</span>
|
||||
<span class="w-[92px] shrink-0 text-xs text-slate-600">{{ r.applyDate }}</span>
|
||||
<span class="w-[92px] shrink-0 text-xs text-slate-600">{{ r.useTime }}</span>
|
||||
<span class="w-[92px] shrink-0 text-xs text-slate-600">{{ r.acceptDate }}</span>
|
||||
<span class="w-[80px] shrink-0 text-right text-sm font-bold text-slate-800">{{ r.cost.toFixed(1) }}</span>
|
||||
<span class="w-[100px] shrink-0 text-center">
|
||||
<NTag v-if="r.result==='完全达到'" size="small" type="success">{{ r.result }}</NTag>
|
||||
<NTag v-if="r.result==='基本达到'" size="small" type="warning">{{ r.result }}</NTag>
|
||||
<NTag v-if="r.result==='未达到'" size="small" type="error">{{ r.result }}</NTag>
|
||||
</span>
|
||||
<span class="w-[64px] shrink-0 text-right">
|
||||
<NButton size="small" ghost class="text-xs" @click="openRow(r)">查看</NButton>
|
||||
</span>
|
||||
<span class="w-[92px] shrink-0 text-xs text-slate-600">{{ r.apply_time?.slice(0,10) }}</span>
|
||||
<span class="w-[92px] shrink-0 text-xs text-slate-600">{{ r.use_time?.slice(0,10) }}</span>
|
||||
<span class="w-[92px] shrink-0 text-xs text-slate-600">{{ r.accept_time?.slice(0,10) }}</span>
|
||||
<span class="w-[80px] shrink-0 text-right text-sm font-bold text-slate-800">{{ r.cost }}</span>
|
||||
<span class="w-[100px] shrink-0 text-center">
|
||||
<!-- 完全达到 -->
|
||||
<NTag v-if="r.result_status===3" size="small" type="success">{{r.result_label}}</NTag>
|
||||
<!-- 基本达到 -->
|
||||
<NTag v-if="r.result_status===2" size="small" type="warning">{{r.result_label}}</NTag>
|
||||
<!-- 未达到 -->
|
||||
<NTag v-if="r.result_status===1" size="small" type="error">{{r.result_label}}</NTag>
|
||||
</span>
|
||||
<span class="w-[64px] shrink-0 text-right">
|
||||
<NButton size="small" ghost class="text-xs" @click="openRow(r)">查看</NButton>
|
||||
</span>
|
||||
</div>
|
||||
<div v-if="list.length === 0" class="h-100% flex items-center justify-center">
|
||||
<NEmpty description="暂无数据"></NEmpty>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex justify-end mt-3">
|
||||
<NPagination
|
||||
v-model:page="pagination.page"
|
||||
:page-size="pagination.pageSize"
|
||||
:item-count="pagination.itemCount"
|
||||
:on-update:page="pageChange"
|
||||
>
|
||||
<template #prefix="{ itemCount }">
|
||||
共 {{ itemCount }} 条
|
||||
</template>
|
||||
</NPagination>
|
||||
</div>
|
||||
</NCard>
|
||||
</NSpin>
|
||||
</NSpace>
|
||||
@@ -120,7 +207,7 @@ onMounted(() => {
|
||||
|
||||
<style scoped lang="scss">
|
||||
.scroll {
|
||||
height: calc(100vh - 240px);
|
||||
height: calc(100vh - 279px);
|
||||
overflow-y: auto;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user