新增优化需求

.env

@@ -1,3 +1,3 @@
 #  网站标题
-VITE_GLOB_APP_TITLE = 国研咨询
+VITE_GLOB_APP_TITLE = 国研信息
 

src/views/ProcessApprovalSubPage/component/ApprovalDetails.vue

@@ -97,37 +97,37 @@
       }
     },
     afterFetch(res) {
-      if (res[0].operatorPhone == '') {
+      // if (res[0].operatorPhone == '') {
-        setColumns([
+      //   setColumns([
-          {
+      //     {
-            title: '节点名称',
+      //       title: '节点名称',
-            dataIndex: 'taskName',
+      //       dataIndex: 'taskName',
-            width: 120,
+      //       width: 120,
-          },
+      //     },
-          {
+      //     {
-            title: '处理人',
+      //       title: '处理人',
-            dataIndex: 'operator',
+      //       dataIndex: 'operator',
-            width: 100,
+      //       width: 100,
-          },
+      //     },
-          {
+      //     {
-            title: '处理时间',
+      //       title: '处理时间',
-            dataIndex: 'operateDate',
+      //       dataIndex: 'operateDate',
-            width: 100,
+      //       width: 100,
-          },
+      //     },
-          {
+      //     {
-            title: '审批状态',
+      //       title: '审批状态',
-            dataIndex: 'approvalStatue',
+      //       dataIndex: 'approvalStatue',
-            width: 100,
+      //       width: 100,
-            format: 'dict|approvalResult',
+      //       format: 'dict|approvalResult',
-            filters: 'dict|approvalResult',
+      //       filters: 'dict|approvalResult',
-          },
+      //     },
-          {
+      //     {
-            title: '审批意见',
+      //       title: '审批意见',
-            dataIndex: 'comment',
+      //       dataIndex: 'comment',
-            width: 400,
+      //       width: 400,
-          },
+      //     },
-        ]);
+      //   ]);
-      }
+      // }
     },
   });
 </script>

src/views/ProcessApprovalSubPage/planFileApproval.vue

@@ -6,7 +6,7 @@
   <el-divider content-position="left">项目计划详情</el-divider>
   <BasicTable @register="registerplaninfoTable"> </BasicTable>
   <el-divider content-position="left">项目计划资料详情</el-divider>
-  <PlanFileDetail :planinfoid="planinfoid" :stage="1" />
+  <PlanFileDetail :planinfoid="planinfoid" :stage="1" :key="planFileDetailKey" />
   <el-divider content-position="left">项目计划审批文件列表</el-divider>
   <PlanFileDetail :planinfoid="planinfoid" :stage="2" />
   <ApprovalDetails :processInstanceId="processInstanceId" />
@@ -158,6 +158,7 @@
   let showApprovalForm = ref();
   let ApprovalFromPageRef = ref();
   let tableDataFiles = ref();
+  let planFileDetailKey = ref(0);
   let resButton = reactive({
     showApprovalForm: false,
     isEdit: false,
@@ -174,6 +175,7 @@
       procesType: dataTo.record.procesType,
     });
     showApprovalForm.value = resButton.showApprovalForm;
