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

变更投入和效果页面完成

Browse Source
This commit is contained in:
bestlee
2026-09-24 16:33:38 +08:00
parent 252b960f04
commit 55c4d80211
2 changed files with 153 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/service/api/pendingChange.ts
+10 -1
View File
@@ -1,6 +1,6 @@
import { request } from '../request'; import { request } from '../request';
// 列表查询 // 待投用变更列表查询
export function pendingChangeListApi(params:{page_num:number,page_size:number}) { export function pendingChangeListApi(params:{page_num:number,page_size:number}) {
return request({ return request({
url: `/api/pssr/pending-use`, url: `/api/pssr/pending-use`,
@@ -8,3 +8,12 @@ export function pendingChangeListApi(params:{page_num:number,page_size:number})
params, params,
}); });
} }
// 变更投入和效果列表查询
export function effectListApi(params:{page_num:number,page_size:number}) {
return request({
url: `/api/reports/invest-effect`,
method: 'get',
params,
});
}
src/views/my/effect/index.vue
+143 -56
View File
@@ -3,44 +3,97 @@ import { ref, onMounted } from 'vue';
import { Icon } from '@iconify/vue' import { Icon } from '@iconify/vue'
import { useThemeStore } from '@/store/modules/theme'; import { useThemeStore } from '@/store/modules/theme';
import { useRouterPush } from '@/hooks/common/router'; 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 themeStore = useThemeStore();
const { routerPushByKey } = useRouterPush(); const { routerPushByKey } = useRouterPush();
const loading = ref<boolean>(false); const loading = ref<boolean>(false);
const list = ref<any[]>([]); 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: "完全达到" }, const totalCost = ref<number>(0);
{ 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 fullRate = ref<number>(0);
]; // 标准列表
// 获取列表数据 const standardList = ref<any[]>([]);
const getList = () => { // 分页
loading.value = true; const pagination = ref<{page: number, pageSize: number, itemCount: number}>({
setTimeout(() => { page: 1,
list.value = lists; pageSize: 20,
loading.value = false; itemCount: 0,
}, 1000); })
} // 变更类型列表
const typeList = ref<any[]>([]);
// 变更等级列表
const levelList = ref<any[]>([]);
// 导出文件 // 导出文件
const exportFile = () => { const exportFile = () => {
window.$message?.success(`导出本车间已验收变更投入和效果表（Excel）`) window.$message?.info('还差接口')
} }
// 查看 // 查看
const openRow = (r: any) => { 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(() => { onMounted(() => {
getList(); getConfig();
}) })
</script> </script>
<template> <template>
<NSpace vertical :size="16"> <NSpace vertical :size="16">
<!-- PSSR监督 -->
<NSpin :show="loading" size="small"> <NSpin :show="loading" size="small">
<NCard :bordered="false" size="small" :style="{ borderRadius: themeStore.themeRadius + 'px' }"> <NCard :bordered="false" size="small" :style="{ borderRadius: themeStore.themeRadius + 'px' }">
<div <div
@@ -53,22 +106,19 @@ onMounted(() => {
}" }"
> >
<span class="text-sm font-bold text-slate-800">本车间已验收变更</span> <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]">{{ pagination.itemCount }}</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-[#1D4E9C]">{{totalCost}}</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-[var(--success-bg)]">{{fullRate}}%</b></span>
<span class="hidden h-4 w-px bg-slate-200 sm:block"></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> <template v-for="item in standardList" :key="item.key">
完全达到<b class="text-slate-800">2</b> 起 · <b class="text-slate-800">10.0</b> 万元 <span class="text-xs text-slate-500">
</span> <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 class="text-xs text-slate-500"> <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 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>
基本达到<b class="text-slate-800">1</b> 起 · <b class="text-slate-800">1.5</b> 万元 {{item.label}}<b class="text-slate-800">{{item.count}}</b> 起 · <b class="text-slate-800">{{item.fee}}</b> 万元
</span> </span>
<span class="text-xs text-slate-500"> </template>
<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>
<NButton size="small" ghost class="ml-auto text-xs" @click="exportFile"> <NButton size="small" ghost class="ml-auto text-xs" @click="exportFile">
<Icon icon="material-symbols:download" class="size-16px" />导出 <Icon icon="material-symbols:download" class="size-16px" />导出
</NButton> </NButton>
@@ -84,35 +134,72 @@ onMounted(() => {
<span class="w-[64px] shrink-0 text-right">操作</span> <span class="w-[64px] shrink-0 text-right">操作</span>
</div> </div>
<div class="scroll"> <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"> <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="min-w-0 flex-1">
<span class="flex flex-wrap items-center gap-1.5"> <span class="flex flex-wrap items-center gap-1.5">
<span class="truncate text-sm font-medium text-slate-800">{{ r.title }}</span> <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
<NTag size="small" type="info">{{ r.type }}</NTag> size="small"
<NTag v-if="r.duration==='永久'" size="small">{{ r.duration }}</NTag> :color="{
<NTag v-if="r.duration==='临时'" size="small" type="warning">{{ r.duration }}</NTag> 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>
<span class="mt-0.5 block font-mono text-[11px] text-slate-400">{{ r.id }} · {{ r.applicant }} · 费用取验收时填报的「变更材料和实施费」</span> <span class="w-[92px] shrink-0 text-xs text-slate-600">{{ r.apply_time?.slice(0,10) }}</span>
</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.applyDate }}</span> <span class="w-[92px] shrink-0 text-xs text-slate-600">{{ r.accept_time?.slice(0,10) }}</span>
<span class="w-[92px] shrink-0 text-xs text-slate-600">{{ r.useTime }}</span> <span class="w-[80px] shrink-0 text-right text-sm font-bold text-slate-800">{{ r.cost }}</span>
<span class="w-[92px] shrink-0 text-xs text-slate-600">{{ r.acceptDate }}</span> <span class="w-[100px] shrink-0 text-center">
<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_status===3" size="small" type="success">{{r.result_label}}</NTag>
<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_status===2" size="small" type="warning">{{r.result_label}}</NTag>
<NTag v-if="r.result==='未达到'" size="small" type="error">{{ r.result }}</NTag> <!-- 未达到 -->
</span> <NTag v-if="r.result_status===1" size="small" type="error">{{r.result_label}}</NTag>
<span class="w-[64px] shrink-0 text-right"> </span>
<NButton size="small" ghost class="text-xs" @click="openRow(r)">查看</NButton> <span class="w-[64px] shrink-0 text-right">
</span> <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> </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> </NCard>
</NSpin> </NSpin>
</NSpace> </NSpace>
@@ -120,7 +207,7 @@ onMounted(() => {
<style scoped lang="scss"> <style scoped lang="scss">
.scroll { .scroll {
height: calc(100vh - 240px); height: calc(100vh - 279px);
overflow-y: auto; overflow-y: auto;
} }
</style> </style>