变更投入和效果静态页面完成

2026-08-24 15:12:07 +08:00
parent 0f86b9db7b
commit 951aaa5f97
7 changed files with 152 additions and 3 deletions
@@ -247,7 +247,8 @@ const local: App.I18n.Schema = {
    systemmanage_template: '审批模板管理',
    home_pssr: 'PSSR监督',
    riskstatistics: '安全与风险统计',
-    home_pendingchange: '待投用变更'
+    home_pendingchange: '待投用变更',
+    home_effect: '变更投入和效果'
  },
  form: {
    required: '不能为空',
@@ -23,6 +23,7 @@ export const views: Record<LastLevelRouteKey, RouteComponent | (() => Promise<Ro
  changestatistics: () => import("@/views/changeStatistics/index.vue"),
  docs_archives: () => import("@/views/docs/archives/index.vue"),
  docs_query: () => import("@/views/docs/query/index.vue"),
+  home_effect: () => import("@/views/home/effect/index.vue"),
  home_highrisk: () => import("@/views/home/highRisk/index.vue"),
  home_highriskdetail: () => import("@/views/home/highRiskDetail/index.vue"),
  home_index: () => import("@/views/home/index/index.vue"),
@@ -127,6 +127,17 @@ export const generatedRoutes: GeneratedRoute[] = [
      order: 1
    },
    children: [
+      {
+        name: 'home_effect',
+        path: '/home/effect',
+        component: 'view.home_effect',
+        meta: {
+          title: 'home_effect',
+          i18nKey: 'route.home_effect',
+          icon: '',
+          order: 6
+        }
+      },
      {
        name: 'home_highrisk',
        path: '/home/highrisk',
@@ -174,6 +174,7 @@ const routeMap: RouteMap = {
  "docs_archives": "/docs/archives",
  "docs_query": "/docs/query",
  "home": "/home",
+  "home_effect": "/home/effect",
  "home_highrisk": "/home/highrisk",
  "home_highriskdetail": "/home/highriskdetail",
  "home_index": "/home/index",
@@ -28,6 +28,7 @@ declare module "@elegant-router/types" {
    "docs_archives": "/docs/archives";
    "docs_query": "/docs/query";
    "home": "/home";
+    "home_effect": "/home/effect";
    "home_highrisk": "/home/highrisk";
    "home_highriskdetail": "/home/highriskdetail";
    "home_index": "/home/index";
@@ -110,6 +111,7 @@ declare module "@elegant-router/types" {
    | "changestatistics"
    | "docs_archives"
    | "docs_query"
+    | "home_effect"
    | "home_highrisk"
    | "home_highriskdetail"
    | "home_index"
@@ -0,0 +1,126 @@
+<script setup lang="ts">
+import { ref, onMounted } from 'vue';
+import { Icon } from '@iconify/vue'
+import { useThemeStore } from '@/store/modules/theme';
+import { useRouterPush } from '@/hooks/common/router';
+
+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 exportFile = () => {
+    window.$message?.success(`导出本车间已验收变更投入和效果表（Excel）`)
+}
+// 查看
+const openRow = (r: any) => {
+    window.$message?.info(`打开变更详情页 ${r.id}（含验收报告与费用明细）`);
+};
+
+
+onMounted(() => {
+    getList();
+})
+</script>
+
+<template>
+<NSpace vertical :size="16">
+    <!-- PSSR监督 -->
+    <NSpin :show="loading" size="small">
+        <NCard :bordered="false" size="small" :style="{ borderRadius: themeStore.themeRadius + 'px' }">
+            <div
+                class="h-100% flex flex-wrap items-center gap-x-5 gap-y-2 border border-slate-200 px-3 py-2 mb-3"
+                :style="{ 
+                    borderRadius: themeStore.themeRadius + 'px',
+                    '--success-bg': themeStore.otherColor.success,
+                    '--warning-bg': themeStore.otherColor.warning,
+                    '--error-bg': themeStore.otherColor.error,
+                }"
+            >
+                <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="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>
+                <NButton size="small" ghost class="ml-auto text-xs" @click="exportFile">
+                    <Icon icon="material-symbols:download" class="size-16px" />导出
+                </NButton>
+            </div>
+            <div class="rounded-lg bg-white shadow-[0_2px_8px_rgba(0,0,0,0.06)]">
+                <div class="flex items-center gap-3 border-b bg-slate-50 px-4 py-2 text-[11px] font-semibold text-slate-500">
+                    <span class="min-w-0 flex-1">变更名称 / 编号</span>
+                    <span class="w-[92px] shrink-0">申请日期</span>
+                    <span class="w-[92px] shrink-0">投用日期</span>
+                    <span class="w-[92px] shrink-0">验收日期</span>
+                    <span class="w-[80px] shrink-0 text-right">费用（万元）</span>
+                    <span class="w-[100px] shrink-0 text-center">是否达到预期效果</span>
+                    <span class="w-[64px] shrink-0 text-right">操作</span>
+                </div>
+                <div class="scroll">
+                    <div class="divide-y">
+                        <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>
+                            <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>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </NCard>
+    </NSpin>
+</NSpace>
+</template>
+
+<style scoped lang="scss">
+.scroll {
+  height: calc(100vh - 240px);
+  overflow-y: auto;
+}
+</style>
@@ -3,6 +3,7 @@ import { ref, onMounted } from 'vue';
 import { Icon } from '@iconify/vue'
 import { useThemeStore } from '@/store/modules/theme';
 import { useRouterPush } from '@/hooks/common/router';
+import { getColorWithOpacity } from '@/utils/common';

 const themeStore = useThemeStore();
 const { routerPushByKey } = useRouterPush();
@@ -154,9 +155,15 @@ onMounted(() => {
              :segmented="{ content: true, footer: true }"
          >
              <template #default>
-                <div class="space-y-3 text-sm">
+                <div
+                 class="space-y-3 text-sm"
+                 :style="{ 
+                    '--warning-bg': getColorWithOpacity(themeStore.otherColor.warning, 0.1),
+                    '--warning-color': themeStore.otherColor.warning,
+                }"
+                >
                    <p class="text-xs text-slate-500">{{ currentRow?.id }} · {{ currentRow?.title }}</p>
-                    <div class="rounded-lg border border-amber-200 bg-amber-50 px-3 py-2 text-xs leading-relaxed text-amber-700">
+                    <div class="rounded-lg border border-[var(--warning-color)] bg-[var(--warning-bg)] px-3 py-2 text-xs leading-relaxed text-[var(--warning-color)]">
                        提示：投用前应完成变更培训与 PSSR 确认（资料已上传）。投用后变更进入待验收阶段，临时变更自投用日起计算时限。
                    </div>
                    <NDatePicker