+    planFileDetailKey.value+=1
   });
 
   const [registerplaninfoTable, { getDataSource }] = useTable({
@@ -196,6 +198,8 @@
         tableDataFiles.value.push('《项目建议书》');
       } else if (data[0].taskName.indexOf('可研报告终稿编制') >= 0) {
         tableDataFiles.value.push('《项目建议书》');
+        tableDataFiles.value.push('《补充说明》');
+
       }
       taskName.value = data[0].taskName;
       pjid.value = data[0].projectId;

src/views/ProcessApprovalSubPage/uploadURTfileApproval.vue

@@ -3,7 +3,7 @@
     <el-divider content-position="left">项目名称： {{ dataTo.record.projectName }} </el-divider>
     <BasicForm @register="registerMoneyForm" />
     <el-divider content-position="left">联合技术审查文件详情</el-divider>
-    <PlanFileDetail :planinfoid="projectId" :stage="1" />
+    <PlanFileDetail :planinfoid="projectId" :stage="1" :key="planFileDetailKey"/>
   </div>
   <!-- <div>
     <el-divider content-position="left">联合技术审查审批文件详情</el-divider>
@@ -77,6 +77,7 @@
   let processInstanceId = dataTo.record.processInstanceId;
   let taskid = dataTo.record.taskId as string;
   let procesType = dataTo.record.procesType;
+  let planFileDetailKey = ref(0);
   const emit = defineEmits(['close']);
   let showApprovalForm = ref();
   let ApprovalFromPageRef = ref();
@@ -122,6 +123,7 @@
     let res = await queryProjectInfoById(param);
     setMoneyFieldsValue(res);
     setProps({disabled: resButton.isEdit == true ? false : true})
+    planFileDetailKey.value +=1
   });
 
   function removeFile(option) {

src/views/dashboard/workbench/components/ProjectCard.vue

@@ -4,16 +4,16 @@
       <a-button type="link" size="small">更多</a-button>
     </template>
 
-    <CardGrid v-for="item in items" :key="item" class="!md:w-1/3 !w-full" @click="updateFun(item)">
+    <CardGrid v-for="item in items" :key="item" class="!md:w-1/3 !w-full h-25" @click="updateFun(item)">
       <a-badge :count="item.count">
         <span class="flex">
           <Icon :icon="item.icon" :color="item.color" size="30" />
           <span class="text-lg ml-4">{{ item.title }}</span>
         </span>
       </a-badge>
-      <div class="flex mt-2 h-10 text-secondary">{{ item.desc }}</div>
+      <!-- <div class="flex mt-2 h-10 text-secondary">{{ item.desc }}</div> -->
-      <div class="flex justify-between text-secondary">
+      <div class="flex justify-end text-secondary ">
-        <span>{{ item.group }}</span>
+        <!-- <span>{{ item.group }}</span> -->
         <span>{{ item.date }}</span>
       </div>
     </CardGrid>

src/views/dashboard/workbench/components/basic_bar.vue

@@ -0,0 +1,101 @@
+<template>
+  <v-chart :option="option" theme="auto" :autoresize="true" style="width: 93%; height: 100%" />
+</template>
+
+<script lang="ts" name="PieChart" setup>
+import { ref, reactive } from 'vue'
+let parameter = defineProps(["title", "data"])
+let option = reactive({})
+option = {
+  tooltip: {
+    trigger: 'axis',
+    axisPointer: {
+      type: 'shadow'
+    }
+  },
+  legend: {
+    right: '1%'
+  },
+  grid: {
+    left: '3%',
+    right: '4%',
+    bottom: '3%',
+    containLabel: true
+  },
+  xAxis: {
+    type: 'value'
+  },
+  yAxis: {
+    type: 'category',
+    data: parameter.data.names, 
+    inverse: true
+  },
+  series: [
+  {
+      name: '总计',
+      type: 'bar',
+      barGap: '-100%',
+      stack: 'total1',
+      label: {
+        show: true,
+        position: 'right', // 将标签显示在条形图的右侧
+        formatter: function (params) {
+          const total = option.series[0].data[params.dataIndex] + option.series[1].data[params.dataIndex];
+          return total; // 显示总和
+        },
+        color:"black"
+      },
+      emphasis: {
+        focus: 'series'
+      },
+      data: parameter.data.totalMoney, // 总和数据
+      itemStyle: {
+        color: 'rgba(128, 128, 128, 2)',
+        
+      }
+    },
+    {
+      name: '入库项目申报资金',
+      type: 'bar',
+      stack: 'total',
+      label: {
+        show: false,
+        position: 'inside', // 将标签显示在条形图内部
+        formatter: function (params) {
+          return params.data; // 显示入库的金额
+        }
+      },
+      emphasis: {
+        focus: 'series'
+      },
+      data: parameter.data.storagevalues,
+      itemStyle: {
+        color: '#1890FF'
+      }
+    },
+    {
+      name: '配套项目申报资金',
+      type: 'bar',
+      stack: 'total',
+      label: {
+        show: false,
+        position: 'inside', // 将标签显示在条形图内部
+        formatter: function (params) {
+          return params.data; // 显示配套的金额
+        }
+      },
+      emphasis: {
+        focus: 'series'
+      },
+      data: parameter.data.supportvalues,
+      itemStyle: {
+        color: '#D6E4FF'
+      }
+    },
+
+  ]
+};
+
+</script>
+
+<style></style>

src/views/dashboard/workbench/components/projectDetail copy.vue

@@ -0,0 +1,245 @@
+<template>
+  <div class="container mx-auto mt-4 mb-4 h-70">
+    <div class="grid grid-cols-2 gap-4 h-full">
+      <div class="grid grid-rows-3 gap-2">
+        <div>
+          <div class="container mx-auto bg-white w-full h-full">
+            <div class="flex items-center gap-1 w-full h-full">
+              <div class="w-1/28 bg-[#1890FF] h-full"></div>
+              <div class="w-9/28 flex items-center justify-center h-full text-2xl font-semibold"
+                >项目数量</div
+              >
+              <div class="w-6/28 flex items-center justify-center h-full text-4xl font-bold">{{
+                projectNumber.total
+              }}</div>
+              <div class="w-6/28 flex items-center justify-center h-full">
+                <div class="grid grid-rows-3 h-full">
+                  <div class="row-span-2 flex items-center justify-center text-3xl font-bold">
+                    {{ projectNumber.countyNum }}
+                  </div>
+                  <div class="row-span-1"> 区县 </div>
+                </div>
+              </div>
+              <div class="w-6/28 flex items-center justify-center h-full">
+                <div class="grid grid-rows-3 h-full">
+                  <div class="row-span-2 flex items-center justify-center text-3xl font-bold">
+                    {{ projectNumber.cityNum }}
+                  </div>
+                  <div class="row-span-1">市本级 </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div>
+          <div class="container mx-auto bg-white w-full h-full">
+            <div class="flex items-center gap-1 w-full h-full">
+              <div class="w-1/28 bg-[#2E54A1] h-full"></div>
+              <div class="w-9/28 flex items-center justify-center h-full text-2xl font-semibold"
+                >入库项目数量</div
+              >
+              <div class="w-6/28 flex items-center justify-center h-full text-4xl font-bold">{{
+                storagedNumber.total
+              }}</div>
+              <div class="w-6/28 flex items-center justify-center h-full">
+                <div class="grid grid-rows-3 h-full">
+                  <div class="row-span-2 flex items-center justify-center text-3xl font-bold">
+                    {{ storagedNumber.countyNum }}
+                  </div>
+                  <div class="row-span-1"> 区县 </div>
+                </div>
+              </div>
+              <div class="w-6/28 flex items-center justify-center h-full">
+                <div class="grid grid-rows-3 h-full">
+                  <div class="row-span-2 flex items-center justify-center text-3xl font-bold">
+                    {{ storagedNumber.cityNum }}
+                  </div>
+                  <div class="row-span-1">市本级 </div>
+                </div>
+              </div>
+            </div>
+          </div></div
+        >
+        <div
+          ><div class="container mx-auto bg-white w-full h-full">
+            <div class="flex items-center gap-1 w-full h-full">
+              <div class="w-1/28 bg-[#91ACE0] h-full"></div>
+              <div class="w-9/28 flex items-center justify-center h-full text-2xl font-semibold"
+                >配套项目数量</div
+              >
+              <div class="w-6/28 flex items-center justify-center h-full text-4xl font-bold">{{
+                supportingNumber.total
+              }}</div>
+              <div class="w-6/28 flex items-center justify-center h-full">
+                <div class="grid grid-rows-3 h-full">
+                  <div class="row-span-2 flex items-center justify-center text-3xl font-bold">
+                    {{ supportingNumber.countyNum }}
+                  </div>
+                  <div class="row-span-1"> 区县 </div>
+                </div>
+              </div>
+              <div class="w-6/28 flex items-center justify-center h-full">
+                <div class="grid grid-rows-3 h-full">
+                  <div class="row-span-2 flex items-center justify-center text-3xl font-bold">
+                    {{ supportingNumber.cityNum }}
+                  </div>
+                  <div class="row-span-1">市本级 </div>
+                </div>
+              </div>
+            </div>
+          </div></div
+        >
+      </div>
+      <div>
+        <div class="container mx-auto bg-white w-full h-full">
+          <div class="h-1/10 flex items-center">
+            <div class="text-2xl mt-10 ml -10 w-1/2"> {{ basicBarTitle }} {{ basicBarMoney }} </div>
+            <div class="text-2xl mt-10 mr -10 w-1/2 flex justify-end">
+              <a-radio-group v-model:value="radioValue" button-style="solid" @change="changeRadio">
+                <a-radio-button value="ruku">入库项目</a-radio-button>
+                <a-radio-button value="peitao">配套项目</a-radio-button>
+              </a-radio-group>
+            </div>
+          </div>
+          <div class="h-9/10">
+            <basic_bar :data="bas_barData" :key="basicBarKey"></basic_bar>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script lang="ts" setup>
+  import { defineComponent, ref } from 'vue';
+  import { Card } from 'ant-design-vue';
+  import { Icon } from '@/components/Icon';
+  import { groupItems } from './data';
+  import basic_bar from './basic_bar.vue';
+  import { getWorkcountNumber } from '@/views/myWork/inComplete/inComplete.api';
+  import {
+    getProjectNumber,
+    getStoragedNumber,
+    getSupportingNumber,
+    getStoragedFound,
+    getSupportingFound,
+  } from '@/views/projectSummary/planSummary/planSummary.api';
+  import { useRouter } from 'vue-router'; // 导入 useRouter
+  //刷新当前页面
+  const router = useRouter();
+  let bas_barData = ref<any>({
+    names: ['中央资金', '省级资金', '市级资金', '区县级资金', '自筹资金'],
+    values: [120, 200, 150, 80, 70],
+  });
+  let basicBarTitle = ref<string>('入库项目总投资');
+  let basicBarMoney = ref<string>('1000230');
+  let basicBarKey = ref<number>(1);
+  let radioValue = ref<string>('ruku');
+  let projectNumber = ref({
+    cityNum: 0,
+    countyNum: 0,
+    total: 0,
+  });
+  let storagedNumber = ref({
+    cityNum: 0,
+    countyNum: 0,
+    total: 0,
+  });
+  let supportingNumber = ref({
+    cityNum: 0,
+    countyNum: 0,
+    total: 0,
+  });
+  getProjectNumber().then((res) => {
+    console.log('getProjectNumber', res);
+    projectNumber.value = res;
+  });
+  getStoragedNumber().then((res) => {
+    console.log('getStoragedNumber', res);
+    storagedNumber.value = res;
+  });
+  getSupportingNumber().then((res) => {
+    console.log('getSupportingNumber', res);
+    supportingNumber.value = res;
+  });
+  getStoragedFound().then((res) => {
+    console.log('getStoragedFound', res);
+    bas_barData.value = {
+      names: ['中央资金', '省级资金', '市级资金', '区县级资金', '自筹资金'],
+      values: [
+        res.totalCentral,
+        res.totalProvincial,
+        res.totalCity,
+        res.totalCounty,
+        res.totalSelf,
+      ],
+    };
+    basicBarMoney.value = res.totalMoney;
+    basicBarKey.value += 1;
+  });
+  const updateFun = (item) => {
+    console.log('item', item);
+    if (item.title === '待签任务') {
+      router.push({
+        // push方法
+        path: '/activiti/task/claim-list', //项目计划文件审批详情页面
+      });
+    } else if (item.title === '待办任务') {
+      router.push({
+        // push方法
+        path: '/myWork/inComplete/index', //项目计划文件审批详情页面
+      });
+    } else if (item.title === '已办任务') {
+      router.push({
+        // push方法
+        path: '/myWork/completed/index', //项目计划文件审批详情页面
+      });
+    }
+  };
+  // getProjectNumber().then((res) => {
+  //   console.log('getProjectNumber', res);
+  //   projectNumber.value = res
+  // });
+  function changeRadio(e) {
+    console.log('radioValue', radioValue.value);
+
+    if (radioValue.value === 'ruku') {
+      basicBarTitle.value = '入库项目总投资';
+      getStoragedFound().then((res) => {
+        console.log('getStoragedFound', res);
+        bas_barData.value = {
+          names: ['中央资金', '省级资金', '市级资金', '区县级资金', '自筹资金'],
+          values: [
+            res.totalCentral,
+            res.totalProvincial,
+            res.totalCity,
+            res.totalCounty,
+            res.totalSelf,
+          ],
+        };
+        basicBarMoney.value = res.totalMoney;
+        basicBarKey.value += 1;
+      });
+    } else {
+      basicBarTitle.value = '配套项目总投资';
+      getSupportingFound().then((res) => {
+        console.log('getSupportingFound', res);
+        bas_barData.value = {
+          names: ['中央资金', '省级资金', '市级资金', '区县级资金', '自筹资金'],
+          values: [
+            res.totalCentral,
+            res.totalProvincial,
+            res.totalCity,
+            res.totalCounty,
+            res.totalSelf,
+          ],
+        };
+        basicBarMoney.value = res.totalMoney;
+        basicBarKey.value += 1;
+      });
+    }
+  }
+  //查询待签任务
+
+  //查询代办任务
+  console.log('groupItems111', groupItems);
+</script>

src/views/dashboard/workbench/components/projectDetail.vue

@@ -0,0 +1,144 @@
+<template>
+  <div class="container mx-auto mt-4 mb-4 h-70">
+    <div class="grid grid-cols-10 gap-4 h-full">
+      <div class="col-span-3 grid grid-rows-3 gap-2">
+        <div>
+          <div class="container mx-auto bg-white w-full h-full">
+            <div class="flex items-center gap-1 w-full h-full">
+              <div class="w-1/28 bg-[#1890FF] h-full"></div>
+              <div class="w-17/28 flex items-center justify-center h-full text-2xl font-semibold"
+                >申报项目数量</div
+              >
+              <div class="w-10/28 flex items-center justify-center h-full text-4xl font-bold">{{
+                projectNumber.total
+              }}</div>
+            </div>
+          </div>
+        </div>
+        <div>
+          <div class="container mx-auto bg-white w-full h-full">
+            <div class="flex items-center gap-1 w-full h-full">
+              <div class="w-1/28 bg-[#2E54A1] h-full"></div>
+              <div class="w-17/28 flex items-center justify-center h-full text-2xl font-semibold"
+                >入库项目数量</div
+              >
+              <div class="w-10/28 flex items-center justify-center h-full text-4xl font-bold">{{
+                storagedNumber.total
+              }}</div>
+            </div>
+          </div></div
+        >
+        <div
+          ><div class="container mx-auto bg-white w-full h-full">
+            <div class="flex items-center gap-1 w-full h-full">
+              <div class="w-1/28 bg-[#91ACE0] h-full"></div>
+              <div class="w-17/28 flex items-center justify-center h-full text-2xl font-semibold"
+                >配套项目数量</div
+              >
+              <div class="w-10/28 flex items-center justify-center h-full text-4xl font-bold">{{
+                supportingNumber.total
+              }}</div>
+            </div>
+          </div></div
+        >
+      </div>
+      <div class="col-span-7">
+        <div class="container mx-auto bg-white w-full h-full">
+          <div class="h-1/10 flex items-center">
+            <div class="text-2xl mt-10 ml -10 w-1/2"> {{ basicBarTitle }} {{ basicBarMoney }} </div>
+          </div>
+          <div class="h-9/10">
+            <basic_bar :data="bas_barData" :key="basicBarKey"></basic_bar>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script lang="ts" setup>
+  import { defineComponent, ref,onMounted } from 'vue';
+  import { Card } from 'ant-design-vue';
+  import { Icon } from '@/components/Icon';
+  import { groupItems } from './data';
+  import basic_bar from './basic_bar.vue';
+  import { getWorkcountNumber } from '@/views/myWork/inComplete/inComplete.api';
+  import {
+    getProjectNumber,
+    getStoragedNumber,
+    getSupportingNumber,
+    getStoragedFound,
+    getSupportingFound,
+  } from '@/views/projectSummary/planSummary/planSummary.api';
+  import { useRouter } from 'vue-router'; // 导入 useRouter
+import { number } from 'vue-types';
+  //刷新当前页面
+  const router = useRouter();
+  let bas_barData = ref<any>({
+    names: ['中央资金', '省级资金', '市级资金', '区县级资金', '自筹资金'],
+  });
+  let basicBarTitle = ref<string>('项目总投资');
+  let basicBarMoney = ref<string>('1000230');
+  let basicBarKey = ref<number>(1);
+  let projectNumber = ref({
+    cityNum: 0,
+    countyNum: 0,
+    total: 0,
+  });
+  let storagedNumber = ref({
+    cityNum: 0,
+    countyNum: 0,
+    total: 0,
+  });
+  let supportingNumber = ref({
+    cityNum: 0,
+    countyNum: 0,
+    total: 0,
+  });
+  getProjectNumber().then((res) => {
+    console.log('getProjectNumber', res);
+    projectNumber.value = res;
+  });
+  getStoragedNumber().then((res) => {
+    console.log('getStoragedNumber', res);
+    storagedNumber.value = res;
+  });
+  getSupportingNumber().then((res) => {
+    console.log('getSupportingNumber', res);
+    supportingNumber.value = res;
+  });
+  onMounted(async()=>{
+    let storData=await getStoragedFound();
+    let supData=await getSupportingFound();
+    bas_barData.value['storagevalues']=[
+        storData.totalCentral,
+        storData.totalProvincial,
+        storData.totalCity,
+        storData.totalCounty,
+        storData.totalSelf,
+    ]
+    basicBarMoney.value = storData.totalMoney;
+    bas_barData.value['supportvalues']=[
+        supData.totalCentral,
+        supData.totalProvincial,
+        supData.totalCity,
+        supData.totalCounty,
+        supData.totalSelf,
+      ],
+    bas_barData.value['totalMoney']=[
+    storData.totalCentral+supData.totalCentral,
+    storData.totalProvincial+supData.totalProvincial,
+    storData.totalCity+supData.totalCity,
+    storData.totalCounty+supData.totalCounty,
+    storData.totalSelf+supData.totalSelf,
+    ]
+    basicBarMoney.value = Number(basicBarMoney.value + supData.totalMoney).toFixed(0);
+    basicBarKey.value += 1;
+  })
+  
+  // getProjectNumber().then((res) => {
+  //   console.log('getProjectNumber', res);
+  //   projectNumber.value = res
+  // });
+  
+  console.log('groupItems111', groupItems);
+</script>

src/views/dashboard/workbench/index.vue

@@ -7,8 +7,8 @@
       <ProjectCard :loading="loading" class="enter-y" />
       <!-- <DynamicInfo :loading="loading" class="!my-4 enter-y" /> -->
     </div>
-    <div class="card-container" v-if="false">
+    <div class="card-container" v-if="true">
-
+      <!-- <projectDetail></projectDetail> -->
 
     </div>
     <div>
@@ -22,7 +22,7 @@ import { PageWrapper } from '@/components/Page';
 import { count } from '@/views/projectLib/projectInfo/projectInfo.api';
 import WorkbenchHeader from './components/WorkbenchHeader.vue';
 import ProjectCard from './components/ProjectCard.vue';
-
+import projectDetail from './components/projectDetail.vue'
 import planSummary from '@/views/projectSummary/planSummary/indeForDashboard.vue';
 
 const loading = ref(true);

src/views/projectBoard/projectBoard/index.vue

@@ -0,0 +1,71 @@
+<template>
+  <PageWrapper>
+    <div class="card-container" v-if="true">
+      <projectDetail></projectDetail>
+
+    </div>
+    <div>
+      <planSummary />
+    </div>
+  </PageWrapper>
+</template>
+<script lang="ts" setup>
+import { ref, reactive, onMounted } from 'vue';
+import { PageWrapper } from '@/components/Page';
+import { count } from '@/views/projectLib/projectInfo/projectInfo.api';
+import WorkbenchHeader from './components/WorkbenchHeader.vue';
+import ProjectCard from './components/ProjectCard.vue';
+import projectDetail from '@/views/dashboard/workbench/components/projectDetail.vue'
+import planSummary from '@/views/projectSummary/planSummary/index.vue';
+
+const loading = ref(true);
+const activeKey = ref('0');
+let data = reactive({
+  xiangmZJD: {
+    fininshNum: 1,
+    unfininshNum: 2,
+  },
+  xiangmuZJ: {
+    fininshNum: 1,
+    unfininshNum: 2,
+  },
+  xiangmuZT: [{ name: '已建', value: 100 }],
+  ssggrw: [
+    { name: '2+N紧密型城市医疗集团建设', fininshNum: 100, unfininshNum: 30 },
+    { name: '2+9+9+N县域医共体建设', fininshNum: 140, unfininshNum: 20 },
+    { name: '市县公立医院妇幼能力建设', fininshNum: 140, unfininshNum: 120 },
+    { name: '高水平县级医院建设	', fininshNum: 140, unfininshNum: 90 },
+    { name: '打造长三角市域医学高地', fininshNum: 140, unfininshNum: 90 },
+    { name: '公立医院院前急救与院内救治服务融合发展', fininshNum: 170, unfininshNum: 90 },
+    { name: '医共体下三医联动改革', fininshNum: 170, unfininshNum: 90 },
+    { name: '智慧医院服务能力提档升级', fininshNum: 100, unfininshNum: 30 },
+    { name: '数字健康大脑建设', fininshNum: 140, unfininshNum: 270 },
+    { name: '舒心就医', fininshNum: 140, unfininshNum: 270 },
+    { name: '中医药固本培元', fininshNum: 140, unfininshNum: 210 },
+    { name: '公立医院运营管理', fininshNum: 140, unfininshNum: 80 },
+    { name: '公立医院党建全行业引领改革工程	', fininshNum: 140, unfininshNum: 40 },
+    { name: '高质量临床重点专科建设	', fininshNum: 140, unfininshNum: 80 },
+  ],
+  xxqy: [
+    { name: '南浔区', fininshNum: 100, unfininshNum: 30 },
+    { name: '吴兴区', fininshNum: 140, unfininshNum: 20 },
+    { name: '市本级', fininshNum: 140, unfininshNum: 120 },
+    { name: '安吉县', fininshNum: 140, unfininshNum: 90 },
+    { name: '德清县', fininshNum: 140, unfininshNum: 90 },
+    { name: '长兴县', fininshNum: 170, unfininshNum: 90 },
+  ],
+  dwsx: [
+    { name: '卫生行政部门', fininshNum: 1000, unfininshNum: 3000 },
+    { name: '医疗机构	', fininshNum: 1400, unfininshNum: 2000 },
+  ],
+});
+
+onMounted(() => {
+  console.log('datadatadatadatadatadata', data);
+});
+setTimeout(async () => {
+  data = await count();
+  loading.value = false;
+  activeKey.value = '1';
+}, 10);
+</script>

src/views/projectLib/projectPlan/addPlanFile.vue

@@ -8,9 +8,12 @@
   <BasicForm @register="registerContractMoneyForm" v-if="dataTo.taskName == '合同签订'" />
 
   <el-divider content-position="left">上传文件</el-divider>
-  <el-divider content-position="left" v-if="dataTo.taskName.indexOf('可研报告初稿编制') >= 0 ||
+  <el-divider content-position="left" v-if="dataTo.taskName.indexOf('可研报告初稿编制') >= 0"
-      dataTo.taskName.indexOf('可研报告终稿编制') >= 0" >支持上传文件数量为1-2份</el-divider>
+    >支持上传文件数量为1-2份</el-divider
-
+  >
+  <el-divider content-position="left" v-if="dataTo.taskName.indexOf('可研报告终稿编制') >= 0"
+    >支持上传文件数量为1-3份</el-divider
+  >
   <el-form ref="importFormRef">
     <el-form-item
       v-for="(item, index) in dataTo.files"
@@ -47,7 +50,7 @@
 
 <script lang="ts" name="uploadFile" setup>
   import { reactive, defineProps, onMounted, ref } from 'vue';
-  import { planUploadFile, planUploadModifyFile,planREUploadFile } from './projectPlan.api';
+  import { planUploadFile, planUploadModifyFile, planREUploadFile } from './projectPlan.api';
   import { message } from 'ant-design-vue';
   import { queryProjectInfoById } from '@/views/projectLib/projectInfo/projectInfo.api';
   import { getplaninfoByid } from '@/views/projectLib/projectPlan/projectPlan.api';
@@ -274,7 +277,7 @@
         .catch(() => {
           isSubmitting.value = false;
         });
-    } else if(dataTo.type == 1){
+    } else if (dataTo.type == 1) {
       planUploadModifyFile(params)
         .then(() => {
           emit('close');
@@ -282,7 +285,7 @@
         .catch(() => {
           isSubmitting.value = false;
         });
-    }else{
+    } else {
       planREUploadFile(params)
         .then(() => {
           emit('close');

src/views/projectLib/projectPlan/elstepchild.vue

@@ -1,27 +1,129 @@
 <template>
-  <el-steps direction="vertical"  finish-status="success">
+  <el-steps direction="vertical" finish-status="success" class="steps">
-    <el-step v-for="(item, index) in dataTo.child" :key="index" :status="item.isfinish==2?'success':'wait'">
+    <el-step
+      v-for="(item, index) in dataTo.child"
+      :key="index"
+      :status="item.isfinish == 2 ? 'success' : item.isfinish == 0 ? 'wait' : 'process'"
+    >
       <template #title>
-        <div>
+        <div class="flex">
-          {{ item.taskName }}
+          <div>
+            {{ item.taskName }}
+          </div>
+          <div v-if="item.isfinish == 1">
+            <a-button type="text" size="small" @click="handleShowprocess(item)">
+              <template #icon>
+                <DownOutlined style="color: #0ac00d" />
+              </template>
+            </a-button>
+          </div>
         </div>
+
         <div>
           {{ item.scheduledStartTime }}
         </div>
         <div>
           {{ item.scheduledEndTime }}
         </div>
+        <div v-if="item.showProcessDetail == true">
+          <a-button
+            type="text"
+            size="small"
+            class="text-blue text-xs flex justify-end w-full"
+            @click="clickDetail(item)"
+            >详情</a-button
+          >
+          <div v-for="(process, index) in item.processDetail" class="flex text-black text-xs">
+            <!-- 实心绿色圆球 -->
+            <div
+              class="rounded-full bg-green-500 h-3 w-3 mr-2 mt-0.5"
+              v-if="process.approvalStatue == 1"
+            ></div>
+            <!-- 空心绿色圆圈 -->
+            <div
+              class="rounded-full border-2 border-green-500 h-3 w-3 mr-2 mt-0.5"
+              v-else-if="process.approvalStatue == 0 && process.isdangqian == 1"
+            ></div>
+            <div class="rounded-full border-2 border-gray-300 h-3 w-3 mr-2 mt-0.5" v-else ></div>
+
+            <div
+              v-if="process.approvalStatue == 0 && process.isdangqian == 0"
+              class="text-gray-300"
+            >
+              {{ process.taskName }}
+            </div>
+            <div v-else>
+              {{ process.taskName }}
+            </div>
+            <div
+              v-if="process.approvalStatue == 0 && process.isdangqian == 1"
+              class="ml-9 text-yellow-600"
+            >
+              {{ process.timedays }}
+            </div>
+          </div>
+        </div>
       </template>
       <template #description>
-        <elstepchild v-if="item.children!=null" :child="item.children"></elstepchild>
+        <elstepchild v-if="item.children != null" :child="item.children"></elstepchild>
       </template>
     </el-step>
   </el-steps>
+  <planinfoFileDetail @register="registerFileInfo" />
 </template>
 <script lang="ts" name="viewPlanDetail" setup>
-import elstepchild from './elstepchild.vue'
+  import { defineProps, ref } from 'vue';
-let dataTo = defineProps(["child"])
+  import elstepchild from './elstepchild.vue';
+  import { DownOutlined } from '@ant-design/icons-vue';
+  import { getProcessDetailByPlaninfoid } from './projectPlan.api';
+  import { useModal } from '@/components/Modal';
+  import planinfoFileDetail from './planinfoFileDetail.vue';
 
-</script>
+  const [registerFileInfo, { openModal: openFileInfo }] = useModal(); //文件上传和查看
-<style scoped></style>
+  let dataTo = defineProps(['child']);
+  async function handleShowprocess(item) {
+    item['processDetail'] = await getProcessDetailByPlaninfoid({ planinfoid: item.id });
 
+    //更加id查询流程进度情况
+    if (item['showProcessDetail']) {
+      item['showProcessDetail'] = !item['showProcessDetail'];
+    } else {
+      item['showProcessDetail'] = true;
+    }
+    console.log('processDetail', item.processDetail);
+  }
+  function clickDetail(item) {
+    openFileInfo(true, {
+      planinfoid: item.id,
+      taskName: item.taskName,
+      isfinish: item.isfinish,
+      projectid: item.projectId,
+    });
+  }
+</script>
+<style lang="less" scoped>
+  @publicColor: #0ac00d;
+  @publicHeight: 35px;
+  .steps {
+    ::v-deep .el-step {
+      .el-step__head.is-process {
+        color: @publicColor;
+        border-color: @publicColor;
+      }
+      .el-step__head.is-success {
+        color: @publicColor;
+        border-color: @publicColor;
+      }
+      .is-process .el-step__icon.is-text {
+        background: @publicColor;
+        color: #fff;
+      }
+      .el-step__title.is-process {
+        color: @publicColor;
+      }
+      .el-step__title.is-success {
+        color: @publicColor;
+      }
+    }
+  }
+</style>

src/views/projectLib/projectPlan/planinfoFileDetail.vue

@@ -12,7 +12,7 @@
       <BasicForm @register="registerApprovalMoneyForm" v-if="taskName == '立项审批'" />
       <BasicForm @register="registerContractMoneyForm" v-if="taskName == '合同签订'" />
       <el-divider content-position="left">项目计划资料详情</el-divider>
-      <PlanFileDetail :planinfoid="planinfoid" :stage="1" />
+      <PlanFileDetail :planinfoid="planinfoid" :stage="1" :key="planFileDetailkey"/>
       <el-divider content-position="left" v-if="taskName != '联合技术审查'"
         >项目计划审批文件列表</el-divider
       >
@@ -94,6 +94,7 @@
   let planinfoid = ref();
   let taskName = ref();
   let isfinish = ref(0);
+  let planFileDetailkey = ref(0);
   onMounted(async () => {
     // processName.value =await getProcessName(dataTo.planinfoid)
   });
@@ -102,6 +103,7 @@
     planinfoid.value = data.planinfoid;
     taskName.value = data.taskName;
     isfinish.value = data.isfinish;
+    planFileDetailkey.value+=1
     if (taskName.value == '立项审批') {
       let res = await getProjectinfoMoneyInfo({
         projectid: data.projectid,

src/views/projectLib/projectPlan/projectPlan.api.ts

@@ -1,5 +1,6 @@
 import { defHttp } from '@/utils/http/axios';
 import { downloadFile } from "@/api/common/api"
+import { e } from 'unocss';
 
 export enum Api {
   saveprojectInfo = "",
@@ -10,6 +11,7 @@ export enum Api {
   queryProjectPlan="/huzhouPlan/queryProjectPlan",
   submitplaninfoUploadFile="/huzhouPlan/submitplaninfoUploadFile",
   queryPlanInfoMainTimeline="/huzhouPlan/queryPlanInfoMainTimeline",
+  queryPlanInfoMainTimelineOffline="/huzhouPlan/queryPlanInfoMainTimelineOffline",
   planUploadFile="/huzhouPlaninfofile/planUploadFile",
   queryPlaninfoFilePageByid="/huzhouPlaninfofile/queryPlaninfoFilePageByid",
   planUploadModifyFile="/huzhouPlaninfofile/planUploadModifyFile",
@@ -25,7 +27,8 @@ export enum Api {
   uploadURTFile='/huzhouUploadfileinfo/uploadURTFile',
   getProjectinfoMoneyInfo="/huzhouProjectinfoMoney/getProjectinfoMoneyInfo",
   planREUploadFile="/huzhouPlaninfofile/planREUploadFile",
-  
+  getProcessDetailByPlaninfoid="/huzhouPlaninfofile/getProcessDetailByPlaninfoid",
+  setPlaninfoIsoffline="/huzhouPlaninfofile/setPlaninfoIsoffline",
 }
 /**
  * 提交入库申请流程
@@ -56,6 +59,6 @@ export const planFilePageList = (params) => defHttp.get({ url: Api.planFilePageL
 export const getplaninfoByid = (params) => defHttp.get({ url: Api.getplaninfoByid, params })
 export const getUnitedTechnicalReviewList=(params) => defHttp.get({ url:Api.getUnitedTechnicalReviewList , params })
 export const uploadURTFile=(params) => defHttp.post({ url:Api.uploadURTFile,headers:{ "Content-Type": "multipart/form-data" }, params })
-
+export const getProcessDetailByPlaninfoid=(params) => defHttp.get({ url:Api.getProcessDetailByPlaninfoid , params })
-
+export const queryPlanInfoMainTimelineOffline = (params) => defHttp.get({ url: Api.queryPlanInfoMainTimelineOffline, params })
-
+export const setPlaninfoIsoffline = (params) => defHttp.post({ url: Api.setPlaninfoIsoffline, params })

src/views/projectLib/projectPlan/viewPlanDetail.vue

@@ -283,6 +283,7 @@
       fileArr.value.push("《项目建议书》");
     }else if (record.taskName.indexOf('可研报告终稿编制') >= 0) {
       fileArr.value.push("《项目建议书》");
+      fileArr.value.push("《补充说明》");
 
     }
     planinfoid.value = record.id;
@@ -300,6 +301,7 @@
       fileArr.value.push("《项目建议书》");
     }else if (record.taskName.indexOf('可研报告终稿编制') >= 0) {
       fileArr.value.push("《项目建议书》");
+      fileArr.value.push("《补充说明》");
 
     }
     fileArr.value.push()

src/views/projectLib/projectProgress/index.vue

@@ -0,0 +1,156 @@
+<template>
+  <!-- 自定义表单 -->
+<PageWrapper dense>
+    <BasicTable @register="registerTable" @fetch-success="fetchSuccess">
+      <template #action="{ record }">
+        <TableAction :actions="getTableAction(record)" />
+      </template>
+      <template #tableTitle>
+        <a-button type="primary" @click="setWancheng" shape="round" v-if="isShowByRoles('org')">线下完成情况</a-button>
+      </template>
+      <template #toolbar>
+        <div class="text-base font-bold">单位：（万元）</div>
+      </template>
+      <template #headerTop>
+        <div class="container mx-auto mt-4 mb-4 h-20">
+          <div class="grid grid-cols-5 gap-4 h-full">
+            <div class="bg-[#1890FF] opacity-100 h-full">
+              <div class="grid grid-cols-4 gap-1 h-full">
+                <div class="col-span-3 mt-4 ml-4 text-white">项目申报阶段</div>
+                <div
+                  class="col-span-1 flex justify-center items-center text-white text-4xl font-bold"
+                  >{{ countStage[0].value }}</div
+                >
+              </div>
+            </div>
+            <div class="bg-[#1890FF] opacity-90 h-full">
+              <div class="grid grid-cols-4 gap-1 h-full">
+                <div class="col-span-3 mt-4 ml-4 text-white">项目立项阶段</div>
+                <div
+                  class="col-span-1 flex justify-center items-center text-white text-4xl font-bold"
+                  >{{ countStage[1].value }}</div
+                >
+              </div>
+            </div>
+            <div class="bg-[#1890FF] opacity-85 h-full">
+              <div class="grid grid-cols-4 gap-1 h-full">
+                <div class="col-span-3 mt-4 ml-4 text-white">项目采购阶段</div>
+                <div
+                  class="col-span-1 flex justify-center items-center text-white text-4xl font-bold"
+                  >{{ countStage[2].value }}</div
+                >
+              </div>
+            </div>
+            <div class="bg-[#1890FF] opacity-80 h-full">
+              <div class="grid grid-cols-4 gap-1 h-full">
+                <div class="col-span-3 mt-4 ml-4 text-white">项目建设阶段</div>
+                <div
+                  class="col-span-1 flex justify-center items-center text-white text-4xl font-bold"
+                  >{{ countStage[3].value }}</div
+                >
+              </div>
+            </div>
+            <div class="bg-[#1890FF] opacity-70 h-full">
+              <div class="grid grid-cols-4 gap-1 h-full">
+                <div class="col-span-3 mt-4 ml-4 text-white">项目验收阶段</div>
+                <div
+                  class="col-span-1 flex justify-center items-center text-white text-4xl font-bold"
+                  >{{ countStage[5].value }}</div
+                >
+              </div>
+            </div>
+          </div>
+        </div>
+      </template>
+    </BasicTable>
+    
+  <BasicModal
+    @register="registeruploadFile"
+    title="查看进度"
+    width="1200px"
+    :showOkBtn="false"
+    :showCancelBtn="false"
+  >
+    <showtu :res="showtuList" />
+  </BasicModal>
+  <SetWanCheng  @register="registerwancheng"></SetWanCheng>
+</PageWrapper>
+</template>
+<script lang="ts" name="addAndModify" setup>
+import { PageWrapper } from '@/components/Page';
+  import { ref, onMounted } from 'vue';
+  import { ActionItem, BasicTable, TableAction, useTable } from '@/components/Table';
+  import { useModalInner, BasicModal } from '@/components/Modal';
+  import {
+    detailColumn,
+    searchFormSchema,
+  } from '@/views/projectSummary/planSummary/planSummary.data';
+  import {
+    getProjectDetailPage,
+    getCountStage,
+  } from '@/views/projectSummary/planSummary/planSummary.api';
+  import { queryPlanInfoMainTimeline } from '@/views/projectLib/projectPlan/projectPlan.api';
+  import showtu from '@/views/projectLib/projectPlan/showtu.vue';
+  import { useModal } from '@/components/Modal';
+  import { isShowByRoles } from '@/views/projectLib/projectInfo/projectInfo.api';
+  import SetWanCheng from '@/views/projectSummary/planSummary/SetWanCheng.vue';
+  const [registeruploadFile, { openModal: openPlanFile, closeModal: closePlanFile }] = useModal(); //文件上传和查看
+  const [registerwancheng, { openModal }] = useModal();
+  let fatherData = ref<any>();
+  let showtuList = ref<Array<Object>>();
+
+  const emit = defineEmits(['close']);
+  let pageType = ref<string>('renwu');
+  let countStage = ref<any>([
+    { value: 0 },
+    { value: 0 },
+    { value: 0 },
+    { value: 0 },
+    { value: 0 },
+    { value: 0 },
+  ]);
+  const [registerTable, { getForm, setProps }] = useTable({
+    api: getProjectDetailPage,
+    columns: detailColumn,
+    showIndexColumn: false,
+    useSearchForm: true,
+    actionColumn: {
+      width: 140,
+      title: '操作',
+      dataIndex: 'action',
+      slots: { customRender: 'action' },
+    },
+    //表单查询项设置
+    formConfig: {
+      schemas: searchFormSchema,
+    },
+  });
+  function getTableAction(record): ActionItem[] {
+    return [
+      {
+        label: '查看进度',
+        onClick: handlejindu.bind(null, record),
+        ifShow: () => {
+          if (record.projectStage == '项目申报阶段') {
+            return false;
+          } else {
+            return true;
+          }
+        },
+      },
+    ];
+  }
+  async function fetchSuccess() {
+    let formdata = await getForm().getFieldsValue();
+    countStage.value = await getCountStage(formdata);
+    console.log('afterFetch', formdata);
+  }
+  async function handlejindu(record) {
+    showtuList.value = await queryPlanInfoMainTimeline({ projectid: record.id });
+    openPlanFile(true);
+  }
+  function setWancheng() {
+    openModal(true,fatherData.value);
+  }
+</script>
+<style></style>

src/views/projectSummary/planSummary/SetWanCheng.vue

@@ -0,0 +1,95 @@
+<template>
+  <!-- 自定义表单 -->
+  <BasicModal
+    v-bind="$attrs"
+    @register="registerModal"
+    title="入库项目汇总详情"
+    width="1700px"
+    :showOkBtn="false"
+    :showCancelBtn="false"
+  >
+    <BasicTable @register="registerTable">
+      <template #action="{ record }">
+        <TableAction :actions="getTableAction(record)" />
+      </template>
+      <template #toolbar>
+        <div class="text-base font-bold">单位：（万元）</div>
+      </template>
+    </BasicTable>
+  </BasicModal>
+  <BasicModal
+    @register="registeruploadFile"
+    title="查看进度"
+    width="1200px"
+    :showOkBtn="false"
+    :showCancelBtn="false"
+  >
+    <settu :res="showtuList" />
+  </BasicModal>
+</template>
+<script lang="ts" name="addAndModify" setup>
+  import { ref, onMounted } from 'vue';
+  import { ActionItem, BasicTable, TableAction, useTable } from '@/components/Table';
+  import { useModalInner, BasicModal } from '@/components/Modal';
+  import {
+    detailColumn,
+    searchFormSchema,
+  } from '@/views/projectSummary/planSummary/planSummary.data';
+  import {
+    getProjectDetailPage,
+  } from '@/views/projectSummary/planSummary/planSummary.api';
+  import settu from './settu.vue';
+  import { useModal } from '@/components/Modal';
+  import { queryPlanInfoMainTimelineOffline } from '@/views/projectLib/projectPlan/projectPlan.api';
+
+  const [registeruploadFile, { openModal: openPlanFile, closeModal: closePlanFile }] = useModal(); //文件上传和查看
+
+  let showtuList = ref<Array<Object>>();
+
+  const emit = defineEmits(['close']);
+  let pageType = ref<string>('renwu');
+
+  const [registerModal, { closeModal }] = useModalInner();
+  const [registerTable, { getForm, setProps }] = useTable({
+    api: getProjectDetailPage,
+    columns: detailColumn,
+    showIndexColumn: false,
+    useSearchForm: true,
+    actionColumn: {
+      width: 140,
+      title: '操作',
+      dataIndex: 'action',
+      slots: { customRender: 'action' },
+    },
+    //表单查询项设置
+    formConfig: {
+      schemas: searchFormSchema,
+    },
+  });
+  function getTableAction(record): ActionItem[] {
+    return [
+      {
+        label: '填写',
+        onClick: handleset.bind(null, record),
+        ifShow: () => {
+          if (record.projectStage == '项目申报阶段') {
+            return false;
+          } else {
+            return true;
+          }
+        },
+      },
+    ];
+  }
+ async function handleset(record) {
+  showtuList.value = await queryPlanInfoMainTimelineOffline({ projectid: record.id });
+  openPlanFile(true);
+}
+
+
+  function dialogVisible() {
+    closeModal();
+    emit('close');
+  }
+</script>
+<style></style>

src/views/projectSummary/planSummary/ShowDetailPage.vue

@@ -0,0 +1,179 @@
+<template>
+  <!-- 自定义表单 -->
+  <BasicModal
+    v-bind="$attrs"
+    @register="registerModal"
+    title="入库项目汇总详情"
+    width="1700px"
+    :showOkBtn="false"
+    :showCancelBtn="false"
+  >
+    <BasicTable @register="registerTable" @fetch-success="fetchSuccess">
+      <template #action="{ record }">
+        <TableAction :actions="getTableAction(record)" />
+      </template>
+      <template #toolbar>
+        <div class="text-base font-bold">单位：（万元）</div>
+      </template>
+      <template #headerTop>
+        <div class="container mx-auto mt-4 mb-4 h-20">
+          <div class="grid grid-cols-5 gap-4 h-full">
+            <div class="bg-[#1890FF] opacity-100 h-full">
+              <div class="grid grid-cols-4 gap-1 h-full">
+                <div class="col-span-3 mt-4 ml-4 text-white">项目申报阶段</div>
+                <div
+                  class="col-span-1 flex justify-center items-center text-white text-4xl font-bold"
+                  >{{ countStage[0].value }}</div
+                >
+              </div>
+            </div>
+            <div class="bg-[#1890FF] opacity-90 h-full">
+              <div class="grid grid-cols-4 gap-1 h-full">
+                <div class="col-span-3 mt-4 ml-4 text-white">项目立项阶段</div>
+                <div
+                  class="col-span-1 flex justify-center items-center text-white text-4xl font-bold"
+                  >{{ countStage[1].value }}</div
+                >
+              </div>
+            </div>
+            <div class="bg-[#1890FF] opacity-85 h-full">
+              <div class="grid grid-cols-4 gap-1 h-full">
+                <div class="col-span-3 mt-4 ml-4 text-white">项目采购阶段</div>
+                <div
+                  class="col-span-1 flex justify-center items-center text-white text-4xl font-bold"
+                  >{{ countStage[2].value }}</div
+                >
+              </div>
+            </div>
+            <div class="bg-[#1890FF] opacity-80 h-full">
+              <div class="grid grid-cols-4 gap-1 h-full">
+                <div class="col-span-3 mt-4 ml-4 text-white">项目建设阶段</div>
+                <div
+                  class="col-span-1 flex justify-center items-center text-white text-4xl font-bold"
+                  >{{ countStage[3].value }}</div
+                >
+              </div>
+            </div>
+            <div class="bg-[#1890FF] opacity-70 h-full">
+              <div class="grid grid-cols-4 gap-1 h-full">
+                <div class="col-span-3 mt-4 ml-4 text-white">项目验收阶段</div>
+                <div
+                  class="col-span-1 flex justify-center items-center text-white text-4xl font-bold"
+                  >{{ countStage[5].value }}</div
+                >
+              </div>
+            </div>
+          </div>
+        </div>
+      </template>
+    </BasicTable>
+  </BasicModal>
+  <BasicModal
+    @register="registeruploadFile"
+    title="查看进度"
+    width="1200px"
+    :showOkBtn="false"
+    :showCancelBtn="false"
+  >
+    <showtu :res="showtuList" />
+  </BasicModal>
+  <SetWanCheng  @register="registerwancheng"></SetWanCheng>
+
+</template>
+<script lang="ts" name="addAndModify" setup>
+  import { ref, onMounted } from 'vue';
+  import { ActionItem, BasicTable, TableAction, useTable } from '@/components/Table';
+  import { useModalInner, BasicModal } from '@/components/Modal';
+  import {
+    detailColumn,
+    searchFormSchemacengji,
+    searchFormSchemarenwu,
+  } from '@/views/projectSummary/planSummary/planSummary.data';
+  import {
+    getProjectDetailPage,
+    getCountStage,
+  } from '@/views/projectSummary/planSummary/planSummary.api';
+  import { queryPlanInfoMainTimeline } from '@/views/projectLib/projectPlan/projectPlan.api';
+  import showtu from '@/views/projectLib/projectPlan/showtu.vue';
+  import { useModal } from '@/components/Modal';
+  import { isShowByRoles } from '@/views/projectLib/projectInfo/projectInfo.api';
+  import SetWanCheng from './SetWanCheng.vue';
+  const [registeruploadFile, { openModal: openPlanFile, closeModal: closePlanFile }] = useModal(); //文件上传和查看
+  const [registerwancheng, { openModal }] = useModal();
+  let fatherData = ref<any>();
+  let showtuList = ref<Array<Object>>();
+
+  const emit = defineEmits(['close']);
+  let pageType = ref<string>('renwu');
+  let countStage = ref<any>([
+    { value: 0 },
+    { value: 0 },
+    { value: 0 },
+    { value: 0 },
+    { value: 0 },
+    { value: 0 },
+  ]);
+  const [registerModal, { closeModal }] = useModalInner(init);
+  async function init(data) {
+    fatherData.value=data;
+    pageType.value = data.pageType;
+    console.log('pageType', data.pageType);
+    if (data.pageType == 'cengji') {
+      setProps({ formConfig: { schemas: searchFormSchemacengji } });
+      getForm().setFieldsValue(data.form);
+    } else {
+      setProps({ formConfig: { schemas: searchFormSchemarenwu } });
+      getForm().setFieldsValue(data.form);
+    }
+    // countStage.value=await getCountStage()
+    console.log('countStage', countStage.value);
+  }
+  const [registerTable, { getForm, setProps }] = useTable({
+    api: getProjectDetailPage,
+    columns: detailColumn,
+    showIndexColumn: false,
+    useSearchForm: true,
+    actionColumn: {
+      width: 140,
+      title: '操作',
+      dataIndex: 'action',
+      slots: { customRender: 'action' },
+    },
+    //表单查询项设置
+    formConfig: {
+      schemas: searchFormSchemacengji,
+    },
+  });
+  function getTableAction(record): ActionItem[] {
+    return [
+      {
+        label: '查看进度',
+        onClick: handlejindu.bind(null, record),
+        ifShow: () => {
+          if (record.projectStage == '项目申报阶段') {
+            return false;
+          } else {
+            return true;
+          }
+        },
+      },
+    ];
+  }
+  async function fetchSuccess() {
+    let formdata = await getForm().getFieldsValue();
+    countStage.value = await getCountStage(formdata);
+    console.log('afterFetch', formdata);
+  }
+  async function handlejindu(record) {
+    showtuList.value = await queryPlanInfoMainTimeline({ projectid: record.id });
+    openPlanFile(true);
+  }
+  function setWancheng() {
+    openModal(true,fatherData.value);
+  }
+  function dialogVisible() {
+    closeModal();
+    emit('close');
+  }
+</script>
+<style></style>

src/views/projectSummary/planSummary/ShowMorePage.vue

@@ -0,0 +1,124 @@
+<template>
+  <!-- 自定义表单 -->
+  <BasicModal
+    v-bind="$attrs"
+    @register="registerModal"
+    title="入库项目汇总"
+    width="1600px"
+    :showOkBtn="false"
+    :showCancelBtn="false"
+  >
+    <BasicTable @register="registerTable">
+      <template #action="{ record }">
+        <TableAction :actions="getTableAction(record)" />
+      </template>
+      <template #toolbar>
+        <div class="text-base font-bold">单位：（万元）</div>
+      </template>
+    </BasicTable>
+  </BasicModal>
+  <ShowDetailPage @register="register" />
+</template>
+<script lang="ts" name="addAndModify" setup>
+  import { ref } from 'vue';
+  import { ActionItem, BasicTable, TableAction, useTable } from '@/components/Table';
+  import { useModalInner, BasicModal, useModal } from '@/components/Modal';
+  import {
+    renwuSummaryDetailColumn,
+    cengjiSummaryDetailColumn,
+  } from '@/views/projectSummary/planSummary/planSummary.data';
+  import {
+    getProjectSummaryPage,
+    getProjectSummaryPageByTask,
+  } from '@/views/projectSummary/planSummary/planSummary.api';
+  import ShowDetailPage from './ShowDetailPage.vue';
+  const [register, { openModal }] = useModal();
+
+  const emit = defineEmits(['close']);
+  let pageType = ref<string>('renwu');
+  const [registerModal, { closeModal }] = useModalInner(init);
+  function init(data) {
+    pageType.value = data.type;
+    console.log('pageType', data.type);
+    if (data.type == 'cengji') {
+      setColumns(cengjiSummaryDetailColumn);
+      setProps({ api: getProjectSummaryPage });
+    } else {
+      setColumns(renwuSummaryDetailColumn);
+      setProps({ api: getProjectSummaryPageByTask });
+    }
+  }
+  const [registerTable, { setColumns, setProps }] = useTable({
+    api: getProjectSummaryPageByTask,
+    columns: renwuSummaryDetailColumn,
+    showIndexColumn: false,
+    useSearchForm: false,
+    actionColumn: {
+      width: 140,
+      title: '操作',
+      dataIndex: 'action',
+      slots: { customRender: 'action' },
+    },
+    showSummary: true,
+    summaryFunc: onSummary,
+  });
+  function getTableAction(record): ActionItem[] {
+    return [
+      {
+        label: '详情',
+        onClick: handleDatail.bind(null, record),
+      },
+    ];
+  }
+  function handleDatail(record) {
+    openModal(true, {
+      pageType: pageType.value,
+      form: {
+        dutyWorkplace: record.dutyWorkplace,
+        reformName: record.reformName,
+        superLeader: record.superLeader,
+      },
+    });
+  }
+  function mapTableTotalSummary(tableData, fields) {
+    let totals = {};
+    fields.forEach((field) => {
+      totals[field] = tableData.reduce((acc, item) => acc + Number(item[field]), 0);
+    });
+    return totals;
+  }
+
+  function onSummary(tableData: Recordable[]) {
+    const totals = mapTableTotalSummary(tableData, [
+      'projectNum',
+      'projectProgress',
+      'totalMoney',
+      'centralMoney',
+      'estimateMoney',
+      'contractMoney',
+      'contractCentralMoney',
+    ]);
+    console.log('onSummary****totals>>>', totals);
+    return [
+      // totals,
+      {
+        reformName: '总计',
+        // superLeader:"总计",
+        dutyWorkplace: '总计',
+        // 计算平均值
+        projectNum: totals.projectNum,
+        centralMoney: totals.centralMoney,
+        totalMoney: totals.totalMoney,
+        estimateMoney: totals.estimateMoney,
+        contractMoney: totals.contractMoney,
+        contractCentralMoney: totals.contractCentralMoney,
+        projectProgress: (totals.projectProgress / tableData.length).toFixed(2),
+      },
+    ];
+  }
+  function dialogVisible() {
+    closeModal();
+    emit('close');
+  }
+</script>
+<style></style>

src/views/projectSummary/planSummary/index.vue

@@ -1,193 +1,155 @@
 <template>
   <PageWrapper dense>
     <!--引用表格-->
-    <BasicTable @register="registerTable">
+    <div>
-
+      <a-tabs v-model:activeKey="activeKey" type="card">
-      <template v-for="(item, index) in planSummary" v-slot:[item.dataIndex]="{ record }"> 
+        <a-tab-pane key="1" tab="入库项目汇总(按任务)">
-        <div v-if="record[item.dataIndex]">
+          <BasicTable @register="registerRenwuTable">
-          <span>{{ record[item.dataIndex].taskName }}</span>
+            <template #toolbar>
-        <Progress type="circle" :percent="record[item.dataIndex].percent" :size="20" :strokeColor="record[item.dataIndex].color" @click="handleViewPlanDetail(record[item.dataIndex].id, record[item.dataIndex].color)"></Progress>
+              <div class="text-base font-bold">单位：（万元）</div>
-        </div>
+              <a-button type="primary" @click="showMore('renwu')" shape="round">更多</a-button>
-      </template>
+            </template>
-      <!-- <template  #phaseNumber0="{ record }"> 
+          </BasicTable>
-        <div v-if="record.phaseNumber0">
+        </a-tab-pane>
-          <span>{{ record.phaseNumber0.taskName }}</span>
+        <a-tab-pane key="2" tab="入库项目汇总(按层级)">
-        <Progress type="circle" :percent="record.phaseNumber0.percent" :size="20" :strokeColor="record.phaseNumber0.color"></Progress>
+          <BasicTable @register="registerCengjiTable">
-        </div>
+            <template #toolbar>
-      </template>
+              <div class="text-base font-bold">单位：（万元）</div>
-      <template #phaseNumber1="{ record }"> 
+              <a-button type="primary" @click="showMore('cengji')" shape="round">更多</a-button>
-        <div v-if="record.phaseNumber1">
+            </template>
-          <span>{{ record.phaseNumber1.taskName }}</span>
+          </BasicTable>
-        <Progress type="circle" :percent="record.phaseNumber1.percent" :size="20" :strokeColor="record.phaseNumber1.color" ></Progress>
+        </a-tab-pane>
-        </div>
+      </a-tabs>
-      </template>
+
-      <template #phaseNumber2="{ record }"> 
+      <ShowMorePage @register="register" />
-        <div v-if="record.phaseNumber2">
+    </div>
-          <span>{{ record.phaseNumber2.taskName }}</span>
-        <Progress type="circle" :percent="record.phaseNumber2.percent" :size="20" :strokeColor="record.phaseNumber2.color" ></Progress>
-        </div>
-      </template>
-      <template #phaseNumber3="{ record }"> 
-        <div v-if="record.phaseNumber3">
-          <span>{{ record.phaseNumber3.taskName }}</span>
-        <Progress type="circle" :percent="record.phaseNumber3.percent" :size="20" :strokeColor="record.phaseNumber3.color" ></Progress>
-        </div>
-        
-
-      </template>
-      <template #phaseNumber4="{ record }"> 
-        <div v-if="record.phaseNumber4">
-          <span>{{ record.phaseNumber4.taskName }}</span>
-        <Progress type="circle" :percent="record.phaseNumber4.percent" :size="20" :strokeColor="record.phaseNumber4.color" ></Progress>
-        </div>
-      </template>
-      <template #phaseNumber5="{ record }"> 
-        <div v-if="record.phaseNumber5">
-          <span>{{ record.phaseNumber5.taskName }}</span>
-        <Progress type="circle" :percent="record.phaseNumber5.percent" :size="20" :strokeColor="record.phaseNumber5.color" ></Progress>
-        </div>
-      </template>
-      <template #phaseNumber6="{ record }"> 
-        <div v-if="record.phaseNumber6">
-          <span>{{ record.phaseNumber6.taskName }}</span>
-        <Progress type="circle" :percent="record.phaseNumber6.percent" :size="20" :strokeColor="record.phaseNumber6.color" ></Progress>
-        </div>
-      </template> -->
-
-    </BasicTable>
-    <!-- <BasicModal @register="registeViewPlanDetail" title="项目计划详情" width="1200px" :showOkBtn="false">
-      <viewPlanDetail :projectId="projectId" :projectStage="projectStage" />
-    </BasicModal>
-    <BasicModal @register="registerProjectPlan" title="发起项目计划审批" width="1200px" :showOkBtn="false"
-      :showCancelBtn="false">
-      <addPlan :type="type" :projectid="projectId" @close="closeProjectPlanModal()" />
-    </BasicModal> -->
   </PageWrapper>
-
 </template>
 
 <script lang="ts" name="planSummary" setup>
-//ts语法
+  //ts语法
-import { ref, onMounted } from 'vue';
+  import { ref, onMounted } from 'vue';
-import {  BasicTable, useTable } from '@/components/Table';
+  import { BasicTable, useTable } from '@/components/Table';
-import { PageWrapper } from '@/components/Page';
+  import { PageWrapper } from '@/components/Page';
-import { Progress } from 'ant-design-vue';
+  import { renwuColumn, cengjiColumn } from '@/views/projectSummary/planSummary/planSummary.data';
-
+  import {
-import {  searchFormSchema } from '@/views/projectLib/projectInfo/projectInfo.data';
+    getProjectSummaryPage,
-import { planSummaryColumn } from '@/views/projectSummary/planSummary/planSummary.data';
+    getProjectSummaryPageByTask,
-import { getplanSummary } from '@/views/projectSummary/planSummary/planSummary.api'
+  } from '@/views/projectSummary/planSummary/planSummary.api';
-
+  import { useModal, BasicModal } from '@/components/Modal';
-onMounted(async () => {
+  import ShowMorePage from './ShowMorePage.vue';
-
+  const [register, { openModal }] = useModal();
-})
+
-let planSummary = ref<Array<any>>([]);
+  onMounted(async () => {});
-
+  let planSummary = ref<Array<any>>([]);
-const [registerTable, {  setColumns }] = useTable({
+  let activeKey = ref('1');
-  api: getplanSummary,
+  const [registerRenwuTable] = useTable({
-  columns: planSummaryColumn,
+    api: getProjectSummaryPageByTask,
-  rowKey:"projectName",
+    title: '入库项目汇总',
-  showIndexColumn:false,
+    columns: renwuColumn,
-  useSearchForm: true,
+    rowKey: 'projectName',
-  // actionColumn: {
+    showIndexColumn: false,
-  //   width: 140,
+    useSearchForm: false,
-  //   title: '操作',
+    showSummary: true,
-  //   dataIndex: 'action',
+    summaryFunc: onSummary,
-  //   slots: { customRender: 'action' },
+    // actionColumn: {
-  // },
+    //   width: 140,
-  afterFetch: (data) => {
+    //   title: '操作',
-    planSummary.value.pop()
+    //   dataIndex: 'action',
-    let temp = JSON.parse(JSON.stringify(planSummaryColumn))
+    //   slots: { customRender: 'action' },
-    data.forEach(item => {
+    // },
-      Object.entries(item).forEach(([key, value]) => {
+  });
-        if (key.includes("phaseNumber")) {
+  const [registerCengjiTable] = useTable({
-          let keyExists = true;
+    api: getProjectSummaryPage,
-          Object.entries(temp).forEach(([keytemp, valuetemp]) => {
+    title: '入库项目汇总',
-            if (valuetemp.dataIndex == key) {
+    columns: cengjiColumn,
-              keyExists = false
+    rowKey: 'projectName',
-              return
+    showIndexColumn: false,
-            }
+    useSearchForm: false,
-          })
+    showSummary: true,
-          if (keyExists) {
+    summaryFunc: onSummary,
-            temp.push({
+    // actionColumn: {
-              title: key.replace("phaseNumber", "阶段"),
+    //   width: 140,
-              dataIndex: key,
+    //   title: '操作',
-              slots: { customRender: key },
+    //   dataIndex: 'action',
-              align:'left'
+    //   slots: { customRender: 'action' },
-            })
+    // },
-            planSummary.value.push({
+  });
-              title: key,
+  function mapTableTotalSummary(tableData, fields) {
-              dataIndex: key,
+    let totals = {};
-            })
+    fields.forEach((field) => {
-          }
+      totals[field] = tableData.reduce((acc, item) => acc + Number(item[field]), 0);
-        }
+    });
-
+    return totals;
-      });
+  }
-    })
+  function showMore(type) {
-    console.log("lanSummary.valu", planSummary.value);
+    openModal(true, { type: type });
-    setColumns(temp)
+    console.log(type);
-  },
+  }
-  //表单查询项设置
+  function onSummary(tableData: Recordable[]) {
-  formConfig: {
+    const totals = mapTableTotalSummary(tableData, ["projectNum", 'projectProgress',"totalMoney","centralMoney"]);
-    schemas: searchFormSchema,
+    console.log('onSummary****totals>>>', totals);
+    return [
+      // totals,
+      {
+        reformName: '总计',
+        // superLeader:"总计",
+        dutyWorkplace: '总计',
+        // 计算平均值
+        projectNum: totals.projectNum ,
+        centralMoney:totals.centralMoney,
+        totalMoney:totals.totalMoney,
+        projectProgress: (totals.projectProgress / tableData.length).toFixed(2),
+        
+      },
+    ];
   }
-
-});
-function handleViewPlanDetail(projectId: string, color: string) {
-  console.log("handleViewPlanDetail", projectId, color);
-}
-
-
-
-
-
-
 </script>
 
 <style scoped>
-.timeline {
+  .timeline {
-  display: flex;
+    display: flex;
-  width: 100%;
+    width: 100%;
-  margin-bottom: 100px;
+    margin-bottom: 100px;
-
+
-  .lineitem {
+    .lineitem {
-    transform: translateX(50%);
+      transform: translateX(50%);
-    width: 25%;
+      width: 25%;
+    }
   }
-}
-
-::v-deep .el-timeline-item__tail {
-  border-left: none;
-  width: 100%;
-  border-top: 2px solid #e4e7ed;
-  position: absolute;
-  top: 6px;
-}
 
-::v-deep .el-timeline-item__wrapper {
+  ::v-deep .el-timeline-item__tail {
-  padding-left: 0;
+    border-left: none;
-  position: absolute;
+    width: 100%;
-  top: 20px;
+    border-top: 2px solid #e4e7ed;
-  transform: translateX(-50%);
+    position: absolute;
-  text-align: center;
+    top: 6px;
-}
+  }
 
-::v-deep .el-timeline-item__timestamp {
+  ::v-deep .el-timeline-item__wrapper {
-  font-size: 14px;
+    padding-left: 0;
-}
+    position: absolute;
+    top: 20px;
+    transform: translateX(-50%);
+    text-align: center;
+  }
 
-.nested-timeline {
+  ::v-deep .el-timeline-item__timestamp {
-  margin-left: 20px;
+    font-size: 14px;
-  border-left: 1px dashed #ccc;
+  }
-  padding-left: 20px;
-}
 
-.nested-timeline-item {
+  .nested-timeline {
-  margin-bottom: 10px;
+    margin-left: 20px;
-}
+    border-left: 1px dashed #ccc;
+    padding-left: 20px;
+  }
 
+  .nested-timeline-item {
+    margin-bottom: 10px;
+  }
 
-::v-deep .ant-table-expanded-row {
+  ::v-deep .ant-table-expanded-row {
-  height: auto !important;
+    height: auto !important;
-  /* 其他样式 */
+    /* 其他样式 */
-}
+  }
 </style>

src/views/projectSummary/planSummary/index_bak.vue

@@ -0,0 +1,193 @@
+<template>
+  <PageWrapper dense>
+    <!--引用表格-->
+    <BasicTable @register="registerTable">
+
+      <template v-for="(item, index) in planSummary" v-slot:[item.dataIndex]="{ record }"> 
+        <div v-if="record[item.dataIndex]">
+          <span>{{ record[item.dataIndex].taskName }}</span>
+        <Progress type="circle" :percent="record[item.dataIndex].percent" :size="20" :strokeColor="record[item.dataIndex].color" @click="handleViewPlanDetail(record[item.dataIndex].id, record[item.dataIndex].color)"></Progress>
+        </div>
+      </template>
+      <!-- <template  #phaseNumber0="{ record }"> 
+        <div v-if="record.phaseNumber0">
+          <span>{{ record.phaseNumber0.taskName }}</span>
+        <Progress type="circle" :percent="record.phaseNumber0.percent" :size="20" :strokeColor="record.phaseNumber0.color"></Progress>
+        </div>
+      </template>
+      <template #phaseNumber1="{ record }"> 
+        <div v-if="record.phaseNumber1">
+          <span>{{ record.phaseNumber1.taskName }}</span>
+        <Progress type="circle" :percent="record.phaseNumber1.percent" :size="20" :strokeColor="record.phaseNumber1.color" ></Progress>
+        </div>
+      </template>
+      <template #phaseNumber2="{ record }"> 
+        <div v-if="record.phaseNumber2">
+          <span>{{ record.phaseNumber2.taskName }}</span>
+        <Progress type="circle" :percent="record.phaseNumber2.percent" :size="20" :strokeColor="record.phaseNumber2.color" ></Progress>
+        </div>
+      </template>
+      <template #phaseNumber3="{ record }"> 
+        <div v-if="record.phaseNumber3">
+          <span>{{ record.phaseNumber3.taskName }}</span>
+        <Progress type="circle" :percent="record.phaseNumber3.percent" :size="20" :strokeColor="record.phaseNumber3.color" ></Progress>
+        </div>
+        
+
+      </template>
+      <template #phaseNumber4="{ record }"> 
+        <div v-if="record.phaseNumber4">
+          <span>{{ record.phaseNumber4.taskName }}</span>
+        <Progress type="circle" :percent="record.phaseNumber4.percent" :size="20" :strokeColor="record.phaseNumber4.color" ></Progress>
+        </div>
+      </template>
+      <template #phaseNumber5="{ record }"> 
+        <div v-if="record.phaseNumber5">
+          <span>{{ record.phaseNumber5.taskName }}</span>
+        <Progress type="circle" :percent="record.phaseNumber5.percent" :size="20" :strokeColor="record.phaseNumber5.color" ></Progress>
+        </div>
+      </template>
+      <template #phaseNumber6="{ record }"> 
+        <div v-if="record.phaseNumber6">
+          <span>{{ record.phaseNumber6.taskName }}</span>
+        <Progress type="circle" :percent="record.phaseNumber6.percent" :size="20" :strokeColor="record.phaseNumber6.color" ></Progress>
+        </div>
+      </template> -->
+
+    </BasicTable>
+    <!-- <BasicModal @register="registeViewPlanDetail" title="项目计划详情" width="1200px" :showOkBtn="false">
+      <viewPlanDetail :projectId="projectId" :projectStage="projectStage" />
+    </BasicModal>
+    <BasicModal @register="registerProjectPlan" title="发起项目计划审批" width="1200px" :showOkBtn="false"
+      :showCancelBtn="false">
+      <addPlan :type="type" :projectid="projectId" @close="closeProjectPlanModal()" />
+    </BasicModal> -->
+  </PageWrapper>
+
+</template>
+
+<script lang="ts" name="planSummary" setup>
+//ts语法
+import { ref, onMounted } from 'vue';
+import {  BasicTable, useTable } from '@/components/Table';
+import { PageWrapper } from '@/components/Page';
+import { Progress } from 'ant-design-vue';
+
+import {  searchFormSchema } from '@/views/projectLib/projectInfo/projectInfo.data';
+import { planSummaryColumn } from '@/views/projectSummary/planSummary/planSummary.data';
+import { getplanSummary } from '@/views/projectSummary/planSummary/planSummary.api'
+
+onMounted(async () => {
+
+})
+let planSummary = ref<Array<any>>([]);
+
+const [registerTable, {  setColumns }] = useTable({
+  api: getplanSummary,
+  columns: planSummaryColumn,
+  rowKey:"projectName",
+  showIndexColumn:false,
+  useSearchForm: true,
+  // actionColumn: {
+  //   width: 140,
+  //   title: '操作',
+  //   dataIndex: 'action',
+  //   slots: { customRender: 'action' },
+  // },
+  afterFetch: (data) => {
+    planSummary.value.pop()
+    let temp = JSON.parse(JSON.stringify(planSummaryColumn))
+    data.forEach(item => {
+      Object.entries(item).forEach(([key, value]) => {
+        if (key.includes("phaseNumber")) {
+          let keyExists = true;
+          Object.entries(temp).forEach(([keytemp, valuetemp]) => {
+            if (valuetemp.dataIndex == key) {
+              keyExists = false
+              return
+            }
+          })
+          if (keyExists) {
+            temp.push({
+              title: key.replace("phaseNumber", "阶段"),
+              dataIndex: key,
+              slots: { customRender: key },
+              align:'left'
+            })
+            planSummary.value.push({
+              title: key,
+              dataIndex: key,
+            })
+          }
+        }
+
+      });
+    })
+    console.log("lanSummary.valu", planSummary.value);
+    setColumns(temp)
+  },
+  //表单查询项设置
+  formConfig: {
+    schemas: searchFormSchema,
+  }
+
+});
+function handleViewPlanDetail(projectId: string, color: string) {
+  console.log("handleViewPlanDetail", projectId, color);
+}
+
+
+
+
+
+
+</script>
+
+<style scoped>
+.timeline {
+  display: flex;
+  width: 100%;
+  margin-bottom: 100px;
+
+  .lineitem {
+    transform: translateX(50%);
+    width: 25%;
+  }
+}
+
+::v-deep .el-timeline-item__tail {
+  border-left: none;
+  width: 100%;
+  border-top: 2px solid #e4e7ed;
+  position: absolute;
+  top: 6px;
+}
+
+::v-deep .el-timeline-item__wrapper {
+  padding-left: 0;
+  position: absolute;
+  top: 20px;
+  transform: translateX(-50%);
+  text-align: center;
+}
+
+::v-deep .el-timeline-item__timestamp {
+  font-size: 14px;
+}
+
+.nested-timeline {
+  margin-left: 20px;
+  border-left: 1px dashed #ccc;
+  padding-left: 20px;
+}
+
+.nested-timeline-item {
+  margin-bottom: 10px;
+}
+
+
+::v-deep .ant-table-expanded-row {
+  height: auto !important;
+  /* 其他样式 */
+}
+</style>

src/views/projectSummary/planSummary/planSummary.api.ts

@@ -2,12 +2,29 @@ import { defHttp } from '@/utils/http/axios';
 
 export enum Api {
   getplanSummary = '/huzhouPlan/getplanSummary',
-
+  getProjectNumber='/huzhouProject/getTotalNumber',
+  getStoragedNumber='/huzhouProject/getStoragedNumber',//入库项目数量
+  getSupportingNumber='/huzhouProject/getSupportingNumber',//配套项目数量
+  getStoragedFound='/huzhouProject/getStoragedFound',//入库项目资金
+  getSupportingFound='/huzhouProject/getSupportingFound',//配套项目资金
+  getProjectSummaryPage='/huzhouProject/getProjectSummaryPage',//项目总览页面（层级）
+  getProjectSummaryPageByTask='/huzhouProject/getProjectSummaryPageByTask',//项目总览页面（任务)
+  getCountStage='/huzhouProject/countStage',//获取各阶段的数量
+  getProjectDetailPage='/huzhouProject/getProjectDetailPage'
 }
 /**
  * 提交入库申请流程
  */
 export const getplanSummary = (params) => defHttp.get({ url: Api.getplanSummary, params })
+export const getProjectNumber = (params?) => defHttp.get({ url: Api.getProjectNumber, params })
+export const getStoragedNumber = (params?) => defHttp.get({ url: Api.getStoragedNumber, params })
+export const getSupportingNumber = (params?) => defHttp.get({ url: Api.getSupportingNumber, params })
+export const getStoragedFound = (params?) => defHttp.get({ url: Api.getStoragedFound, params })
+export const getSupportingFound = (params?) => defHttp.get({ url: Api.getSupportingFound, params })
+export const getProjectSummaryPage = (params) => defHttp.get({ url: Api.getProjectSummaryPage, params })
+export const getProjectSummaryPageByTask = (params) => defHttp.get({ url: Api.getProjectSummaryPageByTask, params })
+export const getCountStage = (params?) => defHttp.get({ url: Api.getCountStage, params })
+export const getProjectDetailPage = (params?) => defHttp.get({ url: Api.getProjectDetailPage, params })
 
 
 

src/views/projectSummary/planSummary/planSummary.data.ts

@@ -1,13 +1,28 @@
 import { BasicColumn } from '@/components/Table';
+import { FormSchema } from '@/components/Form';
+import { getDutyWorkplaceList } from '@/views/informationSub/countStatistics/countStatistics.api';
+async function getDutyWorkplaceOptions() {
+  let dutyWorkplaceOption = await getDutyWorkplaceList();
 
+  let uniqueList = [...new Set(dutyWorkplaceOption)];
+
+  let res = uniqueList.map((item) => {
+    return {
+      label: item,
+      value: item,
+    };
+  });
+  console.log('wwres', res);
+
+  return res;
+}
 export const planSummaryColumn: BasicColumn[] = [
 
   {
     title: '项目名称',
     dataIndex: 'projectName',
     width: 300,
-    align:'left'
+    align: 'left',
-
   },
   {
     title: '行政区划',
@@ -62,3 +77,675 @@ export const PlaninfoFiletableColumns: BasicColumn[] = [
     },
   }
 ]
+export const renwuSummaryDetailColumn: BasicColumn[] = [
+  {
+    title: '改革所属项目',
+    dataIndex: 'reformName',
+    format: 'dict|reformTasks',
+  },
+  {
+    title: '上级指导处室',
+    dataIndex: 'superLeader',
+    format: 'dict|superLeader',
+  },
+  {
+    title: '项目数量',
+    dataIndex: 'projectNum',
+    sorter: true,
+  },
+  {
+    title: "总申报资金",
+    dataIndex: "totalMoney",
+    customRender: ({ record }) => {
+      let money: number = record.totalMoney / 10000
+      return money.toFixed(2)
+    },
+    sorter: true,
+  },
+  {
+    title: "总中央资金",
+    dataIndex: "centralMoney",
+    customRender: ({ record }) => {
+      let money: number = record.centralMoney / 10000
+      return money.toFixed(2)
+    },
+    sorter: true,
+  },
+  {
+
+    title: "联审估算资金",
+    dataIndex: "estimateMoney",
+    customRender: ({ record }) => {
+      let money: number = record.estimateMoney / 10000
+      return money.toFixed(2)
+    },
+    sorter: true,
+  },
+  {
+    title: "合同金额",
+    dataIndex: "contractMoney",
+    customRender: ({ record }) => {
+      let money: number = record.contractMoney / 10000
+      return money.toFixed(2)
+    },
+    sorter: true,
+  },
+  {
+    title: "合同中央资金",
+    dataIndex: "contractCentralMoney",
+    customRender: ({ record }) => {
+      let money: number = record.contractCentralMoney / 10000
+      return money.toFixed(2)
+    },
+    sorter: true,
+  },
+  {
+    title: "项目总进度",
+    dataIndex: "projectProgress",
+    customRender: ({ record }) => {
+      let progress: number = record.projectProgress * 100
+      return progress.toFixed(0) + "%"
+    },
+    sorter: true,
+  },
+
+];
+export const renwuColumn: BasicColumn[] = [
+  {
+    title: '改革所属项目',
+    dataIndex: 'reformName',
+    format: 'dict|reformTasks',
+  },
+  {
+    title: '上级指导处室',
+    dataIndex: 'superLeader',
+    format: 'dict|superLeader',
+  },
+  {
+    title: '项目数量',
+    dataIndex: 'projectNum',
+    sorter: true,
+  },
+  {
+    title: "项目总进度",
+    dataIndex: "projectProgress",
+    customRender: ({ record }) => {
+      let progress: number = record.projectProgress * 100
+      return progress.toFixed(0) + "%"
+    },
+    sorter: true,
+  },
+  {
+    title: "总申报资金",
+    dataIndex: "totalMoney",
+    customRender: ({ record }) => {
+      let money: number = record.totalMoney / 10000
+      return money.toFixed(2)
+    },
+    sorter: true,
+  },
+  {
+
+    title: "总中央资金",
+    dataIndex: "centralMoney",
+    customRender: ({ record }) => {
+      let money: number = record.centralMoney / 10000
+      return money.toFixed(2)
+    },
+    sorter: true,
+  },
+
+];
+export const cengjiSummaryDetailColumn: BasicColumn[] = [
+
+  {
+    title: '层级',
+    dataIndex: "dutyWorkplace"
+  },
+  {
+    title: '项目数量',
+    dataIndex: 'projectNum',
+    sorter: true,
+  },
+  {
+    title: "总申报资金",
+    dataIndex: "totalMoney",
+    customRender: ({ record }) => {
+      let money: number = record.totalMoney / 10000
+      return money.toFixed(2)
+    },
+    sorter: true,
+  },
+  {
+    title: "总中央资金",
+    dataIndex: "centralMoney",
+    customRender: ({ record }) => {
+      let money: number = record.centralMoney / 10000
+      return money.toFixed(2)
+    },
+    sorter: true,
+  },
+  {
+
+    title: "联审估算资金",
+    dataIndex: "estimateMoney",
+    customRender: ({ record }) => {
+      let money: number = record.estimateMoney / 10000
+      return money.toFixed(2)
+    },
+    sorter: true,
+  },
+  {
+    title: "合同金额",
+    dataIndex: "contractMoney",
+    customRender: ({ record }) => {
+      let money: number = record.contractMoney / 10000
+      return money.toFixed(2)
+    },
+    sorter: true,
+  },
+  {
+    title: "合同中央资金",
+    dataIndex: "contractCentralMoney",
+    customRender: ({ record }) => {
+      let money: number = record.contractCentralMoney / 10000
+      return money.toFixed(2)
+    },
+    sorter: true,
+  },
+  {
+    title: "项目总进度",
+    dataIndex: "projectProgress",
+    customRender: ({ record }) => {
+      let progress: number = record.projectProgress * 100
+      return progress.toFixed(0) + "%"
+    },
+    sorter: true,
+  },
+];
+export const cengjiColumn: BasicColumn[] = [
+
+  {
+    title: '层级',
+    dataIndex: "dutyWorkplace"
+  },
+  {
+    title: '项目数量',
+    dataIndex: 'projectNum',
+    sorter: true,
+  },
+  {
+    title: "项目总进度",
+    dataIndex: "projectProgress",
+    customRender: ({ record }) => {
+      let progress: number = record.projectProgress * 100
+      return progress.toFixed(0) + "%"
+    },
+    sorter: true,
+  },
+  {
+    title: "总申报资金",
+    dataIndex: "totalMoney",
+    customRender: ({ record }) => {
+      let money: number = record.totalMoney / 10000
+      return money.toFixed(2)
+    },
+    sorter: true,
+  },
+  {
+
+    title: "总中央资金",
+    dataIndex: "centralMoney",
+    customRender: ({ record }) => {
+      let money: number = record.centralMoney / 10000
+      return money.toFixed(2)
+    },
+    sorter: true,
+  },
+];
+
+export const detailColumn: BasicColumn[] = [
+  {
+    title: '项目名称',
+    dataIndex: 'projectName',
+  },
+  {
+    title: '行政区划',
+    dataIndex: 'adminDivision',
+  },
+  {
+    title: '责任单位',
+    dataIndex: 'dutyWorkplace',
+  },
+  {
+    title: '单位属性',
+    dataIndex: 'workplaceProperties',
+  },
+  {
+    title: '改革所属项目',
+    dataIndex: 'reformName',
+    format: 'dict|reformTasks',
+  },
+  {
+    title: '上级指导处室',
+    dataIndex: 'superLeader',
+    format: 'dict|superLeader',
+  },
+
+  {
+    title: "总申报资金",
+    dataIndex: "totalMoney",
+    customRender: ({ record }) => {
+      let money: number = record.totalMoney / 10000
+      return money.toFixed(2)
+    },
+    sorter: true,
+  },
+  {
+    title: "总中央资金",
+    dataIndex: "centralMoney",
+    customRender: ({ record }) => {
+      let money: number = record.centralMoney / 10000
+      return money.toFixed(2)
+    },
+    sorter: true,
+  },
+  {
+
+    title: "联审估算资金",
+    dataIndex: "estimateMoney",
+    customRender: ({ record }) => {
+      let money: number = record.estimateMoney / 10000
+      return money.toFixed(2)
+    },
+    sorter: true,
+  },
+  {
+    title: "合同金额",
+    dataIndex: "contractMoney",
+    customRender: ({ record }) => {
+      let money: number = record.contractMoney / 10000
+      return money.toFixed(2)
+    },
+    sorter: true,
+  },
+  {
+    title: "合同中央资金",
+    dataIndex: "contractCentralMoney",
+    customRender: ({ record }) => {
+      let money: number = record.contractCentralMoney / 10000
+      return money.toFixed(2)
+    },
+    sorter: true,
+  },
+  {
+    title: "当前所处阶段",
+    dataIndex: "projectStage",
+    filters: [
+      { text: '项目申报阶段', value: '0' },
+      { text: '项目立项阶段', value: '1' },
+      { text: '项目采购', value: '2' },
+      { text: '项目建设', value: '3' },
+      { text: '项目验收', value: '5' },
+    ],
+  },
+  {
+    title: "当前所处节点",
+    dataIndex: "stepName",
+    filters: [
+      { text: '可研报告初稿编制', value: '可研报告初稿编制' },
+      { text: '可研技术审查报告确认', value: '可研技术审查报告确认' },
+      { text: '可研报告终稿编制', value: '可研报告终稿编制' },
+      { text: '造价评估报告确认', value: '造价评估报告确认' },
+      { text: '联合技术审查', value: '联合技术审查' },
+      { text: '集中核验', value: '集中核验' },
+      { text: '立项审批', value: '立项审批' },
+      { text: '招标文件编制', value: '招标文件编制' },
+      { text: '合同签订', value: '合同签订' },
+      { text: '项目开工', value: '项目开工' },
+      { text: '初验阶段', value: '初验阶段' },
+      { text: '终验阶段', value: '终验阶段' },
+
+    ],
+  },
+  {
+    title: "文件是否已上传",
+    dataIndex: "isUpload",
+    customRender: ({ record }) => {
+      if (record.isUpload == 1) {
+        return "是"
+      } else {
+        return "否"
+      }
+    },
+    filters: [
+      { text: '是', value: '1' },
+      { text: '否', value: '0' },
+    ],
+  },
+  {
+    title: "线下是否已完成",
+    dataIndex: "isOffline",
+    customRender: ({ record }) => {
+      if (record.isOffline == 1) {
+        return "是"
+      } else {
+        return "否"
+      }
+    },
+    filters: [
+      { text: '是', value: '1' },
+      { text: '否', value: '0' },
+    ],
+  },
+  {
+    title: "项目总进度",
+    dataIndex: "projectProgress",
+    customRender: ({ record }) => {
+      let progress: number = record.projectProgress * 100
+      return progress.toFixed(0) + "%"
+    },
+  },
+];
+
+export const searchFormSchemacengji: FormSchema[] = [
+  {
+    label: '项目名称',
+    field: 'projectName',
+    component: 'Input',
+    labelWidth: 'auto'
+    //colProps: { span: 6 },
+  },
+  {
+    label: '行政区划',
+    field: 'adminDivision',
+    component: 'Select',
+    labelWidth: 'auto',
+    componentProps: {
+      options: [
+        {
+          label: "市本级",
+          value: "市本级"
+        },
+        {
+          label: "吴兴区",
+          value: "吴兴区"
+        },
+        {
+          label: "南浔区",
+          value: "南浔区"
+        },
+        {
+          label: "德清县",
+          value: "德清县"
+        },
+        {
+          label: "长兴县",
+          value: "长兴县"
+        },
+        {
+          label: "安吉县",
+          value: "安吉县"
+        },
+      ]
+    }
+    //colProps: { span: 6 },
+  },
+  {
+    //标题名称
+    label: '责任单位',
+    //字段
+    field: 'dutyWorkplace',
+    //组件 支持组件详见 components/Form/src/types/index.ts 中的 ComponentType
+    component: 'ApiSelect',
+    componentProps: () => {
+      return {
+        api: () => getDutyWorkplaceOptions(),
+        disabled: true
+      }
+    },
+    labelWidth: 'auto'
+  },
+  {
+    //标题名称
+    label: '单位属性',
+    //字段
+    field: 'workplaceProperties',
+    //组件 支持组件详见 components/Form/src/types/index.ts 中的 ComponentType
+    component: 'Select',
+    componentProps: {
+      options: [
+        {
+          label: "医疗机构",
+          value: "医疗机构"
+        },
+        {
+          label: "卫生行政部门",
+          value: "卫生行政部门"
+        }
+      ]
+    },
+    labelWidth: 'auto'
+  },
+  {
+    field: 'reformName',
+    label: '改革所属项目',
+    component: 'DictSelect',
+    componentProps: {
+      dictType: 'reformTasks',
+    },
+    itemProps: { validateTrigger: 'blur' },
+    labelWidth: 'auto'
+  },
+  {
+    field: 'superLeader',
+    label: '上级指导处室',
+    component: 'DictSelect',
+    componentProps: {
+      dictType: 'superLeader',
+    },
+    labelWidth: 'auto'
+
+  },
+];
+
+export const searchFormSchemarenwu: FormSchema[] = [
+  {
+    label: '项目名称',
+    field: 'projectName',
+    component: 'Input',
+    labelWidth: 'auto'
+    //colProps: { span: 6 },
+  },
+  {
+    label: '行政区划',
+    field: 'adminDivision',
+    component: 'Select',
+    labelWidth: 'auto',
+    componentProps: {
+      options: [
+        {
+          label: "市本级",
+          value: "市本级"
+        },
+        {
+          label: "吴兴区",
+          value: "吴兴区"
+        },
+        {
+          label: "南浔区",
+          value: "南浔区"
+        },
+        {
+          label: "德清县",
+          value: "德清县"
+        },
+        {
+          label: "长兴县",
+          value: "长兴县"
+        },
+        {
+          label: "安吉县",
+          value: "安吉县"
+        },
+      ]
+    }
+    //colProps: { span: 6 },
+  },
+  {
+    //标题名称
+    label: '责任单位',
+    //字段
+    field: 'dutyWorkplace',
+    //组件 支持组件详见 components/Form/src/types/index.ts 中的 ComponentType
+    component: 'ApiSelect',
+    componentProps: () => {
+      return {
+        api: () => getDutyWorkplaceOptions()
+      }
+    },
+    labelWidth: 'auto'
+  },
+  {
+    //标题名称
+    label: '单位属性',
+    //字段
+    field: 'workplaceProperties',
+    //组件 支持组件详见 components/Form/src/types/index.ts 中的 ComponentType
+    component: 'Select',
+    componentProps: {
+      options: [
+        {
+          label: "医疗机构",
+          value: "医疗机构"
+        },
+        {
+          label: "卫生行政部门",
+          value: "卫生行政部门"
+        }
+      ]
+    },
+    labelWidth: 'auto'
+  },
+  {
+    field: 'reformName',
+    label: '改革所属项目',
+    component: 'DictSelect',
+    componentProps: {
+      dictType: 'reformTasks',
+      disabled: true
+    },
+    itemProps: { validateTrigger: 'blur' },
+    labelWidth: 'auto'
+  },
+  {
+    field: 'superLeader',
+    label: '上级指导处室',
+    component: 'DictSelect',
+    componentProps: {
+      dictType: 'superLeader',
+      disabled: true
+    },
+    labelWidth: 'auto'
+
+  },
+];
+export const searchFormSchema: FormSchema[] = [
+  {
+    label: '项目名称',
+    field: 'projectName',
+    component: 'Input',
+    labelWidth: 'auto'
+    //colProps: { span: 6 },
+  },
+  {
+    label: '行政区划',
+    field: 'adminDivision',
+    component: 'Select',
+    labelWidth: 'auto',
+    componentProps: {
+      options: [
+        {
+          label: "市本级",
+          value: "市本级"
+        },
+        {
+          label: "吴兴区",
+          value: "吴兴区"
+        },
+        {
+          label: "南浔区",
+          value: "南浔区"
+        },
+        {
+          label: "德清县",
+          value: "德清县"
+        },
+        {
+          label: "长兴县",
+          value: "长兴县"
+        },
+        {
+          label: "安吉县",
+          value: "安吉县"
+        },
+      ]
+    }
+    //colProps: { span: 6 },
+  },
+  {
+    //标题名称
+    label: '责任单位',
+    //字段
+    field: 'dutyWorkplace',
+    //组件 支持组件详见 components/Form/src/types/index.ts 中的 ComponentType
+    component: 'ApiSelect',
+    componentProps: () => {
+      return {
+        api: () => getDutyWorkplaceOptions()
+      }
+    },
+    labelWidth: 'auto'
+  },
+  {
+    //标题名称
+    label: '单位属性',
+    //字段
+    field: 'workplaceProperties',
+    //组件 支持组件详见 components/Form/src/types/index.ts 中的 ComponentType
+    component: 'Select',
+    componentProps: {
+      options: [
+        {
+          label: "医疗机构",
+          value: "医疗机构"
+        },
+        {
+          label: "卫生行政部门",
+          value: "卫生行政部门"
+        }
+      ]
+    },
+    labelWidth: 'auto'
+  },
+  {
+    field: 'reformName',
+    label: '改革所属项目',
+    component: 'DictSelect',
+    componentProps: {
+      dictType: 'reformTasks',
+    },
+    itemProps: { validateTrigger: 'blur' },
+    labelWidth: 'auto'
+  },
+  {
+    field: 'superLeader',
+    label: '上级指导处室',
+    component: 'DictSelect',
+    componentProps: {
+      dictType: 'superLeader',
+    },
+    labelWidth: 'auto'
+
+  },
+];

src/views/projectSummary/planSummary/setElstepchild.vue

@@ -0,0 +1,68 @@
+<template>
+  <el-steps direction="vertical" finish-status="success" class="steps">
+    <el-step
+      v-for="(item, index) in dataTo.child"
+      :key="index"
+      :status="item.isoffline == 1 ? 'success' : 'wait' "
+    >
+      <template #title>
+        <a-button type="text" @click="handleClickStep(item)">
+          <template #default>
+            <div class="flex text-[#0ac00d]" v-if="item.isoffline == 1">
+                {{ item.taskName }}
+            </div>
+            <div  v-else>
+                {{ item.taskName }}
+            </div>
+          </template>
+        </a-button>
+      </template>
+      <template #description>
+        <setElstepchild v-if="item.children != null" :child="item.children"></setElstepchild>
+      </template>
+    </el-step>
+  </el-steps>
+</template>
+<script lang="ts" name="viewPlanDetail" setup>
+  import { defineProps, ref } from 'vue';
+  import setElstepchild from './setElstepchild.vue';
+  import { useModal } from '@/components/Modal';
+  import { setPlaninfoIsoffline } from '@/views/projectLib/projectPlan/projectPlan.api';
+
+  let dataTo = defineProps(['child']);
+  function handleClickStep(item) {
+    if(item.isoffline == 1){
+      item.isoffline = 0;
+    }else{
+      item.isoffline = 1;
+    }
+    setPlaninfoIsoffline({id:item.id,isoffline:item.isoffline})
+    console.log(item);
+  }
+</script>
+<style lang="less" scoped>
+  @publicColor: #0ac00d;
+  @publicHeight: 35px;
+  .steps {
+    ::v-deep .el-step {
+      .el-step__head.is-process {
+        color: @publicColor;
+        border-color: @publicColor;
+      }
+      .el-step__head.is-success {
+        color: @publicColor;
+        border-color: @publicColor;
+      }
+      .is-process .el-step__icon.is-text {
+        background: @publicColor;
+        color: #fff;
+      }
+      .el-step__title.is-process {
+        color: @publicColor;
+      }
+      .el-step__title.is-success {
+        color: @publicColor;
+      }
+    }
+  }
+</style>

src/views/projectSummary/planSummary/settu.vue

@@ -0,0 +1,126 @@
+<template>
+  <div>
+    <el-row>
+      <el-col :span="24">
+        项目进度：<Progress :size="15" :percent="activities[0]?.totalPercent"></Progress>
+      </el-col>
+    </el-row>
+    <el-row>
+      <el-col :span="24">
+        <el-steps finish-status="success" :active="activities.status">
+          <el-step
+            v-for="(item, index) in activities"
+            :key="index"
+            :status=" 'wait'"
+          >
+            <template #title>
+              <div>
+                {{ item.taskName }}
+              </div>
+              <div>
+                {{ item.scheduledStartTime + '--' + item.scheduledEndTime }}
+              </div>
+            </template>
+            <template #description>
+              <setElstepchild v-if="item.children != null" :child="item.children"></setElstepchild>
+            </template>
+            <template #icon>
+              <Progress
+                type="circle"
+                :percent="item.percent"
+                :size="40"
+                :status="item.progressStatus"
+              ></Progress>
+            </template>
+          </el-step>
+        </el-steps>
+      </el-col>
+    </el-row>
+  </div>
+
+</template>
+<script lang="ts" name="viewPlanDetail" setup>
+  import { ref, onMounted } from 'vue';
+  import setElstepchild from './setElstepchild.vue';
+  import { Progress, message } from 'ant-design-vue';
+
+
+  let dataTo = defineProps(["res"]);
+  let activities = ref([]);
+  onMounted(() => {
+    activities.value=dataTo.res
+  });
+
+  
+</script>
+<style scoped>
+  .timeline {
+    display: flex;
+    width: 100%;
+    margin-bottom: 100px;
+
+    .lineitem {
+      transform: translateX(50%);
+      width: 25%;
+    }
+  }
+
+  :deep(.el-timeline-item__tail) {
+    border-left: none;
+    border-top: 2px solid #e4e7ed;
+    width: 100%;
+    position: absolute;
+    top: 9px;
+  }
+
+  :deep(.el-timeline-item__wrapper) {
+    padding-left: 0;
+    position: absolute;
+    top: 20px;
+    transform: translateX(-50%);
+    text-align: center;
+  }
+
+  :deep(.el-timeline-item__timestamp) {
+    font-size: 14px;
+  }
+
+  .el-row {
+    margin-bottom: 25px;
+    margin-top: 25px;
+  }
+
+  .componentA {
+    position: absolute;
+    z-index: 1;
+    /* 设置较低的z-index值 */
+    /* 其他样式 */
+  }
+
+  .componentB {
+    position: absolute;
+    z-index: 2;
+    /* 设置较高的z-index值 */
+    /* 其他样式 */
+  }
+
+  .custom-content {
+    position: absolute;
+    top: 0;
+    transform: translateX(-50%);
+    transition: left 0.3s;
+    z-index: 3;
+    margin-top: 20px;
+  }
+
+  .italicize {
+    /* transform: skew(15deg); 使用 transform 属性进行倾斜 */
+    transform: rotate(-45deg);
+    display: inline-block;
+    /* 需要将元素设为块级元素才能应用transform属性 */
+    z-index: 4;
+    margin-top: -20px;
+    color: #ea1212;
+    font-size: large;
+  }
+</style>